我想使我的网站移动友好。我了解响应式设计如何使用CSS来解决此问题，但是我发现还有另一个问题。我的网站中正在使用JQuery，Bootstrap，jQuery UI和jqGrid ，并且它们在桌面上都可以正常使用，但是从移动设备（甚至是快速移动设备）查看网站时，它们的运行速度非常慢。
根据Google Developers的说法，使网站移动友好的首选方法是将其保留在一个URL上并使用媒体查询（响应式设计）。但是，这不能解决我的javascript内容问题。我是否需要创建一个单独的URL（前面带有“ m”，例如m.website.com），然后使用诸如jQuery Mobile之类的东西在我的网站上构建每个页面的另一个版本？到目前为止，我的测试表明，jQuery Mobile在我的智能手机上似乎运行得足够快。
我考虑的另一种选择是将网站重建为使用jQuery Mobile构建所有页面的站点，但我认为这不是正确的解决方案（通过JQuery Mobile构建桌面应用程序）。
那么，在为移动浏览器提供服务时，拆分我的网站并使用jQuery Mobile是否是解决javascript速度问题的正确方法？
更新：
对我来说，解决方案是删除jquery-UI和jqgrid。这些是减速的主要原因。代替jquery-UI，我只使用单个jquery插件或根据需要编写自己的插件。至于jqgrid，我发现了一个具有基本功能的良好引导网格，我只是在此基础上补充了我所需要的。我仍在使用jquery和bootstrap，但现在在移动设备上运行起来很快！我并没有创建单独的移动网站，但是我只是为每个页面/功能都牢记移动性。总体而言，我一直在利用引导程序和媒体查询的功能来使每个页面在移动设备和台式机上都具有良好的感觉。到现在为止还挺好！
您需要了解的第一件事是，99.9％的可用移动框架运行缓慢。这是因为：
如此说来，我们可以走得更远，让我告诉您一些关于jQuery Mobile应用程序体系结构的秘密。
好的jQuery Mobile架构的第一个秘诀是对jQuery Mobile实际工作方式的了解。有两种可能的方法可以创建jQuery Mobile页面框架。像往常一样，真相位于中间。这两个模板都有好的和坏的一面，我们可以围绕它们进行操作，特别是如果我们知道它们的坏的一面以及它们如何影响整体应用程序功能，则尤其如此。
第一个也是经典的一个多页模板，其中一个HTML包含所有可用的页面。这也是向新的jQuery Mobile开发人员展示的第一个模板。它也是最容易实现的模板，只有两个可用。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
如您所见，一个HTML包含所有可用页面。尽管这对于普通的Web开发人员来说听起来很愚蠢，但这是一个非常好的解决方案。这种模板解决方案不会遇到页面过渡问题，例如使用多个HTML页面的模板解决方案（我们将在稍后讨论）。由于jQuery Mobile使用ajax来进行页面加载延迟，因此，同样的延迟可能会导致页面转换出现问题。由于所有内容均已加载到DOM多页模板中，因此不会遇到此类问题。
另一方面，该解决方案也存在一个严重的问题。移动Web应用程序可以占据DOM的相当大的一部分，而这对于台式机浏览器而言并不是问题，但它可能会在移动设备及其随附的浏览器上引起问题。同样不要忘记，我们在谈论为移动Web应用程序制作的框架。
几个页面可能感觉不到，但是想想如果Web应用程序具有复杂的页面结构（我已经看到jQuery Mobile页面包含数百个表单元素）会发生什么。您看到的页面HTML并不是最终的HTML。当jQuery Mobile加载页面时，它会通过自己的CSS对其进行增强。
最终的HTML结构可以是初始HTML的2-8倍，并且所有操作都是动态完成的。这使我们想到了这个模板的第二个问题。更多的内容意味着需要使用/需要更多的处理能力来增强页面内容，而jQuery Mobile是一大类饥饿的野兽。
第二个模板解决方案也称为多HTML模板。与多页模板不同，此模板使用多个HTML页面作为应用程序框架。该解决方案应该更适合经验丰富的Web开发人员，并且可以轻松地与服务器端页面生成一起使用。
与多页模板相比，该解决方案具有很大的优势。仅将初始HTML加载到DOM中，这使其成为一种内存友好的方法。只有在直接访问页面（或通过现金系统加载页面）时，页面才被加载到DOM中，而一旦页面不再处于活动状态，页面就会被卸载。从实际的角度来看，这是极好的，页面易于访问，更不用说简短了。
对于移动Web应用程序，这看起来似乎是最佳解决方案，但是存在一个大问题。页面转换可能会引起问题，因为每个HTML文件都需要先加载，然后才能进行转换。在使用移动设备时，尤其是在使用Android 2.X平台时，这一点尤为突出。第二个问题来自页面卸载。因为每次使用页面时都会加载/卸载页面，所以pageinit事件将在页面处于活动状态时触发。
这部分将仅讨论纯香草jQuery Mobile方法。
在创建应用之前，请先考虑一下它的作用，您期望它的工作原理以及页面流向。为了创建表现最佳的应用程序，我们需要将两个模板结合在一起。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句