0

通常建议优化以将您的 javascript 合并为更少的部分并减少 http 请求的数量。在较小的站点上，您可以轻松地达到以下结构：

/js/jQuery-xx.js
/js/plugins.js
/js/app.js

即使在一个普通的站点（只有一些 jQuery 润色）中app.js也会变得相当繁重。对于组织来说，很容易将实现分解为逻辑位：

..
/js/app-global.js
/js/app-contact.js
/js/app-products.js
/js/app-splash.js

现在作为单独的文件，在特定的上下文中要求它们是微不足道的，尽管它们的单独大小非常小，大约 1-3 kb 一块，所以在我看来，将它们重新组合成一个文件是非常聪明的担任app.js。

但我app.js突然想到，在文件中包含大约 20 个左右的 jQuery 选择器和其他大多数页面上未使用的 javascript。当这些 jQuery 选择器以大多数上下文中不存在的元素为目标时，它们触发这些 jQuery 选择器似乎浪费了 CPU 周期。

哪个是更紧迫的优化： • 减少 http 请求？• 减少未使用的jQuery 选择器？

我正在使用 Chrome 的审核工具进行分析，它建议减少对 javascript 文件的网络请求。任何测量膨胀的指南jQuery.ready(…);？

更新

权衡所提供的证据，最简单的做法是将实现代码作为单个文件提供，然后使用路由系统激活不同的模块。就我而言，我只是连接到我已经构建的简单 php 路由器：

根.php

<script type="text/javascript">
var myApp = {
    modules: {}
    bootstrap: function()
    {
    <?php
    if ( $pageId == 'contact' )
      echo 'myApp.modules.contact();';

    if ( $pageId == 'index' )
      echo 'myApp.modules.splash();';

    if ( preg_match( '~^help/~iu', $pageid ) )
      echo 'myApp.modules.faq();';
   ?>
   }      
}
</script>
<script type="text/javascript" src="/js/jquery1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-plugins.js"></script>
<script type="text/javascript" src="/js/myApp.js"></script>

myApp.js

$(document).ready(function()
{
   myApp.bootstrap();
   //… global jQuery stuff …
});

// Define modules

myApp.modules.splash = function() {
  $('#splash').click(
     //…etc…
  );
}

myApp.modules.faq = function() {
  $('.faq').show( 
     //…etc…
  );
}

myApp.modules.contact = function() {
  $('.contact').bind(
     //…etc…
  );
}
4

2 回答 2

3

始终建议在尽可能少的文件中提供静态内容。如果您担心在不存在的内容上执行，那么您应该以这样的方式组织您的代码，它不会在页面加载时全部自动触发，而是在您告诉它时触发。这样，您只需在任何给定页面上执行您想要的代码。最简单的方法是将每个页面内容包装在它自己的函数中：

window.aboutPage = function() {
    $('').css(); //some stuff
}

然后在关于页面的底部，在您加载所有外部脚本后触发相应的功能

<script>$(window.aboutPage) //fire aobutPage stuff on ready</script>

有些框架也可以完成代码的这种模块化

于 2013-06-12T23:11:16.820 回答
1

如果您正在使用模块（我猜是 RequireJS？），您可以通过实现一个简单的“路由器”来避免将一堆函数放在全局/窗口对象上。让您的主应用程序模块定义“路由”的哈希值，例如：

var routes = {
    '/contact': contact,
    '/products': products,
    '/splash': splash
};

其中 , 和 , 中的每一个contact都是products您splash要在“准备好 DOM 时”调用的函数。然后在同一个应用程序模块的其他地方将适当的函数作为 jQuery 的就绪处理程序传递，例如：

$(routes[window.location.pathname])

注意：

  1. 您可能需要做一些花哨的事情来确保您只使用您真正想要的 URL/路径的一部分。
  2. 您可以删除 jQuery 依赖项（如果需要）并使用 RequireJS 的domReady. 他们显然工作差不多。
于 2013-06-13T01:27:55.067 回答