2-5-8原则
当用户访问一个页面时：
- 在2秒内得到响应时，会感觉系统响应很快；
- 在2-5秒之间得到响应时，会感觉系统的响应速度还可以；
- 在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但可以接受；
- 超过8秒后仍然无法得到响应时，用户会感觉系统糟透了，进而选择离开这个站点，或者发起第二次请求。
页面性能指标
开始渲染时间
该时间点表示浏览器开始绘制页面，在此之前页面都是白屏，所以也称为白屏时间。
Time To Start Render = TTFB (Time To First Byte) + TTDD (Time To Document Download) + TTHE (Time To Head End)
TTFB —— 浏览器发起请求到服务器返回第一个字节的时间
TTDD —— 从服务器加载html文档的时间
TTHE —— 文档头部解析完成所需要的时间
Chrome可通过chrome.loadTimes().firstPaintTime获取该时间指标
对于该时间点的优化建议：
- 优化服务器响应时间，服务器端尽早输出
- 减少html文件大小
- 减少头部资源，脚本尽量放在body中（js放body最后什么的吧）
DOM Ready
该时间点表示dom解析已经完成，交互可用，但资源还没有加载完成（比如图片什么的）。
TimeTo Dom Ready = TTSR (Time To Start Render) + TTDC (Time To Dom Created) + TTST (Time To Script)
TTDC —— DOM树创建所耗时间
TTST —— body中所有静态脚本加载和执行的时间
*DOM树 —— DOM(Document Object Model)是一种用于HTML和XML文档的编程接口，DOM树是这个model的形状，和HTML的嵌套结构相符合。
监测：触发JavaScript的DOMContentLoaded事件（注意兼容性）
对于该时间点的优化建议：
- 减少dom结构的复杂度，节点尽可能少，嵌套不要太深
- 优化关键呈现路径(Critical Rendering Path)（这个是什么？）
首屏时间
该时间点表示用户看到第一屏页面的时间。
一般通过模拟获取一个近似时间：
- 不断获取屏幕截图，当截图不再变化时，可以视为首屏时间。参考webPagetest的Speed Index算法；
- 一般影响首屏的主要因素是图片的加载，通过页面加载完后判断图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。具体搜索文章【7天打造前端性能监控系统】
对于该时间点的优化建议：
- 页面首屏的显示尽量不要依赖于js代码，js尽量放到domReady后执行或加载
- 首屏外的图片延迟加载
- 首屏结构尽量简单，首屏外的css可延迟加载
onload
该时间点是window.onload事件触发的时间，表示原始文档和所有引用的内容已经加载完成，用户最明显的感觉就是浏览器tab上loading状态结束。
对于该时间点的优化建议：
- 减少资源的请求数和文件大小
- 将非初始化脚本放到onLoad之后执行
- 无需同步的脚本异步加载
*为了优化整站性能，页面onload的时候可以考虑做一些预加载，把其它页面需要用到的资源预先加载进来。
疑问：
比如网站是用vue这种框架写的，打包出来就一个HTML入口文件，然后所有的js等都打包在了一起，那就打开网页的时候全加载了吗？额，不会就性能特不好？还是人家框架以及解决好这个问题了？