页面渲染流程

1.解析html文件，创建DOM树

自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞
　　1）css加载不会阻塞html文件的解析，但会阻塞dom的渲染
　　2）css加载会阻塞后面js语句的执行
　　3）js会阻塞html的解析和渲染
　　4）没有defer和async标签的script会立即加载并执行
　　5）有async标签的js，js的加载执行和html的解析和渲染并行
　　6）有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
　　7）DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面完全加载完成后执行（包括样式和图片）

2.解析css，生成CSSOM，css对象模型

3.dom和css合并，构建渲染树（Render Tree）

4.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流）

1）重绘：根据元素的新属性重新绘制，使元素呈现新的外观
2）重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
3）重排必定会引发重绘，但重绘不一定会引发重排

5.白屏时间、首屏时间

1）白屏时间（first paint）是指用户从打开页面开始到页面开始有东西呈现为止
2）首屏时间是用户浏览器首屏内所有内容都呈现出来所花费的时间
3）总下载时间是页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间