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

【问题标题】：Browser performance impact of lots of js includes许多 js 对浏览器性能的影响包括
【发布时间】：2010-08-31 01:37:46
【问题描述】：

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

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

【问题讨论】：

当您说“渲染速度真的很慢”时，您是指在第一次点击时还是在每次页面加载时？

标签： javascript browser

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

之后：

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

【讨论】：

【解决方案3】：

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

尽管如此，我尽我所能只在 head 部分加载一两个 JS 文件，然后我使用 jquery 来测试某些元素，一旦加载了 DOM，这些元素可能需要额外的脚本或 css。比如我使用source highlight js库来风格化pre标签：

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');
  });
}

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

【讨论】：

【解决方案4】：

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

这也会将浏览器发出的请求数量减少 39 :)。

希望这会有所帮助。

【讨论】：

【解决方案5】：

影响可能很重要。考虑到脚本下载会阻止页面渲染您可以尝试以下几件事：

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

【讨论】：

【解决方案6】：

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

每次都必须解析文件，但这可能不是瓶颈。

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

【讨论】：