如何优化“解析 HTML”事件？

Question

在分析我的 web 应用程序时，我注意到我的服务器正在快速点亮，Chrome 似乎是瓶颈。我启动了 Chrome 的“时间线”开发者工具，得到了以下数字：

Total time: 523ms
Scripting: 369ms (70%)

我还从主 Javascript 文件中运行了几个 console.log(performance.now())，加载时间实际上接近 700 毫秒。这对于我正在呈现的内容（一个空表和 2 个按钮）来说非常令人震惊。

我继续深入研究“脚本”：

Evaluating jQuery-min.js: 33ms
Evaluating jQuery-UI-min.js: 50ms
Evaluating raphael-min.js: 29ms
Evaluating content.js: 41ms
Evaluating jQuery.js: 12ms
Evaluating content.js: 19ms
GC Event: 63 ms

（我没有列出较小的脚本，但它们占了剩余时间）我不知道该怎么做。

1. 这些数字正常吗？
2. 我该去哪里？还有其他我应该运行的工具吗？
3. 如何优化 Parse HTML 事件？

Answer 1

对于这个问题收到的所有愤世嫉俗，我很高兴发现他们都错了。

我发现 Chrome 的分析器输出难以解释，所以我求助于 console.log(performance.now())。这让我发现页面加载 Javascript 文件需要 1400 毫秒，甚至在我调用一行代码之前！

这没有多大意义，因此重新访问了 Chrome 的 Javascript 分析器工具。默认排序顺序Heavy (Bottom Up) 没有显示任何有意义的信息，所以我切换到Chart 模式。这表明正在加载许多浏览器插件，并且它们的运行时间比我预期的要长得多。所以我禁用了所有插件并重新加载了页面。你猜怎么了？加载时间降至 147 毫秒。

没错：浏览器插件占了加载时间的 90%！

所以总结一下：

• JQuery 比本机 API 慢得多，但这在总体方案中可能无关紧要。这就是为什么优秀的程序员使用分析器来发现瓶颈，而不是盲目地优化。不要相信人们的主观偏见或“直觉”。如果我按照人们的建议优化 JQuery，它不会产生明显的差异（我会节省 100 毫秒）。
• timeline 工具未报告正确的总时间。跳过漂亮的图表并使用以下工具...
• 从简单开始。使用console.log(performance.now()) 验证基本假设。
• Chrome 的 Javascript 分析器
  • Chart 将为您提供 Javascript 执行的时间顺序概览。
  • Tree (Top Down) 将允许您一次深入研究方法。
• 关闭所有浏览器插件，重新启动浏览器，然后重试。您会惊讶于某些插件贡献了多少开销！

我希望这对其他人有所帮助。

PS：http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/ 上有一篇不错的文章，如果您想用原生 API 替换 jQuery，它会有所帮助。

Answer 2

我认为每次修改元素的内部 HTML 时都会发生 Parse HTML 事件，例如

$("#someiD").html(text);

一种常见的样式是重复追加元素：

$.each(something, function() {
    $("#someTable").append("<tr>...</tr>");
});

这将为添加的每一行解析 HTML。您可以通过以下方式对其进行优化：

var tablebody = '';
$.each(something, function() {
    tablebody += "<tr>...</tr>";
});
$("#someTable").html(tablebody);

现在它一次解析整个事物，而不是重复解析它。