前端开发工程师有必须重视的几个性能指标

前端开发工程师有有必要重视的几个功用方针

关于页面相应时间，有一条闻名的“2-5-8准则”。当用户访问一个页面：

在2秒内得到照应时，会感觉系统照应很快；

在2-5秒之间得到照应时，会感觉系统的照应速度还可以；

在5-8秒以内得到照应时，会感觉系统的照应速度很慢，但可以承受；

而逾越8秒后依然无法得到照应时，用户会感觉系统糟透了，进而选择脱离这个站点，或许主张第2次央求。

关于一个网站如果期望抓住用户，网站的速度以及稳定性是首战之地的。

从各式各样的前端监控平台中，你都可以获得页面许多的功用方针。本文将介绍几个几个比较要害的方针，并给出相应的优化思路。

初步渲染的时间

该时间点标明浏览器初步制作页面，在此之前页面都是白屏，所以也称为白屏时间。

关于该时间点的优化有：

1)优化服务器照应时间，服务器端尽早输出

2)减少html文件大小

3)减少头部资源,脚本尽量放在body中

DOM Ready

该时间点标明dom解析现已结束，资源还没有加载结束, 这个时分用户与页面的交互现已可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以标明。TTSR上面现已介绍过了，TTDC标明DOM树创建所耗时间。TTST标明BODY中一切静态脚本加载和实行的时间。在高级浏览器中有DOMContentLoaded工作对应，MDN上有关DOMContentLoaded工作描绘的文档如下，

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

具体规范可以查看W3C的HTML5规范。从MDN文档上可以看出该工作首要是指dom文档加载解析结束，看上去很简略，但是DOMContentLoaded工作的触发与css,js息息相关，现在有专门的名词Critical Rendering Path(要害呈现途径)来描绘，在文章【要害呈现途径】中具体介绍了要害呈现途径对DOMContentLoaded的影响。

在不支持DOMContentLoaded工作的浏览器中可以通过仿照获取近似值，首要的仿照办法有：

1）低版本webkit内核浏览器可以通过轮询document.readyState来结束

2）ie中可通过setTimeout不断调用documentElement的doScroll办法，直到其可用来结束

具体结束办法可以参看干流结构(jquery等)的结束。 DOM Ready时间点意味着用户与页面可以进行交互了，因此越早越好，关于该时间点的优化有：

1）减少dom结构的复杂度，节点尽可能少，嵌套不要太深

2）优化要害呈现途径

首屏时间

该时间点标明用户看到第一屏页面的时间，这个时间点很重要但是很难获取，一般都只能通过仿照获取一个近似时间。一般仿照办法有：

1）不断获取屏幕截图，当截图不再变化时，可以视为首屏时间。可参看webPagetest的Speed Index算法；

2）一般影响首屏的首要要素是图片的加载，通过页面加载完后判别图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。当然还需考虑其他细节，具体可参看【7天打造前端功用监控系统】

针对该时间点的优化有：

1）页面首屏的显现尽量不要依赖于js代码，js尽量放到domReady后实行或加载

2）首屏外的图片推延加载

3）首屏结构尽量简略，首屏外的css可推延加载

onload

该时间点是window.onload工作触发的时间，标明原始文档和一切引用的内容现已加载结束，用户最显着的感觉就是浏览器tab上loading状况完毕。

该时间点的优化办法有：

1）减少资源的央求数和文件大小

2）将非初始化脚本放到onLoad之后实行

3）无需同步的脚本异步加载

为了优化整站功用，页面onload的时分可以考虑做一些预加载，把其它页面需求用到的资源预先加载进来。