浏览器渲染原理

浏览器是如何渲染页面的

发出请求 -> DNS查询 -> 服务端处理 -> 返回HTML文档 -> 浏览器渲染页面

渲染引擎

  • IE(Trident)
  • Edge(Chakra)
  • Chrome/Opera(Blink)
  • Firefox/(Gecko)
  • Safari(Webkit)
  • UC(U3)
  • Wechat(X5)

过程

  1. DOM解析 –> DOM Tree
  2. 附加CSS –> Render Tree(重排/layout)
  3. 层叠上下文处理 –> Render Layer(重绘/repaint)
  4. 层合并 –> Graphics Layer
  5. GPU绘制

DOM Parse

  • 遇到script标签时会停止解析
  • DOMContentLoader事件在开始解析的时候就触发了
  • 此时图片尚未加载完成

Dom Tree

  • HTMLHtmlElement > HTMLBodyElement > Comment + HTMLDivElement + … +
  • display:none的元素也在DOM Tree
  • script标签也是，注释同样是的

CSS Parse

  • 与DOM解析同步进行
  • 与Script的执行互斥？
  • Webkit内核进行了js执行优化

Render Tree

  • 每个结点为一个Render Object对象，包含样式信息
  • 宽高和位置都通过Layout（重排）计算出来
  • display:none不在Render Tree
  • 常说的脱离文档流，是脱离Render Tree

重排(Layout)/回流(reflow)

  • 用transform做形变和位移，避免重排
  • 通过绝对定位，脱离当前层叠上下文，形成新的Render Layer

资源优先级(chrome)

  • HTML:Highest
  • Styles:Highest
  • Image:Low/Medium
  • XHR/Fetch:High
  • Srcipt:Complex
  • Fonts:Link rel=”preload”