静心
github icon

宏观视角下的浏览器

author iconYYtimer icon大约 22 分钟

宏观视角下的浏览器

1.打开一个页面为什么至少需要有4个进程

  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. 插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

仅仅打开了 1 个页面，为什么有 4 个进程？因为打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程，共 4 个；如果打开的页面有运行插件的话，还需要再加上 1 个插件进程。

问单个页面卡死最终崩溃导致所有页面崩溃的

是这样的，通常情况下是一个页面使用一个进程，但是，有一种情况，叫"同一站点(same-site)"，具体地讲，我们将“同一站点”定义为根域名（例如，geekbang.org）加上协议（例如，https:// 或者http://），还包含了该根域名下的所有子域名和不同的端口，比如下面这三个：
https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080
都是属于同一站点，因为它们的协议都是https，而根域名也都是geekbang.org。你也许了解同源策略，但是同一站点和同源策略还是存在一些不同地方，在这里你需要了解它们不是同一件事就行了。

Chrome的默认策略是，每个标签对应一个渲染进程。但是如果从一个页面打开了新页面，而新页面和当前页面属于同一站点时，那么新页面会复用父页面的渲染进程。官方把这个默认策略叫process-per-site-instance。

直白的讲，就是如果几个页面符合同一站点，那么他们将被分配到一个渲染进程里面去。

所以，这种情况下，一个页面崩溃了，会导致同一站点的页面同时崩溃，因为他们使用了同一个渲染进程。

为什么要让他们跑在一个进程里面呢？

因为在一个渲染进程里面，他们就会共享JS的执行环境，也就是说A页面可以直接在B页面中执行脚本。因为是同一家的站点，所以是有这个需求的。

问 所有的iframe标签都会创建一个新的渲染进程吗？

iframe没有单独标签，是潜入在其它页面里面的，比如一个页面嵌入了三个不同域名的iframe，那么这个页面就会拥有四个渲染进程

2.TCP协议(她是如何工作的)

ip :把数据包送达目的主机

计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。

如果要想把一个数据包从主机 A 发送给主机 B，那么在传输之前，数据包上会被附加上主机 B 的 IP 地址信息，这样在传输过程中才能正确寻址。额外地，数据包上还会附加上主机 A 本身的 IP 地址，有了这些信息主机 B 才可以回复信息给主机 A。这些附加的信息会被装进一个叫 IP 头的数据结构里。IP 头是 IP 数据包开头的信息，包含 IP 版本、源 IP 地址、目标 IP 地址、生存时间等信息。
  • 上层将含有“极客时间”的数据包交给网络层；
  • 网络层再将 IP 头附加到数据包上，组成新的 IP 数据包，并交给底层；
  • 底层通过物理网络将数据包传输给主机 B；
  • 数据包被传输到主机 B 的网络层，在这里主机 B 拆开数据包的 IP 头信息，并将拆开来的数据部分交给上层；
  • 最终，含有“极客时间”信息的数据包就到达了主机 B 的上层了

image-20220408110748484

UDP: 把数据包送达应用程序

IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序

UDP 不能保证数据可靠性，但是传输速度却非常快，

  • 上层将含有“极客时间”的数据包交给传输层；
  • 传输层会在数据包前面附加上 UDP 头，组成新的 UDP 数据包，再将新的 UDP 数据包交给网络层；
  • 网络层再将 IP 头附加到数据包上，组成新的 IP 数据包，并交给底层；
  • 数据包被传输到主机 B 的网络层，在这里主机 B 拆开 IP 头信息，并将拆开来的数据部分交给传输层；
  • 在传输层，数据包中的 UDP 头会被拆开，并根据 UDP 中所提供的端口号，把数据部分交给上层的应用程序；
  • 最终，含有“极客时间”信息的数据包就旅行到了主机 B 上层应用程序这里

image-20220408111135387

TCP把数据完整地送达应用程序

TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议

  • 对于数据包丢失的情况，TCP 提供重传机制；
  • TCP 引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。

image-20220408112919282

TCP生命周期

  • 首先，建立连接阶段。这个阶段是通过“三次握手”来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。所谓三次握手，是指在建立一个 TCP 连接时，客户端和服务器总共要发送三个数据包以确认连接的建立。
  • 其次，传输数据阶段。在该阶段，接收端需要对每个数据包进行确认操作，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。同样，一个大的文件在传输过程中会被拆分成很多小的数据包，这些数据包到达接收端后，接收端会按照 TCP 头中的序号为其排序，从而保证组成完整的数据。
  • 最后，断开连接阶段。数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。

