问题-概况篇

2-问题-概况篇

回溯

首先回顾一下我们的问题:

「在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么?」

我们根据前文的两篇文章,可以知道整个浏览器中的主进程是Browser Process,而进程中会有不同的线程,所以该进程将不同的任务交给不同的线程处理:

  • UI thread:控制浏览器上的按钮及输入框
  • network thread:处理网络请求,从网上获取数据
  • storage thread:控制文件等的访问

解决问题

回到问题本身,这样的操作在浏览器看来可以分为以下几步:

1. 处理输入

UI thread 需要判断用户输入的是 URL 还是 query。

2. 开始导航

当用户点击回车,UI thread 通知 Network thread 获取网页内容,同时控制 tab 上的 spinner 展示(逆时针),表示正在请求页面。

Network thread 会按照顺序查询 DNS,随后为请求简历 TLS (傳輸層安全性協定:Transport Layer Security)连接。

如果 Network thread 接收到了重定向的请求头如 301,Network thread 会通知 UI thread: 服务器要求重定向了,随后,另一个 URL 请求会被触发。

3. 读取响应

当请求响应回来,Network thread 会依据文档的 Content-type 及 MIME Type sniffing 判断响应内容的格式。

如果响应内容的格式是 HTML,下一步将会把对应的文档交给 Renderer process,如果是 zip文件或是其它文件,会把相关数据传输给下载管理器。

Safe Browsing 检查也会在此时触发,如果域名或是请求内容匹配到已知的恶意站点,Network thread 会展示一个警告页。此外 CORB 检测也会触发确保敏感数据不会被传递 Renderer process。

4. 查看渲染进程

当上述检查完成,Network thread 确信浏览器可以导航到请求的网页,Network thread 会通知 UI thread 数据已经准备好了,UI thread 会查找到一个 Renderer process进行网页的渲染。

由于网络请求获取响应需要时间,这里其实还存在着一个加速方案。当 UI thread 发送 URL 请求给 network thread 时,浏览器其实已经知道了将要导航到那个站点。UI thread 会并行的预先查找和启动一个渲染进程,如果一切正常,当 network thread 接收到数据时,渲染进程已经准备就绪了,但是如果遇到重定向,准备好的渲染进程也许就不可用了,这时候就需要重启一个新的渲染进程。

5. 确认导航

完成了上述过程,数据和渲染进行都是准备状态,Browser Process 会给 Renderer Process 发送 IPC 消息来确认导航,一旦 Browser Process 收到 renderer process 的渲染确认消息,导航过程结束,页面加载过程开始( UI thread 通知 tab 的 spinner 展示(顺时针))。

此时,地址栏会更新,展示出新页面的网页信息。history tab 会更新,可通过返回键返回导航来的页面,为了让关闭 tab 或者窗口后便于恢复,这些信息会存放在硬盘中。

6. 额外的步骤

导航被确认,Renderer Processs 会使用相关的资源将页面渲染出来。当 Renderer Process 渲染结束(即触发所以页面的onload事件),会发送 IPC 消息到 Browser Process,然后 UI thread 停止展示 tab 中的 spinner。

当然上面的流程只是网页首帧渲染完成,在此之后,客户端依旧可下载额外的资源渲染出新的视图。

以上就是浏览器对应我们问题的处理步骤了,是不是从以往回答更多侧重如何查询 DNS 的维度看到了自己的不足哩。

其实系列文章可以在这里结束咯,可总感觉还是将知识仅仅涉及表层(当然面试管够啦~)。所以问了自己一个问题:

Renderer Process 是如何将文档渲染出来的呢?

随便说一下:让我们前端工程师曾经头疼的不就是浏览器内核吗? (毕竟我做的第一个网站就是用 window XP系统运行的)而浏览器内核就是 Renderer Process!

注:部分图片引自参考文献

下一篇文章

浏览器内核-流程概况

转载于:https://juejin.im/post/5c6d3c3a6fb9a049a97a4a57

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值