什么是TTFB、TTSR、TTDC、TTFL

什么是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 解析时间太长,那是你的域名解析服务器不好,请更换靠谱的 NS 服务器。
初始化连接:如果是初始化连接的时间太长,那是你机房的网络不好,请更换更好的机房
如果上面两个都不是。那就是你的代码性能不好,代码执行消耗的时间太长。请优化代码,或者更换更好的机器。
2:客户端t1时刻发起对于某个url的请求,经过DNS解析获取相应的IP地址后,发起对该IP地址的socket连接,在完成三次握手建立tcp连接后,客户端发送http请求信息,服务端收到请求后返回响应的内容,当客户端在t2时刻收到服务端返回内容的第一个字节,则第一字节时间=t2-t1。 第一字节的时间= DNS解析的时间+socket三次握手时间+http请求时间+第一字节返回的时间。

 

您可以选择一种方式赞助本站

支付宝转账赞助

支付宝扫一扫赞助

  • 版权声明:本文源自互联网,于2年前,由olinux整理发表,共 1890字。
  • 原文链接:点此查看原文

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情