问 你怎么理解 HTTP 和 TCP 的关系?

HTTP协议和TCP协议都是TCP/IP协议簇的子集。

HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。

请求方要发送的数据包，在应用层加上HTTP头以后会交给传输层的TCP协议处理，应答方接收到的数据包，在传输层拆掉TCP头以后交给应用层的HTTP协议处理。建立 TCP 连接后会顺序收发数据，请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。

问 浏览器可以同时打开多个页签，他们端口一样吗？如果一样，数据怎么知道去哪个页签？

 端口一样的，网络进程知道每个tcp链接所对应的标签是那个，所以接收到数据后，会把数据分发给对应的渲染进程。

问 TCP传送数据时 浏览器端就做渲染处理了么？如果前面数据包丢了 后面数据包先来是要等么？类似的那种实时渲染怎么处理？针对数据包的顺序性？

接收到http响应头中的content-type类型时就开始准备渲染进程了，响应体数据一旦接受到便开始做DOM解析了！基于http不用担心数据包丢失的问题，因为丢包和重传都是在tcp层解决的。http能保证数据按照顺序接收的（也就是说，从tcp到http的数据就已经是完整的了，即便是实时渲染，如果发生丢包也得在重传后才能开始渲染）

HTTP的请求流程

问 为什么很多站点第二次打开速度会很快?

DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的

缓存流程

  • 当服务器返回 HTTP 响应头给浏览器时，浏览器是通过响应头中的 Cache-Control 字段来设置是否缓存该资源。

  • 通常需要设置过期时间

    Cache-Control:Max-age=2000

    • 没有过期: 会再次请求该资源，会直接返回缓存中的资源给浏览器。

    • 过期: 览器则会继续发起网络请求，并且在 HTTP 请求头中带上：

      If-None-Match:"4f80f-13c-3a1xb12a"

  • 浏览器收到请求后根据if-none-match来判断是否有更新

    • 没有更新: 就返回 304 状态码，相当于服务器告诉浏览器：“这个缓存可以继续使用，这次就不重复发送数据给你了。
    • 有更新: 服务器就直接返回最新资源给浏览器。

5fc2f88a04ee0fc41a808f3481287408

问 登录状态是如何保持的呢?

  • 输入用户名密码,Post请求提交用户登录信息.

  • 服务器,查询后台,验证信息.正确的情况下会生成一段表示用户身份的字符串，并把该字符串写到响应头的 Set-Cookie 字段里，如下所示，然后把响应头发送给浏览器。

    Set-Cookie: UID=3431uad;

  • 浏览器收到后,解析响应头,看看有没有set-cookie字段.有的话就把UID直接保存到本地.

  • 用户再次访问, 发送HTTP请求,请求之前会读取Cookie数据, 并且把数据写进 请求头里的Cookie字段里,浏览器发送请求

    Cookie: UID=3431uad;

  • 服务器收到HTTP请求, 查找请求头的Cookie字段,当查到UId=xxx 时候, 服务器查询后台判断用户登录状态, 然后生成含有该用户信息的页面数据, 并把生成的数据发送给浏览器.

  • 浏览器接收数据, 正确展示登录状态信息.

简单地说，如果服务器端发送的响应头内有 Set-Cookie 的字段，那么浏览器就会将该字段的内容保持到本地。当下次客户端再往该服务器发送请求时，客户端会自动在请求头中加入 Cookie 值后再发送出去。服务器端发现客户端发送过来的 Cookie 后，会去检查究竟是从哪一个客户端发来的连接请求，然后对比服务器上的记录，最后得到该用户的状态信息。

问 如果一个页面的网络加载时间过久，你是如何分析卡在哪个阶段的？

网络丢包,丢包后需要不停的重传.

cookie是不安全的，比如黑客可以通过一些手段插入一些脚本到你的页面里面（具体一些途径我们浏览器安全篇再讲），通过脚本获取到你的cookie数据，然后就可以利用cookie做一些坏事了。  

当然也有一些方法规避，常用的一个是将部分cookie设置成httponly的属性，设置了httponly属性后cookie，就无法通过js脚本来读取了，只是在发送http请求时候会被带上！

