前端面试-网页渲染顺序

1 解析HTML，生成DOM树(O=object,M=Model)
2 解析CSS，生成CSSOM树
3 将DOM树和CSSOM树关联，生成渲染树(Render Tree)
4 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
5 绘制render树（paint），绘制页面像素信息
6 将像素发送给GPU，展示在页面上

html的解析是从上往下执行的，下载和渲染是同时进行的。
当遇到css文件、js文件和js执行时，会阻塞html渲染和下载，因为css文件的样式有可能会引起重排，js文件有可能会改变dom和样式引起重排，浏览器为了避免已经渲染好的html再次渲染所以会优先下载css文件和js文件。
而图片则不会阻塞html渲染和下载，但有可能加载完图片之后撑开了页面引起重排。
要注意减少域名查询，DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好。