Hulk's Blog

文章
笔记

经典题目:从输入URL到页面呈现发生了什么

8/18/2021 • ☕️ 2 min read

chrome浏览器是多进程架构,最上层的是浏览器进程(标签页外面的一切都由浏览器进程处理),然后是实用程序进程、渲染进程、GPU进程、插件进程。

所以,当我们在地址栏输入aminer.cn

导航

  • 浏览器进程下面的UI线程去绘制浏览器的按钮和地址栏

  • UI线程会判断用户输入的是查询字符串还是URL

  • 如果输入的是URL,UI线程会通知网络线程发起网络调用,获取网站内容(此时会先检查强缓存,如果命中直接返回网站内容)

  • 网络线程进行DNS查询(如果之前解析过这个域名,则直接命中缓存)、建立TLS连接(对于HTTPS)(如果返回301此时网络线程会跟UI线程沟通,再对另一个URL发送请求)

  • 通过三次握手建立 TCP 连接(即总共发送3个数据包确认已经建立连接)建立客户端和服务器之间的连接。然后进行数据包发送,接收方接收到数据包后必须要向发送方确认,否则会吃重复发送数据包,最后通过四次挥手断开链接

  • 构建请求行、请求头和请求体,发送 HTTP 请求

  • 收到响应数据,网络线程会检查接收到的前几个字节。响应的Content-Type头部应该包含数据类型,如果没有这个字段,则需要MIME类型嗅探

  • 如果是一个zip文件或其他文件,那就意味着是一个下载请求,需要把数据传给下载管理器。

  • 如果响应是HTML文件,要进行“安全浏览”检查,所有查检完毕,网络线程确认浏览器可以导航到用户请求的网站,于是会通知UI线程数据已经准备好了。UI线程会联系渲染器进程渲染网页。

  • 提交导航。数据和渲染器进程都有了,就可以通过IPC从浏览器进程向渲染器进程提交导航。渲染器进程也会同时接收到不间断的HTML数据流。当浏览器进程收到渲染器进程的确认消息后,导航完成,文档加载阶段开始。

  • 此时,地址栏会更新,安全指示图标和网站设置UI也会反映新页面的信息。当前标签页面的会话历史会更新,后退/前进按钮起作用。为便于标签页/会话在关闭标签页或窗口后恢复,会话历史会写入磁盘。

  • 提交导航之后,渲染器进程将负责加载资源和渲染页面(具体细节后面介绍)。而在“完成”渲染后(在所有iframe中的onload事件触发且执行完成后),渲染器进程会通过IPC给浏览器进程发送一个消息。此时,UI线程停止标签页上的旋转图标。

渲染

  • 构建DOM。渲染器进程收到导航的提交消息后,开始接收HTML,其主线程开始解析文本字符串(HTML),并将它转换为DOM(Document Object Model,文档对象模型)。

  • 加载子资源。网站都会用到图片、CSS和JavaScript等外部资源。浏览器需要从缓存或网络加载这些文件。主线程可以在解析并构建DOM的过程中发现一个加载一个,但这样效率太低。为此,Chrome会在解析同时并发运行“预加载扫描器”,当发现HTML文档中有时,预加载扫描器会将请求提交给浏览器进程中的网络线程。

  • JavaScript可能阻塞解析。如果HTML解析器碰到