Web 浏览器是如何构成的(二)

Web Web Browser

创建时间:2020-02-02 06:12

字数:1.1k 阅读:

评论:

1. 处理请求
2. 开启导览 navigation
3. 读取Response
4. 寻找一个渲染的进程
5. 渲染页面
6. 渲染结束
7. 跳转到不同网站
Reference

上一篇文章我们一个看了进程以及线程是如何来处理一个浏览器的不同部分的，在本篇文章中，我们会一起研究下进程与线程之间是怎么进行交流，来最终展示出页面的。

本篇文章我们将聚焦于一个简单的应用场景:即用户在浏览器的输入框输入网址，回车。让我们看看浏览器是如何从互联网中拿出数据，渲染页面，最终展示出整个网页的。

正如第一讲中所说的那样，所有在tab之外的内容都是被浏览器进程来进行处理的。浏览器进程有多个线程来处理不同的事务:

UI线程
- 绘制所有的按钮
- 输入框
网络线程
- 解决网络通信问题
存储线程
- 控制对文件的访问

因此，当你在输入框输入网址的时候，请求会被浏览器进程进行处理。

1. 处理请求

首先浏览器要判断你输入的是个query还是个网址。因为在Chrome当中，输入框既可以用来直接进行搜索，也可以去到各个网站。因此UI 线程就需要做parsing，然后判断输入的属性 query/ url，然后将你送到搜索引擎还是到网址。

当你敲击Enter以后，UI 线程就会开始一个网络请求，去拿网站的内容，网络线程就会经由各种协议，DNS搜寻，创建TLS连接等。一些时候，网络线程会受到服务器的重定向header，比如HTTP301。这个时候网络线程就会通知UI线程请求重定向，然后另外一个URL请求会被创建出来。关于输入url以后都发生了什么，写过一篇博，比较详细 - 浏览器输入url以后都发生了什么

3. 读取Response

一旦得到返回结果的主体(body)，网络线程就会看字节流的前几个字节。Content-Type header会包含返回的数据类型的信息。而后需要看返回的是什么类型的文件，如果是html，那么就交给render进程去进行渲染，如果是zip等文件，那么就意味着这是个下载请求，因此需要将这个请求转到下载管理器处。

4. 寻找一个渲染的进程

在做过各种安全检查以后，网络线程会通知UI线程数据传输完毕，UI线程会去找一个渲染进程来对页面做渲染。

这里做的一个小优化是在发起请求获取要渲染的页面的同时，UI线程会尝试着提前去找一个渲染进程待命。

5. 渲染页面

现在数据和渲染进程都已经准备好了，一个进程间的通信信息(IPC)就会从浏览器进程发送到渲染进程，告知其可以开始渲染了。同时它也会通过数据流来传递数据，这样渲染进程就可以持续得到数据了。这个时候就开始逐渐加载页面。

与此同时的，地址栏会得到更新，安全提示，和网站设置UI等都会得到更新。Session的信息，也会更新。

6. 渲染结束

渲染结束以后，渲染进程会送一个IPC回到浏览器进程。这个时候UI
线程就会停止显示tab上那个表示加载的旋转小圈圈。

7. 跳转到不同网站

很类似于前面所叙述的过程，唯一不同的是在离开当前页面之前，如果开发者渲染了beforeunload事件，那么会先执行他，一般来说是像那种“你确定要离开当前页面”之类的信息。使用这个事件还是需要谨慎些的，首先技术角度上会让整个运行变慢，因为这个事件的运行和加载新页面需要线性执行；从产品角度上来说，这样的做法对于留存率的提升表现的作用也是有限的…

Reference

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 stone2paul@gmail.com