[TOC]
  • 浏览器渲染浏览器显示页面的原理参考资料

浏览器渲染

浏览器显示页面的原理

  • 获取 HTML 文档及样式表文件
  • 解析成对应的树形数据结构 DOM treeCSSOM tree
  • 计算可见节点形成 render tree
  • 计算 DOM 的形状及位置进行布局
  • 将每个节点转化为实际像素绘制到视口上（栅格化）render tree（页面上所显示的最终结果）是由 DOM tree（开发工具中所显示的 HTML 所定义的内容结构）与 CSSOM tree（样式表所定义的规则结构）合并并剔除不可见的节点所形成的，其中不包含如下节点:
  • 本身不可见的
  • 设置了 display: none; 样式的 参考资料
  • 浏览器工作原理 - CSS解析器
  • 浏览器的工作原理：新式网络浏览器幕后揭秘
  • 开发者需要了解的WebKit
  • 理解WebKit和Chromium: HTML解析和DOM
  • 前端文摘：深入解析浏览器的幕后工作原理
  • 浏览器的渲染原理简介
  • 专题：浏览器原理
  • 浏览器加载和渲染HTML的顺序以及Gzip的问题
  • 从FE的角度上再看输入url后都发生了什么
  • 当你在浏览器中输入Google.com并且按下回车之后发生了什么？
  • 浏览器的背后（续）

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