Total time: 523ms Scripting: 369ms (70%)
我还从主要的Javascript文件中运行了几个console.log(performance.now()),加载时间实际上更接近于700ms.这是非常令人震惊的我正在渲染(一个空的表和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
(我没有列出较小的脚本,但他们占用剩余时间)我不知道该做什么.
>这些数字是否正常？
>我从哪里去？还有其他工具我应该运行吗？
>如何优化解析HTML事件？
解决方法
我发现Chrome的profiler输出难以解释,所以我转向console.log(performance.now()).这导致我发现该页面正在花费1400毫秒来加载Javascript文件,之后我甚至调用一行代码！
这没有什么意义,所以重新浏览了Chrome的JavaScript分析工具.默认的排序顺序Heavy(Bottom Up)没有显示任何有意义的内容,所以我切换到Chart模式.这表明许多浏览器插件正在加载,而且运行时间要比我预期的要长.所以我禁用了所有的插件并重新加载了页面.你猜怎么了？加载时间下降到147ms.
这是正确的：浏览器插件负责90％的加载时间！
所以总结：
> JQuery比本机API慢得多,但这可能与宏伟的方案无关.这就是为什么好的程序员使用剖析器找到瓶颈,而不是盲目地优化.不信任人的主观偏见或“直觉”.如果我遵循人们的建议来优化JQuery,那么它不会有明显的区别(我将保存100ms).
>时间线工具不报告正确的总时间.跳过漂亮的图形并使用以下工具…
>开始简单使用console.log(performance.now())来验证基本假设.
> Chrome的JavaScript分析器
>图表将给你一个按时间顺序的Javascript执行概述.
>树(自上而下)将允许您一次钻取方法,一个级别.
关闭所有浏览器插件,重新启动浏览器,然后重试.你会惊讶于一些插件有多少开销！
我希望这有助于别人.
PS：在http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/有一篇很好的文章,如果你想用本机API替换jQuery,这有帮助.
