- 分类：现在主要有五大主流浏览器: Chrome, Internet Explorer, Firefox, Safari and Opera.移动端上是Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers,除了Opera，这些浏览器都是基于WebKit内核的（目前可能有变）。
- 功能 ：根据W3C制定的一系列规范，从服务端请求并渲染资源
- 普遍外观：地址栏，前进后退，书签，刷新及取消，主页
- 深层结构：下边主要介绍———渲染引擎及JS引擎
- 用户界面（User Interface） ：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
- 浏览器引擎（Browser engine）： 在用户界面和呈现引擎之间传送指令。
- 呈现引擎（Rendering engine）： 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
- 网络（Networking） ： 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
- 用户界面后端（UI backend）：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
- Javascript 解释器（JS Interpreter）：用于解析和执行 Javascript 代码。
- 数据存储（Datapersistence）：这是持久层。浏览器需要在硬盘上保存各种数据，例如 cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。
- 分类：不同浏览器用不同渲染引擎。
Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a fork of WebKit.WebKit 是一个开源渲染引擎，起初作为Linux platform的引擎，后被 Apple应用于Mac. 详见 webkit.org.
-
加载：
- 浏览器根据 DNS 服务器得到域名的 IP 地址
- 向这个 IP 的机器发送 HTTP 请求
- 服务器收到、处理并返回 HTTP 请求
- 浏览器得到返回内容
客户端：如在浏览器输入https://www.baidu.com/，经过 DNS 解析，查到baidu.com对应的 IP（不同时间、地点对应的 IP 可能会不同），浏览器向该 IP 发送 HTTP 请求。
服务端：服务器接收到 HTTP 请求，经计算，返回 HTTP 请求，内容如下：
- 渲染：
渲染主流程：浏览器对请求的呈现。默认渲染引擎可以呈现html，xml及图片。（通过插件）也可以呈现其它数据，比如pdf等。 目前只考虑html和css方面。
content tree:在此，渲染引擎解析html文档并将元素转换成DOM节点。
render tree:在此，渲染引擎解析style（外部css文件或内联style）并转换。
这是一个渐进式过程. 为保证好的UED,渲染引擎尽早展现内容. 在开始构建并展现render树之前，它不会等所有html被解析。部分内容被解析并呈现，同时进程继续解析网络中不断请求到的其余内容。
具体渲染过程- 根据 HTML 结构生成 DOM 树
- 根据 CSS 生成 CSSOM
- 将 DOM 和 CSSOM 整合形成 RenderTree
- 根据 RenderTree 开始渲染和展示
- 遇到
根据 CSS 生成 CSSOM，稍等。。。
将 DOM 和 CSSOM 整合形成 RenderTree
这段html被解析时会被js代码阻塞（加载+执行），因此常把css放在头部（保证渲染），把js放在底部（保证非阻塞）。
- defer 与 async（区别在于：加载完之后何时执行）
- defer(延迟):并行执行html解析与js加载，载入 Javascript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后。整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 Javascript 代码，然后触发 DOMContentLoaded 事件。
- async（异步）:与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行，因此async脚本一定时阻塞load事件的。因此，多个 async-script 的执行顺序是不确定的。值得注意的是，向 document 动态添加 script 标签时，async 属性默认是 true.
```//js
document.createElement("script").async
// true```//html
- 浏览器的容错机制
您在浏览 HTML 网页时从来不会看到“语法无效”的错误。这是因为浏览器会纠正任何无效内容，然后继续工作。
1. 明显不能在某些外部标签中添加的元素。在此情况下，我们应该关闭所有标签，直到出现禁止添加的元素，然后再加入该元素。 2. 我们不能直接添加的元素。这很可能是网页作者忘记添加了其中的一些标签（或者其中的标签是可选的）。这些标签可能包括：HTML HEAD BODY TBODY TR TD LI（还有遗漏的吗？）。 3. 向 inline 元素内添加 block 元素。关闭所有 inline 元素，直到出现下一个较高级的 block 元素。 4. 如果这样仍然无效，可关闭所有元素，直到可以添加元素为止，或者忽略该标记。
CSS 解析和 HTML 不同，CSS 是上下文无关的语法，可以使用简介中描述的各种解析器进行解析。事实上，CSS 规范定义了 CSS 的词法和语法。
- WebKit CSS 解析器
WebKit 使用 Flex 和 Bison 解析器生成器，通过 CSS 语法文件自动创建解析器。正如我们之前在解析器简介中所说，Bison 会创建自下而上的移位归约解析器。Firefox 使用的是人工编写的自上而下的解析器。这两种解析器都会将 CSS 文件解析成 StyleSheet 对象，且每个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与 CSS 语法对应的对象。
图：解析 CSS
- 脚本
:遇到
- defer 与 async（区别在于：加载完之后何时执行）