如何找到阻塞在 Chrome 中的资源（CSS，JS 等）

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.

Answer 2

WebPageTest 是一款免费工具，可让您分析给定页面的网络和浏览器 activity。使用这个工具，您可以通过几个简单的步骤回答这个问题。

我运行针对whosebug.com进行了测试以供演示。以下是结果：http://www.webpagetest.org/result/151220_VX_ace62f5c0dc195c1b597436a34a9d1e5/1/details/#tableDetails

前 14 个请求以绿色突出显示，表示它们都发生在页面的第一次绘制（也称为开始渲染）之前。

由于您要求以编程方式获取此信息，因此您可以使用 WebPageTest API (or the node.js API wrapper) 提交测试并分析结果。

使用 API 会是这样的：

Get an API key. This is required to use the API of the public instance. You could also spin up your own private instance，不需要密钥，如果需要，您可以针对内部开发 Web 服务器进行测试。
针对您的网页提交测试。
完成投票结果。
保存中位数测试运行。这将使接下来的几行代码更易于阅读。
```
var test = result.data.median.firstView;
```
获取第一次绘制时间。对于加载时间中位数的测试，您可以在 test.firstPaint 访问该指标。示例中的结果是 1517 毫秒。
```
var firstPaintTime = test.firstPaint;
```

遍历请求并保存在第一次绘制时间之前开始的每个请求。

var blockingRequests = test.requests.filter(function(request) {
  return request.load_start < firstPaintTime;
});

将请求列表映射到 URL 列表。

var blockingURLs = blockingRequests.map(function(request) {
  return request.full_url;
});

瞧，你最终得到了一个阻止呈现的 URL 列表：

["http://whosebug.com/", "http://cdn.sstatic.net/Whosebug/all.css?v=019092e20b09", "http://i.stack.imgur.com/tKsDb.png", "http://cdn.sstatic.net/Js/stub.en.js?v=2ad47c1cbf74", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "http://i.stack.imgur.com/uE37r.png", "http://i.stack.imgur.com/BfCOt.png", "http://i.stack.imgur.com/sCwbu.png", "http://i.stack.imgur.com/atMwl.png", "http://cdn.sstatic.net/img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic.net/Whosebug/img/sprites.svg?v=a7723f5f7e59", "http://cdn.sstatic.net/Img/share-sprite-new.svg?v=698e8b939ec0", "http://cdn.sstatic.net/img/favicons-sprite16.png?v=5f1c9ad029b2ea2d9d06ae792ba589ab", "http://cdn.sstatic.net/Js/full-anon.en.js?v=5552791d9794"]

如果您想了解更多有关如何使用 WebPageTest 执行此类操作的信息，请查看我的书 Using WebPageTest。

如何找到阻塞在 Chrome 中的资源（CSS，JS 等）

How to find resources(CSS , JS Etc) that are blocking in Chrome

javascript

css

google-chrome

google-chrome-devtools

web-performance