度量页面速度的几项指标
- gelanz - 渔隐的博客TTFB-首字节时间，顾名思义，是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间（包括DNS、socket连接和请求响应时间），是能够反映服务端响应速度的重要指标. 网页重定向越多，TTFB越高，所以要减少重定向. TTSR-开始渲染时间，指某些非空元素开始在浏览器显示时的时间，这也是一项重要指标，即TTSR越短，用户越早浏览器中的内容，心理上的等待时间会越短.
度量页面速度的几项指标
标签：
度量
页面
速度
| 发表时间：2011-02-23 15:37 | 作者：nunumick gelanz
出处：http://nunumick.me/blog/
1.TTFB(Time to First Byte)
TTFB-首字节时间，顾名思义，是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间（包括DNS、socket连接和请求响应时间），是能够反映服务端响应速度的重要指标。
网页重定向越多，TTFB越高，所以要减少重定向
TTFB优化：
2.TTSR(Time to Start Render)
TTSR-开始渲染时间，指某些非空元素开始在浏览器显示时的时间，这也是一项重要指标，即TTSR越短，用户越早浏览器中的内容，心理上的等待时间会越短。过多的CPU消耗会拖慢TTSR，所以网站中有大量图片和脚本往往会造成不良用户体验。
TTSR优化：
- 优化TTFB
- 降低客户端CPU消耗，即页面加载初期不要有大脚本运行，把JS脚本放到页面下方
- 使用效率较高的CSS选择器，避免使用CSS表达式
- 避免使用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事件该有多好。
3.TTDC(Time to Document Complete)
TTDC-文档完成时间，指页面结束加载，可供用户进行操作的时间，等价于浏览器的onload事件触发点。TTDC是比较重要的性能优化对象，TTDC越低，页面加载速度越快，用户等待时间越短。
TTDC优化：
- 优化TTFB
- 优化TTSR
- 参考YSLOW优化最佳实践
- 优化首屏时间，将不必要的页面加载放到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);
}
4.TTFL(Time to Fully Loaded)
TTFL-完全加载时间，指页面在onload之前和onload事件之后额外加载的内容所花费的时间的总和，即页面完完全全加载完毕消耗的总时间。
TTFL优化：
相关 [度量 页面 速度] 推荐：
页面加载速度优化的12个建议
- - Web前端 - ITeye博客Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性，同时指出很多网站都没有利用最佳的页面优化技术，页面加速速度都存在很大缺陷. 那么该如何补救，提高网站页面的加载速度呢. 报告给出了12个页面加载速度优化的补救措施，用以改善加载时间，改善站长浏览者的用户体验.
Google推出Chrome 56，强化了安全且页面重载速度快28%
- - 36氪就当是过春节吧，值此辞旧迎新之际，Google 推出了稳定版的了新版浏览器Chrome 56. 新版Chrome支持Windows、Mac、Linux以及Android等多个版本，新增功能特性包括会对收集密码或信用卡号但不采用HTTPS协议的网站向用户发出警告；改进了页码重载的性能和效率；以及为开发者准备的大量新功能.
减少50%页面载入速度 新证据显示IE11支持谷歌的SPDY协议
- - cnBeta全文版版本号为9364的Windows Blue曝光15天之后关于新系统更多信息被挖掘出来，其中最大的焦点就是即将会装置在Windows 8系统中的IE11浏览器. 通过对源代码进行深入挖掘之后，除了之前已经知晓的标签同步和支持WebGL之外 还发现IE 11支持SPDY协议，一项主要是在现有网络架构下减少载入时间的网络协议.
提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园
- -本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了. 首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中.
Web页面入门
- - 可咔酷 | 网络杂货铺开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有. 确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化.
加速scp传输速度
- - IT技术博客大学习 当需要在机器之间传输400GB文件的时候，你就会非常在意传输的速度了. 默认情况下(约125MB带宽，网络延迟17ms，Intel E5-2430，本文后续讨论默认是指该环境)，scp的速度约为40MB，传输400GB则需要170分钟，约3小时，如果可以加速，则可以大大节约工程师的时间，让攻城师们有更多时间去 看个电影，陪陪 家人.
关于页面字体
- Hu DongHai - DBA Notes关于 Web 页面字体这方面，我是门外汉，弄不出来长篇大论 -- 这样也没必要，从观察统计上简单分析一下看看就够了. 几个页面字体适配度比较好的，HTML body 字体的定义：. 豆瓣：font: 12px/162% Arial,Helvetica,sans-serif;. 新浪微博：font-family: Arial,Helvetica,sans-serif;.
页面构建小工具
- Han - 所有文章 - UCD大社区我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍.. 页面bug调试工具–Firebug. 实时测量工具–Measureit. 实时颜色选取工具–Colorzilla. SEO优化工具–SenSEO. CSS使用效率优化工具–CSS usage.