TTFB - 首字节时间简介

百度站长工具里看到有一个 “首字节时间” 的建议，第一次听说，还真不知道是什么东东。百度站长工具里面的解释是：“浏览器开始收到服务器响应数据的时间 = 后台处理时间 + 重定向时间，是反映服务端响应速度的重要指标”。

看到这个解释，隐隐约约明白了什么意思，下面就用自己的话说一下我的理解（如果有人有权威解释，发现本解释错误，还望指正）。

“首字节时间” 顾名思义就是在浏览器输入目标网站的网址并回车后（或者搜索页面点击打开新的目标页面时）直到获得首个字节的时间。再解释一下，后台处理时间（这应该是浏览器访问目标网站网址时，发出请求，域名服务器的处理时间，将请求发送到目标网站所在服务器 ip），重定向时间（这应该是域名服务器将请求发送到目标网站服务器后，如果服务器有重定向设置，就处理重定向的时间）。

“首字节时间” 简单的理解就是，访问目标网站时，从发出请求到自己电脑获得网站响应的首字节这段时间。

总而言之，言而总之，首字节时间当然是越短了越好。就像百度自己的解释，这是反映服务端响应速度的重要指标。首字节时间越短，表明服务器端（域名 DNS 服务器和网站服务器）响应速度越快，反之越长，表明服务器端响应速度慢。当然是越快了对网站访问体验来说越好了！

======================================================

TTFB - 首字节时间，是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间（包括 DNS、socket 连接和请求响应时间），是能够反映服务端响应速度的重要指标，获取在接收到响应的首字节前花费的毫秒数。
lTime = Response.TTFB
返回值 lTime As Long：首字节响应时间（以毫秒为单位）。

TTFB:httpwatch 的 timechart 中的一列参数。

课外学习部分:

什么是 TTFB 呢？
1.TTFB (Time To First Byte)，是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了 TCP 连接时间，发送 HTTP 请求时间和获得响应消息第一个字节的时间。
注意：网页重定向越多，TTFB 越高，所以要减少重定向
TTFB 优化的方法有：

1. 减少 DNS 查询

2. 使用 CDN

3. 提早 Flush

4. 添加周期头

什么是 TTSR 呢？
2.TTSR(Time to Start Render)
TTSR - 开始渲染时间，指某些非空元素开始在浏览器显示时的时间，这也是一项重要指标，即 TTSR 越短，用户越早浏览器中的内容，心理上的等待时间会越短。过多的 CPU 消耗会拖慢 TTSR，所以网站中有大量图片和脚本往往会造成不良用户体验。

注意
TTSR 优化：
1. 优化 TTFB
2. 降低客户端 CPU 消耗，即页面加载初期不要有大脚本运行，把 JS 脚本放到页面下方
3. 使用效率较高的 CSS 选择器，避免使用 CSS 表达式
4. 避免使用 CSS 滤镜

前端 TTSR 测试脚本：

<head> <script> (function(){ var timeStart = + new Date, limit = 1, timer = setInterval(function(){ if((document.body&&document.body.scrollHeight > 0) || (limit++ == 500)){ clearInterval(timer); console.info('TTSR:',+ new Date - timeStart,';duration:',limit); } },10); })() </script>
</head>

在页面端无法简单测试出具体的 TTSR，不过可以通过模拟脚本得到大概的时间，Firefox 提供了一个 MozAfterPaint 事件，经测试，用于 TTSR 并不准确，如果有 MozBeforePaint 事件该有多好。

什么是 TTDC 呢？
3.TTDC(Time to Document Complete)
TTDC - 文档完成时间，指页面结束加载，可供用户进行操作的时间，等价于浏览器的 onload 事件触发点。TTDC 是比较重要的性能优化对象，TTDC 越低，页面加载速度越快，用户等待时间越短。
注意
TTDC 的优化方法有：

1. 优化 TTFB

2. 优化 TTSR

3. 优化首屏时间，将不必要的页面加载放到 onload 事件之后

TTDC 前端测试：
常见性能测试平台大多使用 IE 浏览器的 DocumentComplete 事件来度量 TTDC，DocumentComplete 事件触发时，页面的状态应是 READYSTATE_COMPLETE，所以在页面中我们可以用 JS 脚本判断：

var win = window,doc = document;
if(win.attachEvent || doc.hasOwnProperty('onreadystatechange')){
doc.onreadystatechange = function(){ if(doc.readyState == 'complete'){ /** * test do something... */ }
}
}else{ win.addEventListener('load',function(){ /** * test do something... */ },false);
}

