网络检查器下资源加载之间的空白时间答案

【问题标题】：Blank time between resource loading under network inspector网络检查器下资源加载之间的空白时间
【发布时间】：2016-02-04 17:33:24
【问题描述】：

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

有没有其他人看到这个或者知道我可以做些什么来减少那个时间（谈论像 html 和第一个 css 文件之间的空白）？

【问题讨论】：

【解决方案1】：

很可能是由您安装的扩展程序引起的。 AdBlock、LastPass 和 Google 快速滚动在我的机器上总共花费了大约 200 毫秒。

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我的问题更多是针对第一次 html 提取和 css 提取之间的时间。似乎有 100 毫秒左右它什么都不做（或者这只是 Chrome 解析和渲染所需的时间）。
哦，明白了... 是的，因为 index.css 的启动器是 Parser，由于主要资源解析，您会看到相当多的延迟。会不会是您在 index.css 的 <link> 之前有一个或多个内联 <script>s？
index.css 是 head 中标题之后加载的第一件事。所有的js文件都遵循这个。
嗯。那么你真的应该按照 loislo 的建议记录一个时间线，以确定罪魁祸首。

【解决方案3】：

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

要记录时间线：

要找出罪魁祸首：

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

就我而言，我安装了 20 个扩展，但只有两个导致延迟：LastPass 和 Fauxbar。我选择让它们保持启用状态，因为对我来说，这些扩展的生产力优势超过了增加的延迟带来的不利影响。

【讨论】：