如何优化"解析HTML"事件？

Question

在分析我的webapp时,我注意到我的服务器正在快速点亮,Chrome似乎是瓶颈.我启动了Chrome的"时间线"开发人员工具并获得了以下数字:

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

我还console.log(performance.now())从主Javascript文件中运行了一些,加载时间实际上接近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()).这让我发现在我调用一行代码之前,该页面需要1400毫秒才能加载Javascript文件!

这没有多大意义,所以重新访问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,这将有所帮助.