浏览器原理实践

1.浏览器的进程和线程概念

 

1.浏览器Browser进程的ui线程（UI Thread）拿到浏览器输入栏内容

2.判断是url,还是搜索内容，如果搜索内容，跳的搜索引擎，如果是url，则开启网络线程(network Thread)

3.在network Thread，进行DNS解析（应用层）DNS解析如果发现有缓存的记录，会直接拿缓存记录，没有才会开始解析，建立tcp连接，三次握手(传输层)(在http1.1阶段，Connection:Keep-alive为长连接，在一定时间内，不用每发送一次请求，进行一次tcp三次握手，而在http1.0是需要每次都需要建立tcp三次握手的)，ip查找(网络层)(传输单位是包)，数据链路层（传输单位是帧）、物理层(传输单位btye 流)

 

 

 

 

4.发送请求，服务器处理请求，返回响应

5.network Thread依据响应判断是HTML页面？不是从新开启下载管理，是HTML就开启render progess进程(在UI 线程获取到url后会提前开启render progress，如果响应返回时301类的重定向，就会重新开启render progress进程)

6.开始渲染

加载html页面的时候，遇到link，img标签内链接了其他资源，会重新开启network Thread去加载，所以他们不会阻塞html的解析，遇到script文件，加载编译执行会阻塞页面渲染，因为js是js引擎线程内编译执行和GUI渲染线程互斥的。

在浏览器合成显示的时候，会有普通图层和复合图层的概念

渲染步骤中就提到了composite概念。

可以简单的这样理解，浏览器渲染的图层一般包含两大类：普通图层以及复合图层

首先，普通文档流内可以理解为一个复合图层（这里称为默认复合层，里面不管添加多少元素，其实都是在同一个复合图层中）

其次，absolute布局（fixed也一样），虽然可以脱离普通文档流，但它仍然属于默认复合层。

然后，可以通过硬件加速的方式，声明一个新的复合图层，它会单独分配资源
（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）

可以简单理解下：GPU中，各个复合图层是单独绘制的，所以互不影响，这也是为什么某些场景硬件加速效果一级棒

可以Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到，黄色的就是复合图层信息

 最后TCP四次挥手，断开和服务器的连接，TCP连接会持续一段时间，每个浏览器持续时间不一致，下一次再次http请求，又需要重新三次握手