161   HTML HTTP JS

web 页面性能表现可以通过 window.performance.timing 来跟踪每个步骤的耗时,具体步骤包括

1. navigationStart:开始导航到当前页面的时间。
2. unloadEventStart:前一个页面的unload 事件开始的时间。但只有在前一个页面与当前页面来自同一个域时这个属性才会有值;否则,值为0。
3. unloadEventEnd:前一个页面的unload 事件结束的时间。但只有在前一个页面与当前页面来自同一个域时这个属性才会有值;否则,值为0。
4. redirectStart:到当前页面的重定向开始的时间。但只有在重定向的页面来自同一个域时这个属性才会有值;否则,值为0。
5. redirectEnd:到当前页面的重定向结束的时间。但只有在重定向的页面来自同一个域时这个属性才会有值;否则,值为0。
6. fetchStart:开始通过HTTP GET 取得页面的时间。
7. domainLookupStart:开始查询当前页面DNS 的时间。8. domainLookupEnd:查询当前页面DNS 结束的时间。
9. connectStart:浏览器尝试连接服务器的时间。
10. connectEnd:浏览器成功连接到服务器的时间。
11. secureConnectionStart:浏览器尝试以SSL 方式连接服务器的时间。不使用SSL 方式连接时,这个属性的值为0。
12. requestStart:浏览器开始请求页面的时间。
13. responseStart:浏览器接收到页面第一字节的时间。
14. responseEnd:浏览器接收到页面所有内容的时间。
15. domLoading:document.readyState 变为"loading"的时间。
16. domInteractive:document.readyState 变为"interactive"的时间。
17. domContentLoadedEventStart:发生DOMContentLoaded 事件的时间。
18. domContentLoadedEventEnd:DOMContentLoaded 事件已经发生且执行完所有事件处理程序的时间。
19. domComplete:document.readyState 变为"complete"的时间。
20. loadEventStart:发生load 事件的时间。
21. loadEventEnd:load 事件已经发生且执行完所有事件处理程序的时间。

通过这些时间值,就可以全面了解页面在被加载到浏览器的过程中都经历了哪些阶段,而哪些阶段




Leave a Reply

Your email address will not be published. Required fields are marked *