javascript - 如何查找在 Chrome 中阻塞的资源(CSS、JS 等)

标签 javascript css google-chrome google-chrome-devtools web-performance

有没有一种方法可以在 Chrome 中以编程方式确定阻止页面呈现的 Assets (CSS、JS 等)。作为其中的一部分,我正在寻找浏览器端的测量值。开始渲染:- 是否有任何 API 可以给我这个指标,即浏览器实际开始渲染过程的时间和所有阻塞的 Assets (CSS/JS),即阻止 Assets 下载的渲染过程首先。

最佳答案

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

例如,如果我在清除缓存的情况下加载 Stack Overflow,这是一个屏幕截图:

enter image description here

注意靠近末尾的垂直线。蓝色的是内容加载的点;红色的点 load 事件触发。查看与这些线路相抵触的资源,您就会知道是什么阻碍了。

但该工具的功能远不止于此。 This article更详细地介绍了该过程。

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

window.performance.getEntries()

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

enter image description here

作为文本的第一个条目:

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 .

关于javascript - 如何查找在 Chrome 中阻塞的资源(CSS、JS 等),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34179483/

相关文章:

javascript - 在 React.js 中导出/导入组件

javascript - AngularJS - Controller 代码是逐行执行的吗?

javascript - 未捕获的类型错误 : undefined is not a function

html - 在 Bootstrap 2.3.2 中使用 Affix

javascript - 如果没有剩余内容,则停止滚动

javascript - try catch 不适用于 sse

google-chrome - Charles 代理不适用于 Chrome

javascript - Moment js utc() 时间在伦敦 - BST

javascript - 在 backbone.js 中,模型知道它的 View 是错误的吗?

javascript - 为报价创建幻灯片