浏览器的组成部分

各部分简要概述

用户界面

用户界面包括工具栏、地址栏、前进后退按钮。除了浏览器主窗口显示请求的页面之外，其他显示的部分都属于用户界面

浏览器引擎

浏览器引擎可以加载一个给定的URI,提供查看浏览器会话的各个方面的挂钩，例如：当前页面加载进度，JS的alert

渲染引擎

渲染引擎为指定的URI生成可视化的表示，还能够显示HTML和XML文档，可选择CSS样式以及嵌入式内容，渲染引擎能精确计算页面布局，渲染引擎内部包含HTML解析器

网络

网络系统实现HTTP和FTP等文件传输协议，网络系统可以在不同的字符集之间进行转换，为文件解析媒体类型

JS解释器

JS解释器能够解释并且执行镶嵌在网页中的JavaScript代码

XML解析器

XML解析器可以将XML文档解析成文档对象模型（DOM树）

显示后端

显示后端提供绘图和窗口原语，包括：用户界面控件集合、字体集合

数据持久层

数据持久层会将与浏览器相关联的各种数据存储在硬盘上，比如书签、cookie

渲染引擎详解

渲染引擎是浏览器最重要的模块

渲染引擎工作流程

Parsing HTML to Construct DOM Tree

渲染引擎使用HTML解析器解析HTML文档，将各个HTML元素逐个转为DOM节点，从而生成DOM树。 同时，渲染引擎使用CSS解析器解析外部CSS文件以及HTML元素的样式规则

Render Tree construction

渲染引擎使用第一步CSS解析器解析得到的样式规则，将其附着到DOM树上，从而构成渲染树。 渲染树包含多尔带有视觉属性（如颜色和尺寸）的矩形，这些矩形的排列顺序就是他们在屏幕上显示的顺序

Layout of Render Tree

渲染树结构完毕之后，进入本阶段进行“布局”，也就是为每个节点分配一个应出现在屏幕上的确切坐标

Painting Render Tree

渲染引擎将遍历渲染树，并且调用显示后端将每个节点绘制出来

思考：将css放在头部，JS放底部，这样可以提高页面的性能？为什么？

为了浏览器少干活

CSS不会阻塞DOM的解析，会阻塞页面的渲染

浏览器是解析DOM生成DOM树，结合CSS生成CSS Tree ，最终组合成为渲染树Render Tree,再渲染界面。可见CSS并不会影响DOM Tree的生成。但是到了渲染阶段，渲染有成本，浏览器会尽量减少渲染的次数