网页渲染机制

CSS和JS在网页中的放置顺序

• css 一般放在网页顶部的 head 标签内，用 link 进行引用
• js 一般放在 body 标签的尾部，这样可以更快地呈现页面

白屏和FOUC

• 白屏的原因在于由 DOM 和 CSSOM 构建的渲染树未加载完成，如：
  • js 文件在前，阻塞页面渲染
• FOUC(flash of unstyled content) 无样式内容闪烁：当样式表在结构性html之后加载时，将重新渲染页面，导致出现了短暂的闪烁现象，如
  • 使用 @import 引入的外部 css 文件会在页面下载完再进行加载
  • css 在底部时

async和defer

• defer

    <script defer src="script.js"></script>
  

  • 只适用于外部脚本
  • 加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成，即：立即加载，延迟执行
• async

    <script defer src="script.js"></script>
  

  • 只适用于外部脚本
  • 加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步），即不论声明先后顺序，只要加载完成便立即执行
• 没有 defer 或 async 时，浏览器会立即加载并执行指定的脚本，即不等待后续载入的文档元素，读到就加载并执行

网页渲染机制简述

渲染基本流程

渲染引擎首先从网络获得所请求文档的内容，通常以8K分块的方式完成。获取内容后渲染引擎的基本流程:

The main flow

• DOM，(Document Object Model)，浏览器将 HTML 标签解析成树状数据结构
• CSSOM，(CSS Object Model)，浏览器将 CSS 标签解析成树状数据结构
• Render Tree，DOM 和 CSSOM 合并后生成渲染树
• Layout，在渲染树的基础上进行布局，计算每个节点的几何结构
• Painting，通过显卡，将 layout 后的每个节点内容分别呈现到屏幕上

webkit 主要流程:

webkit main flow

Gecko 主要流程:

Gecko main flow

虽然 Webkit 和 Gecko 使用的术语略有不同，但是大体流程还是一致的

• Gecko 将处理过的可见元素结构称为 "Frame Tree"，每个元素都是一个 "frame"；而 Webkit 则使用术语 "Render Tree"，其由 "Render Objects" 组成
• Webkit 使用 "lalyout" 来表示元素的布局，而 Gecko 则称为 "reflow"
• Webkit 使用 "attachment" 来表示通过连接 DOM 节点和可视化信息来创建 render tree；一个非语义上的的小差别是 Gecko 在 HTML 和 DOM 树之间还有一个附加的层，称作 "conent sink"，是创建 DOM 元素的工厂

refer to How browsers work，defer和async的区别 | segmentfault