网络检查员下资源加载之间的空白时间

Question

我一直在开发一个新的网站并练习我的JS / jQuery / AJaxy技能。昨晚我想看看页面渲染的时间长度，看看是否有任何可以清理的区域来提高速度。虽然页面每次加载大约200 - 300毫秒，但我看到网络检查员下的资源加载之间存在大量空白。

http://i.imgur.com/7ng6m.jpg

有没有其他人看过这个或知道我能做些什么来缩短那个时间（谈论像html和第一个css文件之间的空白区域）？

Answer 1

很可能是由您安装的扩展程序引起的。 AdBlock，LastPass和谷歌快速滚动在我的机器上共耗时约200毫秒。

不幸的是，这些扩展会在每个站点上调用，并阻止加载其他资源。

使用开箱即用的浏览器设置尝试，加载时间将大大增加。

Answer 2

在页面加载后（load和DOMContentLoaded事件已被触发），您已经加载了大量图片 - 时间轴上的蓝色和红色垂直线）。我可以看到图像是由JQuery库（ Initiator 列）加载的，也许是为了构建一个库或其他东西。

因此，情况是JQuery在页面加载后加载图像，可能在onload处理程序中（在代码中看起来像$(document).ready(handler)，但其他选项也是可能的）。

Answer 3

初始页面加载和请求第一个资源之间的延迟几乎肯定是由Chrome扩展引起的。要找到罪魁祸首：在Chrome开发者工具的时间线标签中记录时间线;确定在Parse HTML阶段运行的脚本;找出他们来自哪些扩展程序。

录制时间轴：

1. 打开时间线标签，然后点击记录。
2. 重新加载页面，然后停止录制。 （几秒钟就足够了。）

找到罪魁祸首：

1. 在时间轴上找到第一个主 Parse HTML 块。在下面的行中，您可能会看到一个或多个评估脚本块。这些是罪魁祸首。
2. 单击其中一个评估脚本块，然后在底部窗格中找到脚本名称。将鼠标悬停在脚本名称上。工具提示将包含脚本的URL，其格式应为chrome-extension://{long_identifier}/{path}
3. 记住标识符的前几个字母，并在chrome://extensions/页面中搜索它。这会告诉您导致问题的扩展名。尝试禁用它 - 你应该看到差异。
4. 重复其他评估脚本块。

在我的情况下，我安装了20个扩展，但只有两个导致延迟：LastPass和Fauxbar。我已选择启用它们，因为对我而言，这些扩展的生产力优势超过了延迟增加的负面影响。