浏览器原理

下面先讲讲从输入 URL 到浏览器把页面加载出来的过程：

1. 建立 TCP 链接
2. 浏览器根据DNS服务器得到的域名的IP地址
3. 向这个IP的机器发送HTTP请求
4. 服务器收到、处理并返回HTTP请求
5. 浏览器得到返回内容
6. 然后是浏览器的渲染过程：
7. 首先解析HTML字符串，并转化成DOM树
8. 然后解析css生成css规则树 （字节数据=>字符串=>Token=>Node=>DOM/CSSOM）
9. 再加载js脚本，通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree （由于DOM是属于渲染引擎的而js是属于js引擎的，当我们通过js去操作DOM时会影响页面的性能，所以我们应该尽量减少DOM操作）
10. 浏览器引擎会通过DOM Tree和CSS Rule Tree来构造Rendering Tree（渲染树） （渲染过程中遇到js会停止渲染，浏览器为了避免渲染出错，GUI线程和JS线程是互斥的关系，因此最好把script标签放到body标签后）

注意：

• 1. 渲染树并不等于DOM树，渲染树只会包含需要显示的节点和这些节点的样式信息，比如：样式为 display：none 的元素不会出现在渲染树中但是会出现在 DOM 树中。
• 2. CSS规则树主要是为了完成匹配并把 CSS Rule 附加上渲染树上的每个 Element（也就是每个 Frame）
• 3. 然后计算每个 Frame 的位置，这也叫重绘和回流（重排） （重绘：当我们对 DOM 的修改导致了样式的变化，但是并没有影响到几何属性，比如颜色。 回流：当我们对DOM 的修改导致了元素集合属性的变化，比如边距 回流一定会发生重绘，重绘不一定会引发回流）

1. 最后通过调用操作系统的 Native GUI 的 API 绘制

浏览器进程

浏览器进程，负责协调承担各项工作的其他进程，比如实用程序进程、渲染器进程、GPU 进程、插件进程等，控制浏览器这个应用的 chrome（主框架）部分，包括地址栏、书签、前进/后退按钮等，同时也会处理浏览器不可见的高权限任务，如发送网络请求、访问文件。

• UI线程：负责绘制浏览器的按钮和地址栏，有线程
• 网络线程：负责处理网络请求并从互联网接收数据
• 存储线程：负责访问文件和存储数据。

渲染器进程

渲染器进程对应新开的标签页，每新开一个标签页，就会创建一个新的渲染器进程。不仅如此，Chrome 还会尽量给每个站点新开一个渲染器进程，包括 iframe 中的站点，以实现站点隔离。

插件进程

控制网站用到的所有插件。

GPU 进程

在独立的进程中处理 GPU 任务。之所以放到独立的进程，是因为 GPU 要处理来自多个应用的请求，但要在同一个界面上绘制图形。