Javascript/Jquery在桌面浏览器中运行得很快，但在移动/智能手机浏览器中运行得很慢……我应该拆分我的站点并使用Jquery mobile吗？_Javascript_Jquery_Jquery Mobile_Mobile

Javascript/Jquery在桌面浏览器中运行得很快，但在移动/智能手机浏览器中运行得很慢……我应该拆分我的站点并使用Jquery mobile吗？

javascript jquery jquery-mobile mobile

Javascript/Jquery在桌面浏览器中运行得很快，但在移动/智能手机浏览器中运行得很慢……我应该拆分我的站点并使用Jquery mobile吗？,javascript,jquery,jquery-mobile,mobile,Javascript,Jquery,Jquery Mobile,Mobile,我想让我的网站移动友好。我理解响应性设计如何使用CSS来帮助实现这一点，但我发现还有另一个问题JQuery、引导、JQuery UI、和jqGrid正在我的网站中使用，它们在桌面上运行良好，但是从移动设备查看网站时速度非常慢（即使是快速移动设备），使网站便于移动的首选方法是将其保留在一个URL上，并使用媒体查询（响应式设计）。然而，这并不能解决我的javascript内容问题。我是否需要创建一个单独的URL（前面有一个“m”，如m.website.com），然后使用jQuery Mobile之

我想让我的网站移动友好。我理解响应性设计如何使用CSS来帮助实现这一点，但我发现还有另一个问题JQuery、引导、JQuery UI、和jqGrid正在我的网站中使用，它们在桌面上运行良好，但是从移动设备查看网站时速度非常慢（即使是快速移动设备）

，使网站便于移动的首选方法是将其保留在一个URL上，并使用媒体查询（响应式设计）。然而，这并不能解决我的javascript内容问题。我是否需要创建一个单独的URL（前面有一个“m”，如m.website.com），然后使用jQuery Mobile之类的工具在我的网站上构建每个页面的另一个版本？到目前为止，我的测试表明jQuery Mobile似乎在我的智能手机上运行得足够快

我考虑的另一个选择是将站点重建到jQuery Mobile中构建所有页面的位置，但我认为这不是正确的解决方案（）

那么，在为移动浏览器提供服务时，拆分我的站点并使用jQuery Mobile是解决javascript速度问题的正确方法吗

更新：

我的解决方案是删除jQueryUI和jqgrid。这些是经济放缓的罪魁祸首。我不使用jquery UI，而是使用单个jquery插件，或者根据需要编写自己的插件。至于jqgrid，我找到了一个很好的具有基本特性的引导网格，我只需要添加我需要的东西。我仍然在使用jquery和bootstrap，但现在移动设备上的速度很快！我并没有创建一个单独的移动站点，但我只是将每个页面/功能的移动功能牢记在心。总的来说，我一直在利用引导和媒体查询的强大功能，让每个页面在移动和桌面上都有一个美好的感觉。到目前为止还不错

您需要了解的第一件事是，99.9%的可用移动框架速度较慢。这是由于：

智能手机仍然很慢，如果你看看任何桌面/移动JavaScript基准，你会发现桌面浏览器总是远远超过移动浏览器
移动框架通常速度较慢

说到这里，我们可以更进一步，让我告诉你一些关于jQuery移动应用程序架构的秘密

一个好的jquerymobile架构的第一个秘密是了解jquerymobile实际上是如何工作的。有两种可能的方法可以创建jQuery移动页面框架。像往常一样，真相就在中间。这两个模板都有好的一面和坏的一面，我们可以绕过它们，特别是如果我们知道它们的坏的一面以及它们如何影响整个应用程序功能的话

多页模板第一个也是经典的一个是多页面模板，其中一个HTML保存所有可用页面。这也是向新的jQuery移动开发人员展示的第一个模板。在两个可用的模板中，它也是一个最容易实现的模板

<!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页面的模板解决方案（我们将很快讨论）。由于jquerymobile使用ajax进行页面加载延迟，因此应该预料到可能导致页面转换问题的延迟。由于所有内容都已加载到DOM多页模板中，因此不会出现此类问题

另一方面，这种解决方案也存在一个严重的问题。移动web应用程序可以占据DOM的相当大的一部分，虽然这对桌面浏览器来说不是问题，但它可能会在移动设备及其附带的浏览器上造成问题。另外，不要忘记，我们正在谈论的是为移动web应用程序开发的框架

一些页面可能感觉不到那么多，但想想如果web应用程序具有复杂的页面结构会发生什么（我已经看到jQuery移动页面包含数百个表单元素）。您所看到的页面HTML不是最终的HTML。当jquerymobile加载页面时，它使用自己的CSS增强页面

最终的HTML结构可以比初始HTML大2-8倍，并且所有事情都是动态完成的。这就引出了第二个问题。更多的内容意味着使用/需要更多的处理能力来增强页面内容，而jquerymobile是一个巨大的饥饿野兽

多HTML模板第二个模板解决方案也称为多HTML模板。与多页模板不同，此模板使用多个HTML页面作为应用程序框架。此解决方案应该更接近有经验的web开发人员，并且可以轻松地用于服务器端页面生成

与多页模板相比，此解决方案具有很大的优势。DOM中只加载初始HTML，这使它成为一种内存友好的方法。只有在直接访问（或通过现金系统加载）时，页面才会加载到DOM中，一旦页面不再处于活动状态，页面就会被卸载。从实用的角度来看，这非常好，页面很容易访问，更不用说更短了

这看起来是移动web应用程序的最佳解决方案，但有一个大问题。页面转换可能会出现问题，因为在进行转换之前，需要先加载每个HTML文件。在使用移动设备时，尤其是在使用Android2.X平台时，这一点更为突出。第二个问题来自页面卸载。因为每个t都会加载/卸载页面