我想让我的网站移动设备友好。我理解响应式设计如何使用CSS来帮助解决这个问题，但我发现还有另外一个问题。 JQuery，Bootstrap，jQuery UI，和 jqGrid 正在我的网站中使用，适用于桌面，但从移动设备上查看网站时，它们非常慢设备（即使是快速移动设备）。
According to Google Developers，使网站移动设备友好的首选方法是将其保留在一个网址上并使用媒体查询（响应式设计）。但是，这并没有解决我的javascript内容问题。我是否需要创建一个单独的URL（前面有一个“m”，如m.website.com），然后使用像jQuery Mobile这样的东西在我的网站上构建每个页面的另一个版本？ 到目前为止我的测试显示jQuery Mobile似乎在我的智能手机上运行得足够快。
我考虑的另一个选项是将网站重建到jQuery Mobile中构建所有页面的位置，但我认为这不是正确的解决方案（Building Desktop apps by JQuery Mobile）。
在为移动浏览器提供正确的方法来解决javascript速度问题时，将我的网站拆分并使用jQuery Mobile是什么？
更新
我的解决方案是删除jquery-UI和jqgrid。那些是减速的主要元凶。而不是jquery-UI，我只是使用单独的jquery插件或根据需要编写自己的插件。至于jqgrid，我发现了一个具有基本功能的良好引导网格，我只是添加了我需要的东西。我还在使用jquery和bootstrap，但现在移动速度很快！我不是在创建一个单独的移动网站，但我只关注每个页面/功能的移动设备。总的来说，我一直在利用引导程序和媒体查询的强大功能，让每个页面都能在移动设备和桌面设备上获得良好的感觉。到目前为止一切都很好！
答案 0 :(得分：4)
首先需要了解的是，99.9％的可用移动框架速度很慢。这是由于：
有了这个说我们可以走得更远，让我告诉你一些好的jQuery Mobile app架构的秘密。
良好的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事件。
本部分仅讨论纯粹的vanilla jQuery Mobile方法。
在创建应用程序之前，请考虑它，您期望它的工作方式和页面流程是什么。要创建最佳行为应用程序，我们需要将两个模板组合在一起。