问 浏览器刷新操作，ctrl+F5和F5有什么区别?

一个是强制刷新，也就是资源都走网络。
一个是正常处理流程。

ctrl+F5 强制刷新 http 请求会少了 if-none-match 字段，所以不会协商缓存，将直接强制从服务器请求资源；f5 则会进行协商缓存

问 请问老师http的keep alive和http2中的信道服用有什么区别呢?

一个http中的keep-alive是排队请求，也就是一个http请求完成之后才能继续请求下一个，而http2中请求是并发的，可以同时处理很多请求！

导航流程 在浏览器里，从输入 URL 到页面展示，这中间发生了什么？

浏览器进程

浏览器进程主要负责用户交互、子进程管理和文件储存等功能。

网络进程

网络进程是面向渲染进程和浏览器进程等提供网络下载功能。

渲染进程

渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。

    1. 用户输入URL，浏览器会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜 索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL

    1. 用户输入完内容，按下回车键，浏览器导航栏显示loading状态，但是页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得

    2. 浏览器进程浏览器构建请求行信息，会通过进程间通信（IPC）将URL请求发送给网络进程 GET /index.html HTTP1.1

    3. 网络进程获取到URL，先去本地缓存中查找是否有缓存文件，如果有，拦截请求，直接200返回；否则，进入网络请求过程

    4. 网络进程请求DNS返回域名对应的IP和端口号，如果之前DNS数据缓存服务缓存过当前域名信息，就会直接返回缓存信息；否则，发起请求获取根据域名解析出来的IP和端口号，如果没有端口号，http默认80，https默认443。如果是https请求，还需要建立TLS连接。

    5. Chrome 有个机制，同一个域名同时最多只能建立 6 个TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。如果当前请求数量少于6个，会直接建立TCP连接。

    6. TCP三次握手建立连接，http请求加上TCP头部——包括源端口号、目的程序端口号和用于校验数据完整性的序号，向下传输

    7. 网络层在数据包上加上IP头部——包括源IP地址和目的IP地址，继续向下传输到底层

    8. 底层通过物理网络传输给目的服务器主机

    9. 目的服务器主机网络层接收到数据包，解析出IP头部，识别出数据部分，将解开的数据包向上传输到传输层

    10. 目的服务器主机传输层获取到数据包，解析出TCP头部，识别端口，将解开的数据包向上传输到应用层

    11. 应用层HTTP解析请求头和请求体，如果需要重定向，HTTP直接返回HTTP响应数据的状态code301或者302，同时在请求头的Location字段中附上重定向地址，浏览器会根据code和Location进行重定向操作；如果不是重定向，首先服务器会根据 请求头中的If-None-Match 的值来判断请求的资源是否被更新，如果没有更新，就返回304状态码，相当于告诉浏览器之前的缓存还可以使用，就不返回新数据了；否则，返回新数据，200的状态码，并且如果想要浏览器缓存数据的话，就在相应头中加入字段： Cache-Control:Max-age=2000 响应数据又顺着应用层——传输层——网络层——网络层——传输层——应用层的顺序返回到网络进程

    12. 数据传输完成，TCP四次挥手断开连接。如果，浏览器或者服务器在HTTP头部加上如下信息，TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间，提示资源加载速度 Connection:Keep-Alive

    13. 网络进程将获取到的数据包进行解析，根据响应头中的Content-type来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器，该导航流程结束，不再进行；如果是text/html类型，就通知浏览器进程获取到文档准备渲染

    14. 浏览器进程获取到通知，根据当前页面B是否是从页面A打开的并且和页面A是否是同一个站点（根域名和协议一样就被认为是同一个站点），如果满足上述条件，就复用之前网页的进程，否则，新创建一个单独的渲染进程

    15. 浏览器会发出“提交文档”的消息给渲染进程，渲染进程收到消息后，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程

    16. 浏览器收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新web页面，此时的web页面是空白页

    17. 渲染进程对文档进行页面解析和子资源加载，HTML 通过HTM 解析器转成DOM Tree（二叉树类似结构的东西），CSS按照CSS 规则和CSS解释器转成CSSOM TREE，两个tree结合，形成render tree（不包含HTML的具体元素和元素要画的具体位置），通过Layout可以计算出每个元素具体的宽高颜色位置，结合起来，开始绘制，最后显示在屏幕中新页面显示出来

    ```apl
简洁版描述

1:浏览器进程发出URL请求给网络进程

2:网络进程接收到URL请求之后，便发起网络请求，然后服务器返回HTTP数据到网络进程，网络进程解析HTTP出来响应头数据，并将其转发给浏览器进程

3:浏览器进程接收到网络进程的响应头数据之后，发送CommitNavigation消息到渲染进程，发送CommitNavigation时会携带响应头、等基本信息。

4:渲染进程接收到CommitNavigation消息之后，便开始准备接收HTML数据，接收数据的方式是直接和网络进程建立数据管道

5:最后渲染进程会像浏览器进程“确认提交”，这是告诉浏览器进程，说我已经准备好接受和解析页面数据了

6:最后浏览器进程更新页面状态
```

