从URL到页面展示，中间发生了什么

文章参考：juejin.cn/post/699018…

大掌柜海棠依旧的主页：juejin.cn/user/412502…

简要总结

1. 用户输入URL：

   • 用户在浏览器地址栏输入关键词或URL。
   • 浏览器判断输入内容是搜索内容还是URL请求。
   • 如果是URL，浏览器会补全协议（如http://或https://）形成完整的URL。

2. 浏览器构建请求：

   • 浏览器进程构建请求行信息，并通过进程间通信（IPC）将URL请求发送给网络进程。

3. 查找缓存：

   • 网络进程首先检查本地是否有缓存的资源。
   • 如果有缓存资源，直接返回给浏览器进程；如果没有，进入网络请求流程。

4. DNS解析和TLS连接：

   • 进行DNS解析以获取请求域名的服务器IP地址。
   • 如果是HTTPS请求，还需要建立TLS连接。

5. 建立TCP连接：

   • 使用IP地址和服务器建立TCP连接，这个过程通常涉及三次握手。

6. 发起HTTP请求：

   • 浏览器构建HTTP请求，包括请求行、请求头等信息，并发送给服务器。

7. 服务器处理请求：

   • 服务器接收到HTTP请求后，进行相应的处理。
   • 服务器生成响应数据，包括响应行、响应头和响应体。

8. 处理响应：

   • 浏览器接收到服务器的响应后，根据响应头信息进行处理。
   • 如果响应头指示重定向，浏览器会发起新的HTTP请求。
   • 如果响应体是HTML，浏览器会进一步处理并渲染页面。

9. 页面渲染：

   • 浏览器为页面分配渲染进程。
   • 渲染进程解析HTML，构建DOM树。
   • 渲染进程解析CSS，构建CSSOM树。
   • 将DOM和CSSOM合并生成渲染树。
   • 根据渲染树进行布局和绘制，最终将页面展示给用户。

   文章参考：

   • 《HTML、CSS和JavaScript，是如何变成页面的？》

   • 《JavaScript和css是如何影响DOM树构建和渲染的？》

10. 断开连接：

    • 一般情况下，服务器发送完响应数据后会关闭TCP连接。
    • 如果使用了Connection: Keep-Alive，则TCP连接会保持活跃，以便后续请求复用。

整个过程中，浏览器的不同进程负责不同的任务，网络进程负责网络通信，渲染进程负责页面的渲染和显示，而浏览器进程则负责用户界面和进程间的协调工作。这个过程涉及多个网络协议和技术，确保了用户能够顺畅地浏览网页。