从用户体验出发的性能指标分析-Start Render

最新推荐文章于 2024-10-09 11:19:11 发布

不晓得V

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量1.6k

点赞数

分类专栏：网页优化文章标签： javascript 浏览器 html 服务器文档 yahoo

网页优化专栏收录该内容

11 篇文章 0 订阅

订阅专栏

如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？接下来将一一介绍，本文集中介绍Start Render。

定义

Start Render，顾名思义指的是浏览器开始渲染的时间，从用户角度出发则可以定义为用户在页面上看到的第一个内容的时间。

用户体验

该时间决定着用户对页面的第一体验时机，如果时间越短给用户的体验则是页面速度越快，这样用户等待其余内容展现的耐心也会更大一些。如果时间过长，则用户会在长时间内面对的都是一个空白的页面，这对用户的耐心将是一个考验。总的来说，Start Render时间是越短越好，而且是非常关键的指标。

影响因素

要想知道Start Render时间受哪些因素的影响，首先要知道这个时间是怎么计算的。归纳一下，大概可以用以下这个公式来表示：

Time To Start Render = TTFB + TTDD + TTHE

其中：

TTFB(Time To First Byte)：发起请求到服务器返回数据的时间

TTDD(Time To Document Download)：从服务器加载HTML文档的时间

TTHE(Time To Head End)：HTML文档头部解析完成所需要的时间

通过以上公式可以看到Start Render主要受以下因素影响(开发人员可控)：

(1) 服务器响应时间

(2) HTML文档的大小

(3) Head中资源使用情况

监控方式

在Firefox下，可以通过在window上注册"MozAfterPaint"事件来计算浏览器开始渲染的时间，具体的实现可以参考FF的官方文档。在其他没有实现类似接口的浏览器则需要自己处理，根据Start Render的定义可以知道，当开始渲染时用户是可以在浏览器中看见内容的，而有内容的时候document.body.offsetHeight应该是大于0的，因此根据这一特点使用timer来检查。

view plain copy to clipboard print ?

(function(){
if(/Firefox/.test(navigator.userAgent)){
window.addEventListener("MozAfterPaint", function(){
window.removeEventListener("MozAfterPaint",
arguments.callee, false);
window.pmc_start_render_time = new Date()*1;
alert(1);
}, false);
}
else{
if(document.body && document.body.offsetHeight > 0 ){
window.pmc_start_render_time = new Date()*1;
alert(2);
return;
}
setTimeout(arguments.callee,30);
}
})();

经过测试，使用timer模拟的与FF下MozAfterPaint得到的结果基本上一致，包括在不同位置引用Javascript对Start Render的影响。测试>>

优化方法

从Start Render的影响因素着手一一分析：

(1) 减少服务器响应时间

主要是为了减少TTFB，一方面需要尽可能减少服务器处理请求的时间；另一个方面则可以使用flush方法，使得服务器生成的内容可以尽早的输出到客户端，这也是Yahoo众多优化原则之一，不过Yahoo的建议是在</head>标签之后flush，也就是将整个HEAD部分提前输出，好处是可以让HEAD中的CSS、Javascript资源提前开始加载，为之后的内容渲染提前准备。但同时并不能很好的减少Start Render时间，因为只是输出了HEAD，此时页面依旧是一片空白。更近一步的做法是将BODY中的部分内容提前输出，通常可以将页面中的通用头部提前输出。但是在BODY中flush需要注意的是：如果在BODY中未闭合的标签中flush，则浏览器并不会提前解析，而是等到所有内容都收到后才开始。

view plain copy to clipboard print ?