浏览器渲染

浏览器显示页面的原理

• 获取 HTML 文档及样式表文件
• 解析成对应的树形数据结构
  • DOM tree
  • CSSOM tree
• 计算可见节点形成 render tree
• 计算 DOM 的形状及位置进行布局

• 将每个节点转化为实际像素绘制到视口上（栅格化）
  render tree（页面上所显示的最终结果）是由 DOM tree（开发工具中所显示的 HTML 所定义的内容结构）与 CSSOM tree（样式表所定义的规则结构）合并并剔除不可见的节点所形成的，其中不包含如下节点:

• 本身不可见的

  • 参考资料

  • 浏览器工作原理 - CSS解析器

  • 浏览器的工作原理：新式网络浏览器幕后揭秘
  • 开发者需要了解的WebKit
  • 理解WebKit和Chromium: HTML解析和DOM
  • 前端文摘：深入解析浏览器的幕后工作原理
  • 浏览器的渲染原理简介
  • 专题：浏览器原理
  • 浏览器加载和渲染HTML的顺序以及Gzip的问题
  • 从FE的角度上再看输入url后都发生了什么
  • 当你在浏览器中输入Google.com并且按下回车之后发生了什么？
  • 浏览器的背后（续）

  原文: https://leohxj.gitbooks.io/front-end-database/content/theory/browser-work.html