参考：
https://web.dev/howbrowserswork/
https://www.cnblogs.com/zhuanzhuruyi/p/6496276.html
1 浏览器的作用
浏览器的主要作用是呈现web资源，而这些web资源是通过请求一个服务器获得。web资源可以是html文档、pdf、图片或者其他类型的资源。资源的地址使用URI来指定。
浏览器解释和显示HTML文件的方式在HTML和CSS规范中指定。这些规范是由W3C(World Wide Web Consortium)组织维护的，它是网络的标准组织。但是各个浏览器产品不完全遵守W3C制定的规范，它们都有定制各自的扩展，这也导致了各个浏览器之间的兼容问题。
浏览器的界面一般都有固定的形式：
1 地址栏
2 前进和后退按钮
3 书签
但是W3C规范并没有规定浏览器界面应该长啥样，之所以目前主流浏览器都有这些界面主要是因为多年经验的良好实践和各个浏览器产品之间的互相模仿。
2 浏览器的结构
浏览器的主要组件包括：
- 用户界面：除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。
- 浏览器引擎：在用户界面和渲染引擎之间传送指令。
- 渲染引擎：负责显示请求的内容。
- 网络：用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
- 用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
- JavaScript 解释器：用于解析和执行 JavaScript 代码。
- 数据存储：这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。
3 rending engine
渲染引擎rending engine的职责是渲染，即在浏览器屏幕上显示所请求的内容。
默认情况下，rending engine可以显示HTML、XML文档和图片。如果要显式其他数据类型需要通过插件或者扩展。比如显式pdf文档需要pdf插件来支持。
不同的浏览器使用不同的rending engine，比如IE使用Trident，FireFox使用Gecko，Chrome使用Blink(WebKit)
3.1 渲染过程
1 解析HTML文档，并将文档中的标签转化为dom节点树，即”内容树”。同时，它也会解析外部CSS文件以及style标签中的样式数据。这些样式信息连同HTML中的”可见内容”一道，被用于构建另一棵树——”渲染树(Render树)”。
2 渲染树由一些带有视觉属性(如颜色、大小等)的矩形组成，这些矩形将按照正确的顺序显示在频幕上
3 渲染树构建完毕之后，将会进入”布局”处理阶段，即为每一个节点分配一个屏幕坐标。再下一步就是绘制(painting)，即遍历render树，并使用UI后端层绘制每个节点。
4 这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容(每次下载8K的块)。
下图显式的是Webkit的渲染过程(Gecko或其他引擎可能略有不同)：
待续...
标签：引擎,浏览器,用户界面,渲染,HTML,文档,原理 From： https://www.cnblogs.com/zhenjingcool/p/16746610.html