什么是 TTFL 呢？
4.TTFL(Time to Fully Loaded)
TTFL - 完全加载时间，指页面在 onload 之前和 onload 事件之后额外加载的内容所花费的时间的总和，即页面完完全全加载完毕消耗的总时间。
注意
TTFL 的优化方法：

1. 优化 TTFB

2. 优化 TTSR

3. 优化 TTDC

4. 延迟加载

5. 异步加载

6. 按需加载

===============================================================

如何优化网页首字节时间
1:
看一下详情分析页面。
DNS 解析：如果是 DNS 解析时间太长，那是你的域名解析服务器不好，请更换靠谱的 DNS 服务器。
初始化连接：如果是初始化连接的时间太长，那是你机房的网络不好，请更换更好的机房
如果上面两个都不是。那就是你的代码性能不好，代码执行消耗的时间太长。请优化代码，或者更换更好的机器。
2:
客户端 t1 时刻发起对于某个 url 的请求，经过 DNS 解析获取相应的 IP 地址后，发起对该 IP 地址的 socket 连接，在完成三次握手建立 tcp 连接后，客户端发送 http 请求信息，服务端收到请求后返回响应的内容，当客户端在 t2 时刻收到服务端返回内容的第一个字节，则第一字节时间 = t2-t1。第一字节的时间 = DNS 解析的时间 + socket 三次握手时间 + http 请求时间 + 第一字节返回的时间。首字节的时间是 0，说明很快呀。不需要做优化。谢谢使用阿里测！

转自：Waiting(TTFB)简介 - 钟良的个人页面 - OSCHINA - 中文开源技术交流社区

Waiting (TTFB) 简介相关推荐

web性能优化之Waiting(TTFB)简介
TTFB-首字节时间简介百度站长工具里看到有一个"首字节时间"的建议,第一次听说,还真不知道是什么东东.百度站长工具里面的解释是:"浏览器开始收到服务器响应数据的时间= ...
解决网页中Waiting (TTFB)数据加载过慢的问题
解决网页中Waiting (TTFB)数据加载过慢的问题最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...
网页调试工具显示waiting TTFB时间过长的问题
当我发现网页加载很慢的时候,打开开发者调试工具,有时可以发现Waiting TTFB (Time To First Byte)的时间比较长. 什么是TTFB? TTFB就是最初的网络请求被发起到从服务 ...
php waiting ttfb,浅谈我们个人博客网站加载过程中Waiting(TTFB)时间过长的解决办法...
最近,我发现博客访问速度已经放缓.我检查了控制台,发现所有静态资源都在200ms内加载.只有第一份文件达到了6.65s.它被称为等待(TTFB). )占用主要加载时间的东西.具体的控制台显示内容如下: ...
php搜索ttfb用时太长,waiting TTFB时间过长怎么办
waiting TTFB时间过长的解决办法:首先使用谷歌浏览器开发者工具调到Network:然后在sublime编辑器中die掉所有PHP代码:最后将"host=localhost" ...
网站加载 Waiting (TTFB) 时间过长的原因和解决办法
关注网页前端性能的朋友,在优化网页性能的时候都会遇到网站加载 Waiting(TTFB)时间过长的问题.对于没有优化过的 WordPress 站点,TTFB 时间经常超过了页面内容的下载时间,为用户带 ...
WordPress网站加载WAITING (TTFB) 时间过长解决办法
WordPress 刚刚安装的时候,性能是没问题的,我们安装了主题.插件.添加了一些小工具和菜单,然后我们就开始上传内容了,我们都很勤快 Waiting (TTFB) 时间 Time to First ...
ttfb 指耗时_减少网站响应时间优化Waiting (TTFB)
在谷歌开发工具里,加载网页时有一个Waiting (TTFB),这是服务器处理数据的时间.这个时间反应的是服务器性能.打开或刷新一个网页时,谷歌浏览器的加载图标是灰色并逆时针旋转,就表示处在服务器响应 ...
Waiting (TTFB)
参考 :(网站加载 Waiting (TTFB) 时间过长的原因和解决办法)https://www.wpzhiku.com/wating-ttfb-too-long/

Waiting (TTFB) 简介

TTFB - 首字节时间简介

Waiting (TTFB) 简介相关推荐

最新文章

热门文章