浏览器原理

浏览器线程和进程

1. 打开了1个页面，为什么有4个进程
   单线程，按照顺序一一完成。
   多线程，可以先并行执行，多个任务，然后执行汇总工作。
2. 线程是不能单独存在的，它是由进程来启动和管理。
3. 一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该 程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的 一个运行环境叫进程。
4. 线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率
5. 线程之间共享进程中的数据，多线程计算的值，共享给后续线程打印出来。
6. 当一个进程关闭之后，操作系统会回收进程所占用的内存。
7. 进程之间的内容相互隔离。
8. 2007 年之前，市面上浏览器都是单进程的，不稳定、不流畅和不安全。
9. 最新的 Chrome 浏览器包括:1 个浏览器(Browser)主进程、1 个 GPU 进程、1 个网络(NetWork)进程、多个渲染进程和多个插件进程。
   1. 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
   2. 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页， 排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会 为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
   3. GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷 是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘 制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
   4. 网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面 的，直至最近才独立出来，成为一个单独的进程。
   5. 插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保 证插件进程崩溃不会对浏览器和页面造成影响。
10. 仅仅打开了 1 个页面，为什么 有 4 个进程?因为打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个;如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。
11. 不过凡事都有两面性，虽然多进程模型提升了浏览器的稳定性、流畅性和安全性，但同样不 可避免地带来了一些问题:
    1. 更高的资源占用。因为每个进程都会包含公共基础结构的副本(如 JavaScript 运行环 境)，这就意味着浏览器会消耗更多的内存资源。
    2. 更复杂的体系架构。浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已 经很难适应新的需求了。

TCP协议:如何保证页面文件能被完整送达浏览器?

1. 在衡量 Web 页面性能的时候有一个重要的指标叫“FP(First Paint)”，是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多 的 PV、更高的参与度，以及更高的转化率。那什么影响 FP 指标呢?其中一个重要的因素 是网络加载速度。
2. 不管你是使用 HTTP，还是使用 WebSocket，它们都是基于 TCP/IP 的。
3. 计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求 信息。
4. IP 是非常底层的协议，只负责把数据包传送到对方电脑，但是对方电脑并不知道把数据包 交给哪个程序，是交给浏览器还是交给王者荣耀?因此，需要基于 IP 之上开发能和应用打 交道的协议，最常见的是“用户数据包协议(User Datagram Protocol)”，简称UDP。
5. UDP 中一个最重要的信息是端口号，端口号其实就是一个数字，每个想访问网络的程序都 需要绑定一个端口号。通过端口号 UDP 就能把指定的数据包发送给指定的程序了，所以IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的 程序。和 IP 头一样，端口号会被装进 UDP 头里面，UDP 头再和原始数据包合并组成新的 UDP 数据包。UDP 头中除了目的端口，还有源端口号等信息。
6. 在使用 UDP 发送数据时，有各种因素会导致数据包出错，虽然 UDP 可以校验数据是否正 确，但是对于错误的数据包，UDP 并不提供重发机制，只是丢弃当前的包，而且 UDP 在 发送之后也无法知道是否能达到目的地。
7. 虽说UDP 不能保证数据可靠性，但是传输速度却非常快，所以 UDP 会应用在一些关注速 度、但不那么严格要求数据完整性的领域，如在线视频、互动游戏等。
8. 对于浏览器请求，或者邮件这类要求数据传输可靠性(reliability)的应用，如果使用 UDP
   来传输会存在两个问题: 数据包在传输过程中容易丢失;大文件会被拆分成很多小的数据包来传输，这些小的数据包会经过不同的路由，并在不同 的时间到达接收端，而 UDP 协议并不知道如何组装这些数据包，从而把这些数据包还原 成完整的文件。
