由第一篇的浏览器工作原理可以知道,从用户输入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)显示在屏幕上。