浏览器工作原理（一）

宏观视角下的浏览器

为什么浏览器打开一个页面会有多个进程运行？

目前的浏览器是多线程架构，打开一个页面有3个或者更多进程：浏览器主进程、GPU进程、网络进程、渲染进程、插件进程（若没有插件则没有插件进程）

浏览器主进程：负责界面显示、用户交互、子进程管理、存储等功能
GPU进程：负责页面UI绘制
网络进程：负责页面网络资源加载
插件进程：负责插件的运行
渲染进程：将HTML/CSS/JS转化为用户可以与之交互的网页，排版引擎和V8都运行在该进程中
( 同站的页面共用同一个渲染进程，不同站的页面渲染进程不共用，打开多个页面浏览器主进程、GPU进程、网络进程是共用的)

什么是同源和同站？
同源：相同协议+相同主机+相同端口号
同站：相同协议+相同根域名
Ps:一个域名对应一个主机，但是一个主机可以对应多个域名

浏览器进程

（以“从输入url到页面渲染完成来看浏览器多进程”来讲）

1.浏览器主进程：

浏览器主进程合成完整Url：如果是输入的是地址，比如 “baidu.com”，则自动合成为：https://www.baidu.com/。
如果输入的是关键字，则使用默认搜索引擎，合成带搜索关键字Url，比如输入：‘hello’，默认搜索引擎为百度，则合成为：https://www.baidu.com/s?ie=UTF-8&wd=hello
然后把完整url发送给网络进程

2.网络进程：

a.网络进程接收到url请求后，先判断是否本地缓存了资源（强缓存）。如果有，则直接返回资源给浏览器主进程，不发起网络请求。如果没有缓存，则进入网络请求。
b.网络请求之前，先要进行DNS解析，把域名转换成ip，这一步也是先查DNS缓存，如果有当前域名的缓存，则从缓存中直接取对应ip（浏览器搜索自己的DNS缓存，若没有，则搜索操作系统中的DNS缓存，若没有，则搜索操作系统的hosts文件（Windows环境下，维护一张域名与IP地址的对应表，位置一般在 C:\Windows\System32\drivers\etc\hosts）。
c.如果没有缓存，则从DMS服务器请求ip：（以百度为例）本地域名服务器 查询自己的DNS缓存，查找成功则返回结果，否则，（以下是迭代查询方式）

1. 本地域名服务器 向根域名服务器（其虽然没有每个域名的具体信息，但存储了负责每个域，如com、net、org等的解析的顶级域名服务器的地址）发起请求，此处，根域名服务器返回com域的顶级域名服务器的地址
   2 .本地域名服务器 向com域的顶级域名服务器发起请求，返回baidu.com权限域名服务器（权限域名服务器，用来保存该区中的所有主机域名到IP地址的映射）地址
   3 .本地域名服务器 向baidu.com权限域名服务器发起请求，得到www.baidu.com的IP地址
   然后构建请求体，请求头（包括cookie）等信息，向服务端发送网络请求（建立Tcp链接）。
   1.应用层-浏览器发送HTTP请求
   作为发送端的客户端在应用层（HTTP协议）发送了一个想要做某件事的HTTP请求（比如请求某个接口）
   2.传输层-TCP或者UDP封装数据（HTTP请求报文）
   为了传输方便，传输层选择协议（TCP协议或者UDP协议）对从应用层收到的数据（HTTP请求报文）进行封装（对收到的数据进行分割，并在各个报文上打上标记序号及端口号）后转发给网络层
   3.网络层-IP协议封装IP地址，获取目的MAC(media access control address)地址
   通过IP协议将IP地址封装为IP数据报，此时会使用ARP协议（ARP是一种用以解析地址的协议，根据通信方的IP就可以反查对应的MAC地址）主机发送信息时会将包含目标IP地址信息ARP请求广播到网络上所有的主机，并接受返回消息，以此确定目标的物理地址，找到目的的MAC地址
   4.链路层-（又名数据链路层、网络接口层）建立TCP连接
   把网络层交下来的IP数据添加首部和尾部，封装为MAC帧，根据目的MAC地址建立TCP连接（三次握手）
   d.服务端接收到请求消息后，进行对应操作，然后生成响应数据，发送给网络进程。
   e.网络进程接收到服务器返回的响应数据后，先解析响应头信息，判断状态码是否为重定向（3xx),如果是，则取响应头中Location字段，重新发起请求。
   如状态码为200，表示请求成功，可以继续处理请求。
   f.如果状态码为200，浏览器主进程会根据响应头中的Content-Type字段做出响应对策，如果此字段的值为application/octet-stream，则启动下载流程。
   如果Content-Type为text/html，则启动渲染流程。

3.渲染进程

a.主线程GUI：负责解析dom结构
b.js引擎线程：负责执行js代码，会阻塞主进程。
c.合成线程：分组，合成，并把视口附近图块提交给光栅化线程。
d.多个光栅化线程：生成位图，即页面需要的每个像素点的颜色值（我们看到的页面其实就是每个像素点的颜色）

