web性能优化-浏览器工作原理

要彻底了解web性能优化的问题，得搞清楚浏览器的工作原理。

我们需要了解，你在浏览器地址栏中输入url到页面展示的短短几秒中，浏览器究竟做了什么，才能了解到为什么我们口中所说的优化方案能够起到优化作用。

浏览器的多进程架构（以下的例子都是以chrome为例）

chrome由多个进程组成，每个进程都有自己的核心职责，每个进程又包含多个线程，一个进程内的多个线程也会协同工作，配合完成进程的职责。

说了这么多，还是来张图更直白：

进程（process）和线程（thread）

 

 当我们启动一个应用，计算机会创建一个进程，操作系统会为进程分配一部分内存，应用也会创建多个线程来辅助工作，这些线程可以共享这部分内存中的数据。如果应用被关闭，进程就会被终结，操作系统会释放相应的内存。

一个进程还可以要求操作系统生成另外一个进程来执行不同的任务，系统会为新的进程分配独立的内存，两个进程之间可以使用IPC (Inter Process Communication)进行通信。如果一个进程反应迟钝，重启该进程不会影响其他的进程。

这是chrome多进程：

有了这个基础，我们知道一个浏览器，可以是单进程多线程，也可以是多进程应用了。

这里我们来分析下chrome的多进程是怎么工作的

chrome主要进程

 

Chrome有一个主进程（Browser Process）用来协调浏览器的其他的进程。

Browser Procee:

• 负责包括地址栏，书签栏，前进后退等部分工作
• 负责处理浏览器的一些不可见的底层操作，比如网络请求和文件访问

Renderer Process：

• 负责一个网页内关于呈现的所有事情

Plugin Process：

• 负责控制一个网页所用的插件，如flash

GPU Process：

• 负责处理GPU相关的任务

 Utility Process：

• 负责工具相关的任务

 Chrome多进程的优缺点比较：

优点：

某一渲染进程出问题不会影响其他的进程

缺点：

由于不同进程不能共享内存，不同的进程常常需要包含相同的内用。

那么从地址栏输入发生了什么：

1. 处理输入

　　UI Thread 判断用户输入的是url还是query,开始显示spinner在地址栏

2.开始导航

　　当用户点击回车键，UI Thread通知 Network Thread获取页面内容

　　Network Thread会查询DNS，随后为请求建立TLS链接

3.去读响应

　　当请求返回时，network thread会一句Content-Type和MIME Typesniffing判断响应内容的格式

　　如果响应的内容是HTML，则把数据转给Renderer Process；

　　如果是Zip文件或者其他文件，则把数据传输给下载管理器

4.查找Renderer Procee

　　当上述所有完成后，network thread确认浏览器可以导航到请求网页，network thread会通知UI thread，UI Thread会查找到一个renderer process进行页面渲染

5.确认导航，Renderer Process开始渲染page。

6.额外的工作

　　当渲染结束，rederer process会发送IPC信号到Browser process，UI thread会停止tab中的spinner.

还是用一张图来表示：

 

 在这个过程中，我们需要优化的地方，主要考虑：

• dns是否通过缓存减少查询时间
• 网络请求走最近的网络环境
• 相同的静态资源缓存
• 减小请求的大小
• 服务端渲染优化

这里涉及的优化点，在后续文章中有讲解。