浏览器的渲染详解

浏览器渲染主要分为以下几步：

• 生成DOM: DOM树生成时会对dom节点进行深度优先遍历，直到该节点结束，才会去遍历下一个节点
• 生成CSSOM树: 分析css文件和元素上的行内样式，生成页面的样式文件，CSS解析大的过程是从右向左解析的，因此避免使用嵌套太深的标签，会影响解析性能
• 创建Render树: 将DOM树和CSSOM树进行关联起来
• 布局Layout: 浏览器根据render树进行布局，计算出每个节点的坐标
• 绘制Painting：将节点在屏幕上绘制出来

这个过程中涉及几个重要的知识点

DOM渲染的过程中会受到CSS和JS进程的阻塞，这个时候会影响首屏加载缓慢。当文档解析完毕后，script标签中标记为defer的脚本开始执行，然后当html文档被完全加载和解析完成之后DOMContentLoaded事件被触发，这个过程中不需要等待样式表、图像等加载完就执行。等到html、css、js、图片等资源都加载完成后触发load事件
这里需要区分defer和async：
关于defer我们需要注意下面几点：

defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer；
如果有多个声明了defer的脚本，则会按顺序下载和执行 ；
defer脚本会在DOMContentLoaded和load事件之前执行。
defer的执行是在页面解析完成后执行脚本
关于async，也需要注意以下几点：

只适用于外联脚本，这一点和defer一致；
如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序；
async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序 。
async是在脚本下载完成后就立即执行