前端面试13：前端性能优化的关键时间点

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~若是以为不错，恳求star哈~

思惟导图

Q：前端性能优化的关键时间点有哪些，分别是什么？

1. 开始渲染时间：浏览器开始绘制页面，在此以前页面都是白屏，因此也称为白屏时间。
2. DOM Ready：dom解析已经完成，资源尚未加载完成, 这个时候用户与页面的交互已经可用了
3. 首屏时间：用户看到第一屏页面的时间
4. onload：原始文档和全部引用的内容已经加载完成，用户最明显的感受就是浏览器上loading状态结束。

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

获取方式：

1. Chrome可经过chrome.loadTimes().firstPaintTime获取
2. IE9+能够经过performance.timing.msFirstPaint获取
3. 在不支持的浏览器中能够根据上面公式经过获取头部资源加载完的时刻模拟获取近似值

优化建议：

1. 优化服务器响应时间，服务器端尽早输出
2. 减小html文件大小
3. 减小头部资源,脚本尽可能放在body 中

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

获取方式：

1. 高级浏览器经过DOMContentLoaded事件获取。
2. 低版本webkit内核浏览器能够经过轮询document.readyState来实现
3. ie中可经过setTimeout不断调用documentElement的doScroll方法，直到其可用来实现 (能够参考jQuery的实现)

优化建议：

1. 减小dom结构的复杂度，节点尽量少，嵌套不要太深
2. 优化关键呈现路径

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

获取方式： 这个时间点很重要可是很难获取，通常都只能经过模拟获取一个近似时间。

1. 不断获取屏幕截图，当截图再也不变化时，能够视为首屏时间。
2. 通常影响首屏的主要因素是图片的加载，经过页面加载完后判断图片是否在首屏内，找出加载最慢的一张便可视为首屏时间。

优化建议：

1. 页面首屏的显示尽可能不要依赖于js代码，js尽可能放到domReady后执行或加载
2. 首屏外的图片延迟加载
3. 首屏结构尽可能简单，首屏外的css可延迟加载

Q：onload时间如何获取？如何优化？

获取方式： 该时间点是window.onload事件触发的时间

优化建议：

1. 减小资源的请求数和文件大小
2. 将非初始化脚本放到onLoad以后执行
3. 无需同步的脚本异步加载