¿Qué sucedió entre ingresar la URL y mostrar la página?

Estoy participando en el "Plan Nuggets·Starting"

prefacio

Hable sobre el proceso desde la introducción de la URL hasta la visualización de la página. Esta es una pregunta que se hace a menudo en las entrevistas. Esta pregunta puede examinar exhaustivamente el dominio de los conocimientos del solicitante. Implica una serie de conocimientos como red, sistema operativo y Web.

Tomando el navegador Chrome como ejemplo, el navegador Chrome actual tiene los siguientes procesos:

proceso del navegador . Es principalmente responsable de la visualización de la interfaz, la interacción del usuario, la gestión de subprocesos y proporciona almacenamiento y otras funciones.

Proceso de renderizado . La responsabilidad principal es analizar recursos como HTML, JavaScript, CSS e imágenes descargadas de Internet en páginas que se pueden mostrar e interactuar.

Proceso de GPU . De hecho, cuando se lanzó Chrome por primera vez, no había un proceso de GPU. La intención original de usar la GPU es lograr el efecto de CSS 3D, pero luego la página web y la interfaz de usuario de Chrome eligen usar la GPU para dibujar, lo que hace que la GPU sea un requisito común para los navegadores.

proceso de red . Es el principal responsable de cargar los recursos de red de la página. Antes se ejecutaba como un módulo en el proceso del navegador, y luego se independizó y se convirtió en un proceso separado.

proceso de complemento . Es el principal responsable del funcionamiento del complemento. Debido a que el complemento es fácil de fallar, debe aislarse a través del proceso del complemento para garantizar que el bloqueo del proceso del complemento no afecte el navegador. y la pagina

Después de comprender qué procesos tiene el navegador y sus respectivas responsabilidades, y combinar estos procesos, analicemos el proceso desde que se ingresa la URL hasta que se muestra la página.

1. Entrada del usuario

Si la entrada es contenido, la barra de direcciones utilizará el motor de búsqueda predeterminado del navegador para sintetizar una nueva URL con palabras clave de búsqueda.

Si la entrada es una URL, la barra de direcciones agregará el protocolo para sintetizar una URL completa.

2. Proceso de solicitud de URL

浏览器进程会通过进程间通信(IPC)把 URL 请求发送至网络进程,网络进程接收到 URL 请求后,会在这里发起真正的 URL 请求流程。那具体流程是怎样的呢?

网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源,那么直接返回资源给浏览器进程;如果在缓存中没有查找到资源,那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析,以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS,那么还需要建立 TLS 连接。

接下来就是利用 IP 地址和服务器建立 TCP 连接 (三次握手)。连接建立之后,浏览器端会构建请求行、请求头等信息,并把和该域名相关的 cookie 等数据附加到请求头中,然后向服务器发送构建的请求信息。

服务器接收到请求信息后,会根据请求信息生成响应数据(包括响应行、响应头和响应体等信息),并发给网络进程。等网络进程接收了响应行和响应头之后,就开始解析响应头的内容了。

Content-Type 是 HTTP 头中一个非常重要的字段, 它告诉浏览器服务器返回的响应体数据是什么类型,然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

如果 Content-Type 字段的值被浏览器判断为下载类型,那么该请求会被提交给浏览器的下载管理器,同时该 URL 请求的导航流程就此结束。但如果是 HTML,那么浏览器则会继续进行导航流程。

3. 准备渲染进程

如果 协议根域名 相同,则属于同一站点。

但如果从一个页面打开了另一个新页面,而新页面和当前页面属于同一站点的话,那么新页面会 复用 父页面的渲染进程。

渲染进程准备好之后,还不能立即进入文档解析状态,因为此时的文档数据还在网络进程中,并没有提交给渲染进程,所以下一步就进入了提交文档阶段。

4. 提交文档

所谓提交文档,就是指 浏览器进程网络进程 接收到的 HTML 数据提交给 渲染进程,具体流程是这样的:

首先当浏览器进程接收到网络进程的响应头数据之后,便向渲染进程发起“提交文档”的消息。

渲染进程接收到“提交文档”的消息后,会和网络进程建立传输数据的“管道”。

等文档数据传输完成之后,渲染进程会返回“确认提交”的消息给浏览器进程。

浏览器进程在收到“确认提交”的消息后,会更新浏览器界面状态,包括了安全状态、地址栏的 URL、前进后退的历史状态,并更新 Web 页面。

5. 渲染阶段

一旦文档被提交,渲染进程便开始页面解析和子资源加载。

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

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

创建 布局树,并计算元素的布局信息。

对布局树进行分层,并生成 分层树

为每个图层生成 绘制列表,并将其提交到合成线程。

合成线程将图层分成 图块,并在光栅化线程池中将图块转换成 位图

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

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

具体的渲染流程,大家可以参考这篇文章:HTML、CSS 和 JavaScript 是如何变成页面的?

最后

以上就是笔者对这一常考面试题的一些总结,对于其中的一些具体过程并没有详细地列举出来。如有不足欢迎大家在评论区指出......

Supongo que te gusta

Origin juejin.im/post/7202602022355779644
Recomendado
Clasificación