网页打开速度越快用户体验越好，有人说wordpress建站速度慢，事实上wordpress网站打开速度做到1秒内打开是非常轻松的。说起网页打开速度，很多wordpress站长都会想起我爱水煮鱼博客，因为他的网站出了名的快，但也没有他网站底部显示的那么快，1毫秒生成时间看起来很夸张，事实上页面生成时间对于整个网页访问过程中消耗的时间来说不值一提。
真正的网页打开速度应该站在用户的角度来看，因此服务器端做的优化再好，用户网络不行速度也快不起来，当然并不是说服务器优化没用，相反服务器端优化非常重要。这篇文章不讲如何优化服务器端，不外乎程序和缓存两个要点，想了解的可以查看我以前的文章：WordPress性能优化——提升网站速度飞起来
今天我们讲如何将真正的网页打开速度显示在网页中，很简单，直接读取用户浏览器的数据就行，然后通过JavaScript显示在网页中。
performance获取耗时
浏览器早就提供了 performance 相关接口，获取 window.performance.timing 对象后可以获取它的属性记录的所有时间，具体属性介绍如下。
- connectStart：HTTP域名解析完成的时间
- connectEnd：HTTP浏览器与服务器之间连接建立完成的时间
- domComplete：DOM文档解析完成，readyState变为complete
- domContentLoadedEventStart：所有脚本已经执行完，开始执行DOMContentLoaded方法
- domContentLoadedEventEnd：执行DOMContentLoaded方法结束
- domInteractive：DOM结构加载结束，开始加载内嵌资源，readyState变为interactive
- domLoading：DOM结构开始解析，readyState开始是loading
- domainLookupStart：DNS域名查询开始
- domainLookupEnd：DNS域名查询结束
- fetchStart：浏览器发起任何请求之前的时间戳
- loadEventStart：开始加载load事件
- loadEventEnd：load事件加载结束
- navigationStart：unload上一个文档的时间节点
- redirectStart：第一个页面重定向开始的时间
- redirectEnd：最后一个页面重定向结束的时间
- requestStart：浏览器向服务器发起HTTP请求（包含缓存，本地资源）
- responseStart：浏览器从服务器收到HTTP请求返回的第一个字节的时间
- responseEnd：浏览器从服务器收到HTTP请求返回的最后一个字节的时间
- secureConnectionStart：HTTPS协议握手之前的时间，如果非HTTPS，则为0
- unloadEventStart：上一个文档unload事件的开始时间（需要是同源文档，否则为0）
- unloadEventEnd：上一个文档unload事件的结束时间（需要是同源文档，否则为0）
常用时间
- 页面加载耗时：loadEventEnd – navigationStart
- DNS查询耗时：domainLookupEnd – domainLookupStart
- TCP链接完成握手耗时：connectEnd – connectStart
- request请求耗时：responseEnd – responseStart
- 解析DOM树耗时：domComplete – domInteractive
- 白屏时间：domloading – fetchStart
- DOMReady可操作时间：domContentLoadedEventEnd – fetchStart
- onload总下载时间：loadEventEnd – fetchStart
- 重定向时间：redirectEnd – redirectStart
实例代码
复制
<script>
function getTiming() {
setTimeout(() => {
let t = window.performance.timing;
let performanceInfo = [{
key: "Redirect",
desc: "网页重定向的耗时",
"value(ms)": t.redirectEnd - t.redirectStart
},
{
key: "AppCache",
desc: "检查本地缓存的耗时",
"value(ms)": t.domainLookupStart - t.fetchStart
},
{
key: "DNS",
desc: "DNS查询的耗时",
"value(ms)": t.domainLookupEnd - t.domainLookupStart
},
{
key: "TCP",
desc: "TCP链接的耗时",
"value(ms)": t.connectEnd - t.connectStart
},
{
key: "Waiting(TTFB)",
desc: "从客户端发起请求到接收响应的时间",
"value(ms)": t.responseStart - t.requestStart
}, {
key: "Content Download",
desc: "下载服务端返回数据的时间",
"value(ms)": t.responseEnd - t.responseStart
},
{
key: "HTTP Total Time",
desc: "http请求总耗时",
"value(ms)": t.responseEnd - t.requestStart
},
{
key: "First Time",
desc: "首包时间",
"value(ms)": t.responseStart - t.domainLookupStart
},
{
key: "White screen time",
desc: "白屏时间",
"value(ms)": t.responseEnd - t.fetchStart
},
{
key: "Time to Interactive(TTI)",
desc: "首次可交互时间",
"value(ms)": t.domInteractive - t.fetchStart
},
{
key: "DOM Parsing",
desc: "DOM 解析耗时",
"value(ms)": t.domInteractive - t.responseEnd
},
{
key: "DOMContentLoaded",
desc: "DOM 加载完成的时间",
"value(ms)": t.domInteractive - t.navigationStart
},
{
key: "Loaded",
desc: "页面load的总耗时",
"value(ms)": t.loadEventEnd - t.navigationStart
}]
console.table(performanceInfo);
}, 0)
}
window.addEventListener('load', getTiming, false)
</script>将上面的代码加入你的网页中，然后在浏览器中按下F12打开开发者工具，点开控制台选项 Console 标签，可以看到如下所示的请求时间表格。
JavaScript获取网页显示加载所需时间
上图显示的是我爱水煮鱼的博客请求数据，此数据是我的网络下的，不能说明问题。
是不是觉得奇怪，我怎么能拿到他的网站数据呢？前面说了请求时间的数据是在用户本地浏览器，因此，我们直接在浏览器中执行js就行了。
仍然按下F12打开开发者工具，点开控制台选项 Console 标签，在此标签下输入如下代码，没错，就是上面的部分代码。
复制
let t = window.performance.timing;
let performanceInfo = [{
key: "Redirect",
desc: "网页重定向的耗时",
"value(ms)": t.redirectEnd - t.redirectStart
},
{
key: "AppCache",
desc: "检查本地缓存的耗时",
"value(ms)": t.domainLookupStart - t.fetchStart
},
{
key: "DNS",
desc: "DNS查询的耗时",
"value(ms)": t.domainLookupEnd - t.domainLookupStart
},
{
key: "TCP",
desc: "TCP链接的耗时",
"value(ms)": t.connectEnd - t.connectStart
},
{
key: "Waiting(TTFB)",
desc: "从客户端发起请求到接收响应的时间",
"value(ms)": t.responseStart - t.requestStart
}, {
key: "Content Download",
desc: "下载服务端返回数据的时间",
"value(ms)": t.responseEnd - t.responseStart
},
{
key: "HTTP Total Time",
desc: "http请求总耗时",
"value(ms)": t.responseEnd - t.requestStart
},
{
key: "First Time",
desc: "首包时间",
"value(ms)": t.responseStart - t.domainLookupStart
},
{
key: "White screen time",
desc: "白屏时间",
"value(ms)": t.responseEnd - t.fetchStart
},
{
key: "Time to Interactive(TTI)",
desc: "首次可交互时间",
"value(ms)": t.domInteractive - t.fetchStart
},
{
key: "DOM Parsing",
desc: "DOM 解析耗时",
"value(ms)": t.domInteractive - t.responseEnd
},
{
key: "DOMContentLoaded",
desc: "DOM 加载完成的时间",
"value(ms)": t.domInteractive - t.navigationStart
},
{
key: "Loaded",
desc: "页面load的总耗时",
"value(ms)": t.loadEventEnd - t.navigationStart
}]
console.table(performanceInfo);如下图，回车执行即可。
JavaScript获取网页显示加载所需时间
下图是我的网站请求数据，仍然是我个人网络情况下的。
JavaScript获取网页显示加载所需时间
一般来说，用户体验到的网页速度是白屏时间，只要你展示得快，用户得到数据的时间越短，你的网站体验越好。当然可交互时间如果太长，即使用户看到显示内容了，但不能点击，卡在那里反倒会影响用户体验，因此这两个时间需要特别关注。
上面举的例子并没有显示在网页上，如果你想显示，通过js动态修改html标签就行了，非常简单的代码，这里就不写了。
评论 （0）