有没有一种方法可以在 Chrome 中以编程方式确定阻止页面呈现的 Assets (CSS、JS 等)。作为其中的一部分,我正在寻找浏览器端的测量值。开始渲染:- 是否有任何 API 可以给我这个指标,即浏览器实际开始渲染过程的时间和所有阻塞的 Assets (CSS/JS),即阻止 Assets 下载的渲染过程首先。
最佳答案
是的,在开发工具中,您可以打开“网络”选项卡,它会向您显示各种统计信息,包括向您显示页面呈现的时间点,以及稍后触发 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
关于javascript - 如何查找在 Chrome 中阻塞的资源(CSS、JS 等),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34179483/