9. 基于这两个问题，我们引入 TCP 了。TCP(Transmission Control Protocol，传输控制 协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。相对于 UDP，TCP 有 下面两个特点:
   对于数据包丢失的情况，TCP 提供重传机制;
   TCP 引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。TCP 单个数据包的传输流 程和 UDP 流程差不多，不同的地方在于，通过 TCP 头的信息保证了一块大的数据传输的 完整性。
10. 下面我们再看下完整的 TCP 连接过程，通过这个过程你可以明白 TCP 是如何保证重传机制 和数据包的排序功能的。三次握手，四次挥手
11. IP 负责把数据包送达目的主机。
    UDP 负责把数据包送达具体应用。
    而 TCP 保证了数据完整地传输，它的连接可分为三个阶段:建立连接、传输数据和断开 连接。

HTTP请求流程:为什么很多站点第二次打开速度会很快?

1. 第一步浏览器会请求 DNS 返回域名对应的 IP。当 然浏览器还提供了DNS 数据缓存服务，如果某个域名已经解析过了，那么浏览器会缓存解 析的结果，以供下次查询时直接使用，这样也会减少一次网络请求。拿到 IP 之后，接下来就需要获取端口号了。通常情况下，如果 URL 没有特别指明端口 号，那么 HTTP 协议默认是 80 端口。
2. 现在已经把端口和 IP 地址都准备好了，那么下一步是不是可以建立 TCP 连接了呢?
   答案依然是“不行”。Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接， 如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至 进行中的请求完成。当然，如果当前请求数量少于 6，会直接进入下一步，建立 TCP 连接。
3. 排队等待结束之后，终于可以快乐地和服务器握手了，在 HTTP 工作开始之前，浏览器通 过 TCP 与服务器建立连接。

渲染流程(上):HTML、CSS和JavaScript，是如何变成页 面的?

1. 因为浏览器无法直接理解和使用 HTML，所以需要将HTML 转换为浏览器能够理解的结构——DOM 树。
2. 控制台上输入document，可以查看dom树
3. DOM 和 HTML 内容几乎是一样的，但 是和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修 改其内容。
4. document.getElementsByTagName("p")[0].innerText = "black"获取dom
5. 样式（link引入，style内敛，style标签内）
6. 和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当渲染引擎接 收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构—— styleSheets。
7. 为了加深理解，你可以在 Chrome 控制台中查看其结构，只需要在控制台中输入 document.styleSheets
8. 接下来就要对其进行属性值的标准化操作。
9. CSS 文本中有很多属性值，如 2em、blue、bold，这些类型数值不容易 被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过 程就是属性值标准化。
10. 2em 被解析成了 32px，red 被解析成了 rgb(255,0,0)，bold 被解析成 了 700…
11. 现在样式的属性已被标准化了，接下来就需要计算 DOM 树中每个节点的样式属性了，如何计算呢?这就涉及到 CSS 的继承规则和层叠规则了。CSS 继承就是每个 DOM 节点都包含有父节点的样式。
12. 在浏览器的调试内，可以看到一个dom，他的样式继承于哪里。
13. UserAgent 样式， 它是浏览器提供的一组默认样式，如果你不提供任何样式，默认使用的就是 UserAgent 样式。
14. 层叠是 CSS 的一个基本特征，它是一个定义了 如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称“层叠样式 表”正是强调了这一点。
15. 如果你想了解每个 DOM 元素最终的计算样式，可以打开 Chrome 的“开发者工具”，选 择第一个“element”标签，然后再选择“Computed”子标签。
16. 计算出 DOM 树中可见元素的几何位 置，我们把这个计算过程叫做布局。
17. 渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）
18. 打开 Chrome 的“开发者工具”，选择“Layers”标签，选择“document”层，浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。
19. 绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。
20. 当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合
    成线程
21. 当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合
    成线程，在有些情况下，有的图层可以很大，比如有的页面你使用滚动条要滚动好久才能滚动到底部，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。基于这个原因，合成线程会将图层划分为图块（tile），这些图块的大小通常是256x256或者 512x512
22. 然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的，