如何分析/缩短html页面渲染时间？

Question

我正在使用chrome来改善页面加载时间。

我正在尝试确定内容下载完成和onload事件触发之间的延迟原因。您可以从图像中看到内容在大约160毫秒内完成下载，但加载事件直到大约600毫秒才会启动。

我的问题是，我如何识别和分解需要450毫秒的事情？是否有可能在这里改善加载时间，或者这只是渲染/绘制过程中不可避免的一部分？

更新＃1

解决了问题，罪魁祸首主要是jQuery;页面现在加载在300毫秒部分。我决定推迟加载jQuery（以及所有其他站点脚本，直到window.onload事件被触发。这关闭了差距，现在所有页面脚本在onload发生后加载。

以下是显示脚本加载的时间轴视图：

Answer 1

Chrome开发工具您拥有时间轴标签，按记录，刷新页面并停止录制，您将获得所需的一切。

另外请务必选中您感兴趣的复选框。文档here

我测试了其他一些页面，它们与你的页面有相似的差距，我认为这是绘画和渲染时间。

如果你真的非常关心那些450毫秒，我建议你阅读this article关于Chrome渲染DOM的方式，它是非常好的。

我个人认为，如果您不打算渲染数千或数万个元素，或者尝试优化其他部分，最好是JavaScript，这听起来像是过早优化。

我仍然建议阅读它非常好的文章。