4

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

4

2 回答 2

3

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

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

在此处输入图像描述

注意末端附近的垂直线。蓝色是加载内容的点；load事件触发的点是红色的。查看与这些线路对接的资源会告诉您什么是阻塞的。

但该工具可以做的还不止这些。本文更详细地介绍了该过程。

对于编程访问，请查看window.performance及其getEntries方法，例如：

window.performance.getEntries()

这是我在控制台中输入并展开第一个条目的示例：

在此处输入图像描述

作为文本的第一个条目：

连接结束：318.01
连接开始：318.01
domainLookupEnd: 318.01
domainLookupStart: 318.01
持续时间：24.845000000000027
entryType：“资源”
获取开始：318.01
发起者类型：“脚本”
名称：“http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”
重定向结束：0
重定向开始：0
请求开始：322.99
响应结束：342.855
响应开始：323.89500000000004
安全连接开始：0
开始时间：318.01
工人开始：0

此处描述了该 API。

于 2015-12-09T13:05:53.077 回答
2

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

我对 stackoverflow.com 进行了测试以进行演示。以下是结果：http ://www.webpagetest.org/result/151220_VX_ace62f5c0dc195c1b597436a34a9d1e5/1/details/#tableDetailsWebPageTest 请求详情截图

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

由于您要求以编程方式获取此信息，因此您可以使用WebPageTest API（或node.js API 包装器）提交测试并分析结果。

使用 API 会是这样的：

  1. 获取 API 密钥。这是使用公共实例的 API 所必需的。您还可以启动您自己的私有实例，它不需要密钥，如果您愿意，您可以针对内部开发 Web 服务器进行测试。
  2. 针对您的网页提交测试。
  3. 轮询结果是否完整。

  4. 保存中值测试运行。这将使接下来的几行代码更容易阅读。

    var test = result.data.median.firstView;

  5. 获取第一次绘制时间。对于具有中值加载时间的测试，您可以在 访问此指标test.firstPaint。示例案例中的结果是 1517 毫秒。

    var firstPaintTime = test.firstPaint;

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

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

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

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

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

["http://stackoverflow.com/", "http://cdn.sstatic.net/stackoverflow/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/stackoverflow/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。

于 2015-12-20T18:06:43.717 回答