Javascript / Jquery在桌面浏览器中运行速度很快，但在移动/智能手机浏览器中运行速度很慢……我应该拆分我的网站并使用jQuery Mobile吗？
我想让我的网站移动友好。 我理解响应式设计如何使用CSS来帮助解决这个问题，但我发现还有另一个问题。 JQuery，Bootstrap，jQuery UI和jqGrid正在我的网站中使用，并且适用于桌面，但是当从移动设备 （甚至是快速移动设备） 查看网站时 ，它们非常慢 。
根据谷歌开发者的说法 ，使网站移动友好的首选方法是将其保存在一个URL上并使用媒体查询（响应式设计）。 但是这并没有解决我的javascript内容问题。 我是否需要创建一个单独的URL（前面有一个“m”，例如m.website.com），然后使用像jQuery Mobile这样的东西在我的网站上构建每个页面的另一个版本？ 到目前为止，我的测试显示jQuery Mobile似乎在我的智能手机上运行得足够快。
我考虑的另一个选项是重建网站到jQuery Mobile中构建所有页面的地方，但我不认为这是正确的解决方案（ 由JQuery Mobile构建桌面应用程序 ）。
那么，在为移动浏览器提供正确的方法来解决javascript速度问题时，将我的网站拆分并使用jQuery Mobile？
更新：
我的解决方案是删除jquery-UI和jqgrid。 那些是减速的主要元凶。 而不是jquery-UI，我只是使用单独的jquery插件或根据需要编写自己的插件。 至于jqgrid，我发现了一个具有基本function的良好引导网格，我只是添加了我需要的东西。 我还在使用jquery和bootstrap，但现在移动速度很快！ 我不打算创建一个单独的移动网站，但我只关注每个页面/function的移动设备。 总的来说，我一直在利用引导程序和媒体查询的强大function，让每个页面在移动和桌面上都有一个很好的感觉。 到现在为止还挺好！
首先需要了解的是，99.9％的可用移动框架速度很慢。 这是因为：
- 智能手机仍然会变慢，如果你看看任何桌面/移动JavaScript基准测试，你会发现桌面浏览器总是会超过移动浏览器。
- 移动框架通常很慢
有了这个说我们可以走得更远，让我告诉你一些好的jQuery Mobile app架构的秘密。
良好的jQuery Mobile架构的第一个秘诀就是了解jQuery Mobile的实际工作方式。 有两种方法可以创建jQuery Mobile页面骨架。 像往常一样，事实就在中间。 这两个模板都有好的和坏的方面，我们可以围绕它们玩，特别是如果我们知道它们的不良方面以及它们如何影响整体应用程序function。
多页模板
第一个和经典的是一个多页面模板，其中一个HTML包含所有可用页面。 这也是新jQuery Mobile开发人员展示的第一个模板。 它也是最容易实现的两种模板。
Page Title Page Title
Page content goes here.
Page Footer
Page Title
Page content goes here.
Page Footer
如您所见，一个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模板。 与多页面模板不同，此模板使用多个HTML页面作为应用程序框架。 此解决方案应该让经验丰富的Web开发人员更加接近，并且可以轻松地与服务器端页面生成一起使用。
与多页模板相比，此解决方案具有很大的优势。 只有初始HTML被加载到DOM中，这使得它成为一种内存友好的方法。 页面只有在直接访问（或通过兑现系统加载）时才会加载到DOM中，并在页面不再处于活动状态时立即卸载。 从实际角度来看，这是非常好的，页面很容易访问，更不用说更短。
这可能看起来像是移动Web应用程序的最佳解决方案，但存在一个大问题。 页面转换可能会出现问题，因为在转换发生之前，需要先加载每个HTML文件。 这在使用移动设备时更为突出，特别是在使用Android 2.X平台时。 第二个问题来自页面卸载。 由于页面在每次使用时都会加载/卸载，因此pageinit事件将在每次页面处于活动状态时触发。
最佳应用创建方法
这部分将仅讨论纯粹的vanilla jQuery Mobile方法。
在创建应用程序之前，请考虑它，您希望它能够起作用以及页面流程是什么。 要创建最佳行为应用程序，我们需要组合这两个模板。
- 经常使用的页面必须是第一个HTML文件的一部分，这将防止大多数转换问题
- 其他所有内容都应该移到其他HTML页面
- 辅助HTML页面（每个未首先初始化的页面）只能有1页，其他所有内容都将被丢弃
- 辅助HTML页面javascript和CSS必须在同一页面BODY内或第一个HTML内初始化，解释可以在这里找到
- 经常使用的页面，例如用于显示各种内容的页面（如新闻文章）也可以动态创建。
- 页面不应该很复杂，如果可能的话将您的内容分成几页。 如果这是不可能的，不要过度使用jQuery Mobile小部件，它们是应用程序性能降低的主要原因。
- 每页最多不要使用20-30个listview元素。 如果这不可能，那么使用某种分页系统并始终删除以前的元素。
- 如果您不需要页面过渡，请不要使用它们
- 使用委托事件绑定并始终阻止多个事件绑定。 解决方案可以在这里找到。
- 不要在较旧的Android和iOS平台上使用CSS3function。 CSS3文本阴影是Android 2.X平台上的性能杀手，更不用说过渡效果了。
- 除非您确切知道自己在做什么，否则永远不要使用与桌面/移动相同的网站（这可能是您可能犯的最大错误）
- 如果您仍然坚持使用相同的桌面/移动网站，请确保使用适当的点击事件。 经典点击事件在桌面上可以正常工作，并且在移动设备上会略有延迟。 为了对抗你应该使用vclick或touchstart事件。