思维导图
前端性能优化的关键时间点.png
Q：前端性能优化的关键时间点有哪些，分别是什么？
- 开始渲染时间：浏览器开始绘制页面，在此之前页面都是白屏，所以也称为白屏时间。
- DOM Ready：dom解析已经完成，资源还没有加载完成, 这个时候用户与页面的交互已经可用了
- 首屏时间：用户看到第一屏页面的时间
- onload：原始文档和所有引用的内容已经加载完成，用户最明显的感觉就是浏览器上loading状态结束。
Q：开始渲染时间如何获取？如何优化？
获取方式：
- Chrome可通过chrome.loadTimes().firstPaintTime获取
- IE9+可以通过performance.timing.msFirstPaint获取
- 在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值
优化建议：
- 优化服务器响应时间，服务器端尽早输出
- 减少html文件大小
- 减少头部资源,脚本尽量放在body 中
Q：DOM Ready时间如何获取？如何优化？
获取方式：
- 高级浏览器通过DOMContentLoaded事件获取。
- 低版本webkit内核浏览器可以通过轮询document.readyState来实现
- ie中可通过setTimeout不断调用documentElement的doScroll方法，直到其可用来实现
(可以参考jQuery的实现)
优化建议：
- 减少dom结构的复杂度，节点尽可能少，嵌套不要太深
- 优化关键呈现路径
Q：首屏时间如何获取？如何优化？
获取方式：
这个时间点很重要但是很难获取，一般都只能通过模拟获取一个近似时间。
- 不断获取屏幕截图，当截图不再变化时，可以视为首屏时间。
- 一般影响首屏的主要因素是图片的加载，通过页面加载完后判断图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。
优化建议：
- 页面首屏的显示尽量不要依赖于js代码，js尽量放到domReady后执行或加载
- 首屏外的图片延迟加载
- 首屏结构尽量简单，首屏外的css可延迟加载
Q：onload时间如何获取？如何优化？
获取方式：
该时间点是window.onload事件触发的时间
优化建议：
- 减少资源的请求数和文件大小
- 将非初始化脚本放到onLoad之后执行
- 无需同步的脚本异步加载
网友评论