如何查找Chrome中阻止的资源（CSS，JS Etc）

Question

有没有办法以编程方式在Chrome中确定阻止页面呈现的资源（CSS，JS等）。作为其中的一部分，我正在寻找浏览器方面的测量。开始渲染： - 是否有任何API可以给我这个指标，即浏览器实际启动渲染过程的时间和阻止渲染的所有资产（CSS / JS），即阻止资产下载的渲染过程第一

Answer 1

是的，在开发工具中，您可以打开“网络”选项卡，该选项卡会显示各种统计信息，包括向您显示页面呈现的位置以及稍后在load事件触发时。

例如，如果我使用已清除的缓存加载Stack Overflow，那么这是一个屏幕截图：

注意末尾附近的垂直线条。蓝色的是加载内容的点;红色的是load事件发生的点。查看与这些行对接的资源会告诉您阻塞的内容。

但该工具可以做更多的事情。 This article更详细地介绍了该过程。

要进行程序化访问，请查看window.performance及其getEntries方法，例如：

window.performance.getEntries()

这是一个示例，我将其输入控制台并展开第一个条目：

第一个条目为文本：

connectEnd: 318.01
connectStart: 318.01
domainLookupEnd: 318.01
domainLookupStart: 318.01
duration: 24.845000000000027
entryType: "resource"
fetchStart: 318.01
initiatorType: "script"
name: "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
redirectEnd: 0
redirectStart: 0
requestStart: 322.99
responseEnd: 342.855
responseStart: 323.89500000000004
secureConnectionStart: 0
startTime: 318.01
workerStart: 0

That API is described here