Powered by GitBook

前端工程师手册

浏览器渲染

浏览器显示页面的原理

  • 获取 HTML 文档及样式表文件
  • 解析成对应的树形数据结构
    • DOM tree
    • CSSOM tree
  • 计算可见节点形成 render tree
  • 计算 DOM 的形状及位置进行布局
  • 将每个节点转化为实际像素绘制到视口上（栅格化）

render tree（页面上所显示的最终结果）是由 DOM tree（开发工具中所显示的 HTML 所定义的内容结构）与 CSSOM tree（样式表所定义的规则结构）合并并剔除不可见的节点所形成的，其中不包含如下节点:

  • 本身不可见的
    • <html>
    • <head>
    • <meta>
    • <link>
    • <style>
    • <script>
  • 设置了 display: none; 样式的

参考资料