1.获取html文件后，渲染引擎会对将HTML代码解析为DOM结构，同时获取CSS；
2.将获取到的CSS解析为CSSOM树，与DOM树并发解析；
3.解析JS脚本对DOM树和CSSOM树进行修改。
4.将DOM树和CSSOM树合成为render树
5.对render树上节点进行布局，确定其位置，如果元素位置后续被改变而触发重新绘制叫做回流。
6.对摆好位置的节点进行色彩渲染，如果元素样式后续被改变而触发页面重新绘制叫做重绘。
7.加载剩余的img，video等媒体文件。
浏览器拿到HTML，先将HTML转换成dom树
再将CSS样式转换成stylesheet
根据dom树和stylesheet创建布局树
对布局树进行分层，为每个图层生成绘制列表
再将图层分成图块
紧接着光栅化将图块转换成位图，最后合成绘制生成页面。
分层的目的：避免整个页面渲染，把页面分成多个图层，尤其是动画的时候，把动画独立出一个图层，渲染时只渲染该图层就ok，transform，z-index等，浏览器会自动优化生成图层
光栅化目的：页面如果很长但是可视区很小，避免渲染非可视区的样式造成资源浪费，所以将每个图层又划分成多个小个子，当前只渲染可视区附近区域
浏览器的每种引擎，好像渲染的方式都不同~