We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关键词：白屏时间
白屏时间是指从浏览器开始请求页面到页面开始显示内容的时间。可以通过以下方法计算白屏时间：
一、使用浏览器的性能 API
现代浏览器提供了performance对象，可以用来获取页面加载过程中的各种时间戳。通过这些时间戳的差值可以计算出白屏时间。
performance
<head>
performance.timing.navigationStart
performance.timing.domInteractive
performance.timing.domContentLoadedEventStart
DOMContentLoaded
例如：
<!DOCTYPE html> <html> <head> <script> const timing = performance.timing; const whiteScreenTime = timing.domInteractive - timing.navigationStart; console.log(`白屏时间为：${whiteScreenTime}ms`); </script> </head> <body> <!-- 页面内容 --> </body> </html>
二、使用自定义标记和日志
<div>
<!DOCTYPE html> <html> <head> <style> #whiteScreenMarker { display: none; } </style> <script> const timing = performance.timing; document.addEventListener("DOMContentLoaded", function () { document.getElementById("whiteScreenMarker").style.display = "block"; const whiteScreenTime = performance.now() - timing.navigationStart; console.log(`白屏时间为：${whiteScreenTime}ms`); }); </script> </head> <body> <div id="whiteScreenMarker"></div> <!-- 页面内容 --> </body> </html>
The text was updated successfully, but these errors were encountered:
hankliu62
No branches or pull requests
关键词：白屏时间
白屏时间是指从浏览器开始请求页面到页面开始显示内容的时间。可以通过以下方法计算白屏时间：
一、使用浏览器的性能 API
现代浏览器提供了
performance对象，可以用来获取页面加载过程中的各种时间戳。通过这些时间戳的差值可以计算出白屏时间。<head>标签中插入一段 JavaScript 代码，在页面加载时记录关键时间点。performance.timing.navigationStart表示浏览器开始导航的时间戳。performance.timing.domInteractive（文档被解析完成，开始加载外部资源时的时间戳）或者performance.timing.domContentLoadedEventStart（DOMContentLoaded事件开始的时间戳）作为近似的白屏结束时间点。performance.timing.navigationStart。例如：
二、使用自定义标记和日志
<head>标签之后插入一个不可见的元素，例如一个空的<div>元素，并给它一个特定的 ID。例如：
The text was updated successfully, but these errors were encountered: