前端性能优化的关键时间点

思维导图

前端性能优化的关键时间点有哪些？

1. 开始渲染时间：浏览器开始绘制页面，在此之前页面都是白屏，所以也称白屏时间。

2. DOM Ready：dom 解析已经完成，资源还没有加载完成（js, img等）

3. 首屏时间：用户看到第一屏页面的时间。

4. onload：原始文档和所有引用的内容已经加载完成。用户最明显的感觉就是浏览器上Loading状态结束。

 

开始渲染时间如何获取？如何优化？

获取方式：

 1.  Chrome可通过chrome.loadTimes().firstPaintTime获取

 2. IE9+ 可以通过performance.timing.msFirstPaint获取

 3. 在不支持的浏览器中可以通过获取头部资源加载完的时刻模拟获取近视值

优化建议：

 1. 优化服务器响应时间，服务器端尽早输出

 2. 减少html文件大小

 3. 减少头部资源，脚本尽量放在body中

 

DOM Ready 时间如何获取？如何优化？

获取方式：

 1. 高级浏览器通过DOMContentLoaded事件获取

 2. 低版本webkit内核浏览器可以通过轮询document.readyState来实现

 3. ie可通过setTimeout不断调用document.Element的 doScroll 方法，直到其可以用来实现

优化建议：

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

 2. 优化关键呈现路径

 

首屏时间如何获取？如何优化？

获取方式：

这个时间节点很重要但很难获取，一般只能通过模拟获取一个近视时间

 1. 不断获取屏幕截图，当截图不在变化时，可视为首屏使时间

 2. 一般影响首屏的主要因素是图片的加载，通过页面加载完后判断图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。

优化建议：

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

 2. 首屏外的图片延迟加载

 3. 首屏结构尽量简单，首屏外的css可延迟加载

 

OnLoad 时间如何获取？如何优化？

获取方式：

该时间节点是window.onload事件触发的时间

优化建议：

 1. 减少资源的请求数和文件大小

 2. 将非初始化脚本放到onLoad之后执行

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