性能瀑布图请求间长间隙排查：定位对应JS/CSS资源

• 盯紧瀑布图的前后关联
  先看GTmetrix瀑布图里，间隙出现前最后加载完成的资源——这个资源大概率就是阻塞后续请求的源头。浏览器加载完这类资源后，会优先执行JS或者处理CSS渲染阻塞，这段时间里不会发起新请求，就形成了空白间隙。

• 用浏览器性能面板抓细节
  打开Chrome或Firefox的开发者工具，切到「性能」面板，勾选「网络」和「渲染」选项，录制一次完整的页面加载。结束后在时间轴里找到那段空白间隙，查看对应的主线程任务：

  • 如果是JS导致的，能看到长耗时的「脚本执行」任务，点展开就能看到具体是哪个JS文件，甚至能定位到耗时的代码行；
  • 如果是CSS导致的，会看到「样式计算」的长耗时任务，直接关联到对应的CSS文件。

• 排查阻塞标记的资源
  回到GTmetrix的瀑布图页面，找带「阻塞」标签的JS/CSS，尤其是在间隙前加载的那些，重点排查。另外别漏了内联JS/CSS，页面里的内联初始化代码有时候执行太久，也会造成间隙，这时候得去性能面板里找对应的内联脚本任务。

• 逐个禁用资源验证
  用开发者工具的「网络」面板，右键选「阻止请求」，逐个禁用间隙前的JS/CSS资源，然后重新加载页面。如果禁用某个资源后间隙消失了，那这个资源就是问题所在。

内容的提问来源于stack exchange，提问作者alancc