度量页面速度的几项指标

最新推荐文章于 2025-08-11 07:03:46 发布

hw_henry2008

最新推荐文章于 2025-08-11 07:03:46 发布

阅读量7.4k

点赞数

分类专栏： PHP 文章标签：优化浏览器脚本 function 测试 timer

PHP 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了影响网页加载速度的关键指标——TTFB、TTSR、TTDC和TTFL，并提供了针对性的优化策略。通过减少DNS查询、使用CDN、优化JavaScript执行顺序、使用高效的CSS选择器等方法，可以显著提升网页性能。

度量页面速度的几项指标

作者：nunumick 发布时间：February 23, 2011 分类：性能与安全

from http://nunumick.me/blog/tag/TTFB/

1.TTFB(Time to First Byte)

TTFB-首字节时间，顾名思义，是指从客户端开始和服务端交互到服务端开始向客户端浏览器传输数据的时间（包括DNS、socket连接和请求响应时间），是能够反映服务端响应速度的重要指标。
ttfb

网页重定向越多，TTFB越高，所以要减少重定向
ttfb_redirect

TTFB优化：

2.TTSR(Time to Start Render)

TTSR-开始渲染时间，指某些非空元素开始在浏览器显示时的时间，这也是一项重要指标，即TTSR越短，用户越早浏览器中的内容，心理上的等待时间会越短。过多的CPU消耗会拖慢TTSR，所以网站中有大量图片和脚本往往会造成不良用户体验。
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

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