Question

我正在开发一个网站，用于整个网站使用一个主要布局，其中包括许多（超过40个）js文件。这个网站渲染速度很慢。浏览器要解析多少开销，以及（缺乏更好的技术术语）“处理”所有这些包括？我知道它们是缓存的，因此不会在每个页面视图上下载它们。但是，每次刷新时，每个包含是否都会被解析并重新执行？

无论如何，我想在处理所有这些包含时会有一些开销，但我不确定它是大还是小。

Answer 1

理解的最佳方式是衡量。尝试将这些40个js文件合并为一个文件，看看它是否有很大的不同。压缩它们也可以降低带宽成本。

存在多个包含的开销，但正如您所说，这些页面被缓存，开销应仅在第一次请求时。我认为，如果我们忽略这个初始开销，那么与操作DOM等脚本所花费的时间相比，性能差异将不会很大......

Answer 2

这取决于他们做什么 - 测试你可以在它们全部加载之前完成这个：

<script>
  var test_start_time = (new Date()).getTime();
  </script>

以及之后：

<script>
    alert("took: " + (((new Date()).getTime()-test_start_time)/1000) + " seconds");
  </script>

Answer 3

绝对比较和对比 - 这将是最可靠的判断。

尽管如此，我尽量只在head部分加载一个或两个JS文件，然后我使用jquery来测试某些元素，这些元素在加载DOM后可能需要额外的脚本或css。例如，我使用源高亮js库来设置预标签的样式：

if($('pre').length > 0) {
  $.getScript(svx_cdns+'pkgs/shjs-0.6/sh_main.min.js', function() {
    $('<link>', {
      'rel':  'stylesheet',
      'type': 'text/css',
      'href': svx_cdns+'pkgs/shjs-0.6/css/sh_vim.min.css'
    }).appendTo('head');
    sh_highlightDocument('/s/pkgs/shjs-0.6/lang/', '.min.js');
  });
}

这样页面加载非常快，然后“调整”。

Answer 4

您可以尝试将所有.js文件放入一个文件中，然后压缩它。

这会将浏览器发出的请求数量减少39个：）。

希望这会有所帮助。

Answer 5

影响可能很重要。考虑到脚本下载阻止页面呈现你可以尝试几件事：

尽可能多地合并脚本，以便下载较少的文件
最小化并压缩组合的js文件
尝试在页面底部放置尽可能多的引用，这样它们就不会阻止渲染（这不容易，必须小心，你可能最终允许在必要的javascript之前与某些控件进行交互已下载）。
为js文件实现并行下载（默认情况下，它们是按顺序下载的）。 Here你有一些关于这个的例子

Answer 6

即使文件被缓存，仍然有请求检查文件是否已被修改。您可以更改缓存策略并将文件设置为永不过期。这样浏览器甚至不会询问它是否被修改过。这意味着您需要为所有网址添加缓存破解程序。看看firebug的网络标签是肯定的。我得到一个304没有修改我的所有css / js / imgs。

每次都要对文件进行解析，但这可能不是瓶颈。

尝试将所有js复制到一个文件中。我们的一个屏幕包括超过100个js文件。我们创建了一个统一的最小化文件，我们的屏幕加载时间从10秒变为不到3秒。

许多js的浏览器性能影响包括

6 个答案: