浏览器4-性能优化

由第一篇的浏览器工作原理可以知道，从用户输入URL到页面展示的过程，其实是数据加载+页面渲染的一个过程。而打开网页这一动作，假设在理想化条件下，网页内容呈现在用户面前速度是非常快的。但是事实并非如此，总是会受到各方面因素的影响。

所以，我们可以通过性能优化来提高页面加载的速度，提高用户的体验，同时性能优化也是减少流量消耗的主要途径。

---

我们应当如何进行性能优化呢？

当然是从问题本身入手。在页面呈现之前的每一步骤，都可以成为我们寻找性能优化方法的途径。

其次，性能优化既包括了首屏渲染优化，也包括了二次访问优化。

接下来，让我梳理下思路并给出对应的解决方法。除此之外，我认为对于性能优化可以延伸出许多其他小问题，可以深入思考，这也是个人对于知识体系了解的深度以及广度的一种探讨吧。

在这里补充一下浏览器的组成，主要是人机交互部分UI，网络请求部分socket，JS引擎部分（解析执行JS Chrome V8引擎），渲染引擎部分（HTML,CSS），以及数据存储部分（cookie，webStorage）等，每次页面的呈现工作都是由这几部分相辅相成共同完成的。

---

首先是数据加载这一部分（可能这么描述不大准确，之后想到再来修改下）

这一部分过程主要是：

1.用户输入URL

2.DNS解析：将输入的URL地址转化为IP地址

首先，DNS预解析来告诉浏览器未来我们可能从某个特定的URL获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成DNS解析。

3.通过三次握手建立TCP连接

4.服务器对请求做出响应，返回数据

---

其次是加载数据部分

浏览器接收服务端返回的数据，对其进行解析。主要工作如下：

1.解析HTML，生成DOM树；

2.解析CSS，生成CSSDOM树；

3.合并DOM与CSSDOM，生成render tree；

4.浏览器会根据render tree 进行布局，即回流；然后弄清楚各个节点在页面中的确切位置与大小，即重绘；

5.绘制render tree（paint），绘制页面像素信息；（简单层与复合层）

6.浏览器将各层信息发送给GPU，GPU将各层合成（Composite）显示在屏幕上。