多个页面会同时运行在一个渲染进程中情况

具体地讲，我们将“同一站点”定义为根域名（例如，geekbang.org）加上协议（例如，https:// 或者 http://），还包含了该根域名下的所有子域名和不同的端口，比如下面这三个：

https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080

它们都是属于同一站点，因为它们的协议都是 HTTPS，而且根域名也都是 geekbang.org。

问 有些情况同一站点,同一协议,同一根域名为啥有不同的渲染进程?

这个涉及到安全了，要完整解释起来就话长了，我长话短说，先看阿里这个网站的连接是下面这种形式：

<a target="_blank" rel="noopener noreferrer" class="hover" href="https://linkmarket.aliyun.com/hardware_store?spm=a2c3t.11219538.iot-navBar.62.4b5a51e7u2sXtw" data-spm-anchor-id="a2c3t.11219538.iot-navBar.62">硬件商城</a>

使用noopener noreferrer就是告诉浏览器，新打开的子窗口不需要访问父窗口的任何内容，这是为了防止一些钓鱼网站窃取父窗口的信息。

浏览器在打开新页面时，解析到含有noopener noreferrer时，就知道他们不需要共享页面内容，所以这时候浏览器就会让新链接在一个新页面中打开了

渲染流程,html,css, javascript是如何变成页面的?

什么是栅格化操作: 绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的

  • 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构

  • 渲染引擎将 CSS样式表转化为浏览器可以理解的 styleSheets，计算出DOM节点的样式。

  • 创建布局树，并计算元素的布局信息。(layout过程)

  • 对布局树进行分层，并生成分层树。(layer过程)

  • 为每个图层生成绘制列表，并将其提交到合成线程, 进行栅格化操作。

  • 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。(GPU操作了 其页面内容绘制到内存中，最后再将内存显示在屏幕上 )

  • 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

  • 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上

a8d954cd8e4722ee03d14afaa14c3987

问 重绘为什么开销很大?

image-20220409121241304

浏览器会触发重新布局，解析之后的一系列子阶段

问 重排为什么开销比较小?

image-20220409121706775

重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。

问 既不要布局也不要绘制的属性，会发生什么变化呢?(也就是合成)

image-20220409121811671

因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率

问 手机端开发，body 被内容撑开了，超过一屏，在滑动的过程中会不会触发重排，为什么？

现代浏览器做了优化，把滚动操作交给了合成线程来处理，也就是说滚动的内容会被当成一个单独的图层，发生滚动的事件的时候，图层直接由合成线程来生成，也就是说这种情况下没有占用主线程，所以通常情况下不会产生重排和重回操作，只是简单合成就可以了，这样效率是最高的！

为什么说“通常”呢？ 这是因为目前渲染流程还是很复杂的，在滚动页面时，有些情况下，如果合成线程搞不定的，那么还要交给主线程去处理，这时候就涉及到重拍了，不过技术是往前发展的，渲染流程会变得越来约简单高效！

问 如何去学习这些很深层次的信息?

主要几个途径：
1:chromium源码
2:chromium源码里面的一些注释和文档
3:还有油管上blinkon上有一些深入讲解内核的视频
目前基本没有系统介绍浏览器知识的文档，而且网上很多文档还是比较早期的，很多内容都不太适合新版的浏览器了。
这里将浏览器知识和前端系统下结合起来是一件工作量非常大的事。

如果感觉到复杂和无序，那一定是哪里错了

傻瓜都能写出计算机可以理解的代码。唯有能写出人类容易理解的代码的，才是优秀的程序员。
Copyright © 2022 YY