浏览器渲染过程

参考

• web【干货】十分钟读懂浏览器渲染流程过程概述
• 浏览器渲染主要流程-segmentfault详述文章底部还有几篇值得参考的类似文章

页面渲染基本过程

• HTML解析出DOM树（DOM Tree）。
• CSS解析出Style Rules（CSSOM规则树。）
• 将DOM树与CSSOM规则树合并在一起生成渲染树。
• 遍历渲染树开始布局（layout），计算每个节点的位置大小信息。
• 将渲染树每个节点绘制到屏幕。

关键词概念

渲染阻塞-DOM树的生成过程中可能会被CSS和JS的加载执行阻塞

  当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，（因为脚本可能会改动DOM和CSS，所以继续解析会造成浪费）然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。
  现在可以在script标签上增加属性 defer或者async。
脚本解析会将脚本中改变DOM和CSS的地方分别解析出来，追加到DOM Tree和Style Rules上。
script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

• CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
• JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建

重绘（replaint）

  屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

回流（reflow/relayout）

  意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow。本质上还是一个布局的过程
  所以我们应该尽量减少reflow和replaint，我想这也是为什么现在很少有用table布局的原因之一。
  display:none 会触发 reflow，visibility: hidden属性并不算是不可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框，所以visibility:hidden 只会触发 repaint，因为没有发生位置变化。
有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。