浏览器的渲染机制与底层结构
Opened this issue · 0 comments
wuyuanlijie commented
浏览器的结构
- 用户界面(User Interface):包括地址栏、前进/后退按钮、书签菜单等。除了浏览器的主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
- 浏览器引擎(Browser engine):在用户界面和呈现引擎之间传送指令。
- 渲染引擎(Rendering engine):负责显示请求的内容。如果请求是内容是HTML,它就负责解析HTML和CSS内容,并将解析后的内容显示在屏幕上。
- 网络(Networking):用户网络调用,比如HTTP请求。其接口与平台无关,并为所有的平台提供底层实现。
- 用户界面后端(UI Backend):用户绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面的方法。
- JavaScript解释器(JS Interpreter):用于解析和执行JS的代码
- 数据存储(Data Persistence):数据持久层。浏览器的需要在硬盘上保存各种数据,比如Cookie。HTML5定义了“网络数据层”,只是一个完整的浏览器的内数据库。
各大浏览的内核分类:
- Trident内核:IE
- Gecko内核:FireFox
- Webkit内核:Chrome、Safari
关键渲染路径
概念:是指与当前用户操作有关的内容。例如用户刚刚打开一个页面,首屏就显示当前用户的操作有关的内容,具体就是浏览器收到HTML、CSS和JS等资源并对其进行处理从而渲染出Web页面。
- 优化关键渲染路径
输入网址到页面的呈现
- DNS查询
- TCP连接
- HTTP请求即响应
- 服务器响应
- 客户端渲染(浏览器渲染)
浏览器对内容的渲染流程
- 处理HTML标记并构建DOM树
- 处理CSS标记并构建CSSOM树
- 将DOM与CSSOM合并为一个渲染树render tree
- 根据渲染树来布局,以计算每个节点的几何信息
- 将各个节点绘制到屏幕上去
阻塞渲染
谈论资源的阻塞的时候,现代的浏览器总是并行加载资源。例如,当HTML解析器(HTML Parser)被脚本阻塞的时候,解析器虽然会停止构建DOM,但仍会识别脚本后面的资源,并进行预加载。
由于以两点:
- 默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。
- JavaScript 不仅可以读取和修改 DOM 属性,还可以读取和修改 CSSOM 属性。
存在阻塞的 CSS 资源时,浏览器会延迟 JavaScript 的执行和 DOM 构建。另外:
- 当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行。
- JavaScript 可以查询和修改 DOM 与 CSSOM。
- CSSOM 构建时,JavaScript 执行将暂停,直至 CSSOM 就绪。
所以,script 标签的位置很重要。实际使用时,可以遵循下面两个原则:
- CSS 优先:引入顺序上,CSS 资源先于 JavaScript 资源。
- JavaScript 应尽量少影响 DOM 的构建。