web性能优化之Waiting(TTFB)简介

深藏阁楼爱情的钟 2023-07-01 08:49 8阅读 0赞

# [TTFB-首字节时间简介][TTFB-] #

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

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

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

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

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

===========================[![41DD1C~1][41DD1C_1]][41DD1C_1_41DD1C_1]===========================

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测试脚本：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

<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>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

在页面端无法简单测试出具体的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脚本判断：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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); 
    }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

*1.优化TTFB*

*2.优化TTSR*

*3.优化TTDC*

*4.延迟加载*

*5.异步加载*

*6.按需加载*

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

[TTFB-]: http://www.cnblogs.com/ChandlerVer5/p/TTFB.html
[41DD1C_1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvNjY4NzMxLzIwMTQwOS8wMzA5MDY1NjIzNTk3ODguZ2lm
[41DD1C_1_41DD1C_1]: https://images0.cnblogs.com/blog/668731/201409/030906559384047.gif
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg