html 页面渲染过程:
1. 浏览器获取到 html 资源后开始解析 html ( dom tree ) --> 构建 dom 树
2. 解析到 css 后根据 css 生成 css 规则树 ( style rules )--> 产生 css 规则树
3. dom 和 css 规则树生成完成
4. 通过 dom 树和 css 规则树生成渲染树 ( render tree )--> 构建 render 树
5.渲染树构建完成后,浏览器开始计算元素的大小和位置( layout )--> 布局 render 树
6.根据计算好的节点信息将内容绘制到屏幕上( padding )--> 绘制 render 树
详细过程:
1. dom 树和 css 树的先后顺序
浏览器获取到 html 资源后自上而下开始解析,生成 dom 树;如果遇到 style 的内联样式和 link 会将 css 交由 css 渲染器构建 css 规则树;其中加载 link 引入的外部样式文件是异步加载的,并且整个 css 规则树也是与 dom 树的构建是并行的;
2. javascript 脚本的加载
由于 js 可以操作 dom ,所以在 html 解析到 javascript 脚本时会停止对 dom 的解析;而 css 的解析会阻塞 js 的执行,所以在某些情况下 css 的解析会导致 dom 的解析;
script 的 defe