下面来分析以下流程：
渲染进程开始接受到数据的时候，为了提高效率，会先预扫描接收到的数据，如果发现有需要加载资源的标签（img,link,外部script等），就先告诉浏览器主进程，先去下载，这个过程叫预解析,这个任务交出去后，就继续做自己本职工作,
1.解析html文件 -当主线程解析html文件时，会碰到三种类型数据：html标签，css代码，js代码。
html标签：对于普通的html标签，会生成Dom树(标签节点的结构树，是浏览器的内置对象，会有一些内置方法和属性)。
**css样式：**对于css代码，会根据css的样式选择器构建cssDom树,并对样式进行计算(rem，em转换为px，没有定义样式的提供默认样式），生成computedStyle。
如果遇到的是css外部链接，如果从预解析开始还没下载完，则继续下载，不会阻塞解析。
**js代码：**对于js代码，会先判断js代码前的css有没有解析完（包括外部css的下载），如果没有则等待css代码下载完并解析完毕，然后再执行js代码。js执行期间阻塞解析。所以步骤是这样：
遇到js -> 阻塞dom树构建 -> css下载 -> css解析->js执行->继续构建dom树
**js链接：**对于js的链接，如果标签上没有设置异步标志（async/defer),则和普通的js代码一样，下载也会阻塞dom解析，也需要等css下载解析完，但是css下载不会阻塞js下载，步骤如下：
遇到js链接(无异步标签) -> 阻塞dom树构建 -> css下载（同时js下载） -> css解析->js执行->继续构建dom树
如果有异步标签，则下载不阻塞dom树构建，async文件下载完，立即执行。defer文件下载完，等html解析完，按加载顺序执行。步骤如下：
遇到js链接(async) ->下载js（不影响dom构建） -> js下载完毕 -> 立即执行js（走普通js代码流程）
遇到js链接(defer) ->下载js（不影响dom构建） -> js下载完毕 -> 等html解析完毕 -> 按顺序执行js
2.等dom树和computedStyle都构建完毕后(要都构建完毕), 构建布局树layoutTree,布局树包含每个节点的位置坐标和盒模型的大小，并且剔除了隐藏的节点（样式设置了display:none的节点)。
3.等布局树layoutTree构建完毕后，我们已经知道了页面上要显示的每个节点的大小，位置和样式。继续来主线程会对节点进行分层，通过遍历layoutTree构建图层树layerTree。哪些节点会被分为一层呢？分为两种情况：
拥有层叠上下文（详解层叠上下文：深入理解CSS中的层叠上下文和层叠顺序 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)）属性的元素会被单独提升为一层,包含设置了z-index，transform，will-change，filter，opacity<1,flex子元素等等。
需要裁剪的地方会被分为一层，即元素的大小被限制，而内容超出元素大小，内容被裁剪。
4.图层树layerTree被创建后，会为每一个图层创建绘制指令列表，可以再浏览器调试窗口的layers标签下查看分层和指令列表信息。渲染进程的主线程把绘制指令生成后，并不执行，而是转交给合成线程。
5.合成线程先把图层分为图块(大小通常为256256/512512)，然后把浏览器用户视口附近的图块优先交给栅格化线程来生成位图。
栅格化的最小执行单位是图块，即最少要把一个图块栅格化。栅格化的过程通常会用GPU执行，就是说栅格化线程会把绘制图块的指令发送给GPU，然后GPU生成图块的位图（像素点的颜色值），存在GPU内存。
6.当视口附近所有图块栅格化完毕后，合成线程发送DrawQuad指令给浏览器主进程，浏览器主进程把页面的内容显示在屏幕上。

V8引擎

V8执行一段代码的流程

1.生成AST（抽象语法树）和执行上下文

A.词法分析：字符串形式的代码转换为标记（token）序列的过程。
这里的token是一个字符串，是构成源代码的最小单位，类似于英语中单词，词法分析也可以理解成 将英文字母组合成单词的过程 。
词法分析过程中不会关心单词之间的关系。比如：词法分析过程中能够将括号标记成token，但并不会校验括号是否匹配。
JavaScript中的token主要包含以下几种：

以下是const a = ‘hello world’经过esprima词法分析后生成的tokens

B.语法分析
语法分析是将词法分析产生的token按照某种给定的形式文法转换成AST的过程。也就是 把单词组合成句子的过程 。
经过词法分析和语法分析，生成了AST
C.生成执行上下文
包括：变量环境、词法环境、外部环境、this

2.生成字节码

3.执行代码

4.垃圾回收机制

标记空间中活动对象和非活动对象。所谓活动对象，就是还在使用的对象；非活动对象，就是可以回收的对象
回收非活动对象所占据的内存。其实就是在所有的标记完成后，统一清理内存中所有被标记为可回收的对象
内存整理。当内存中中出现大量内存碎片（即不连续的内存空间），需要整理这些内存碎片