浏览器工作原理

浏览器工作原理

1.前言

浏览器工作的主要原理就是实现http协议的通信。http通信的主要流程分为三个部分：
1.连接服务器
2.浏览器获取请求
3.服务器响应

2.URL加载页面

从输入一个URL到页面加载完成的整个步骤。

1.我们在浏览器地址栏输入一个URL并回车之后，浏览器会进行DNS查找，把域名转化为真实的ip地址，根据ip地址找到提供网站内容的服务器。

2.在找到服务器之后，浏览器会通过TCP握手机制与服务器建立连接，而现在大部分服务器都是基于Https协议的，那么会多一步TLS握手，建立加密隧道，保证数据不会被监听和篡改。

3.在建立了浏览器和服务器之间的联系之后，浏览器会发起HTTP（S）请求，来获取服务器响应，一般对于网页来说，响应就是服务器返回的html代码。

服务器渲染页面

1. 浏览器在解析html的时候是一个单线程，在扫描代码过程中，如果遇到script标签，浏览器会加载script文件，并执行其代码，此时html暂停解析。
2. 在html中的css，img文件，他不会影响主线程的加载，而是进行异步加载。
3. 浏览器有一个预扫描处理，会将html中的css文件，字体，以及js文件异步下载，不会影响主线程
4. 合并CSS中的样式到DOM中的各个节点
5. 根据样式对页面进行布局，列出每个可见节点。对于没有设置宽高的图片，会进行回流设置，即在页面加载完成后，对图片进行重新布局渲染。
6. 页面进行绘制：在首次布局完成后，浏览器会初次加载页面，将背景，阴影，边框绘制在页面上，页面初始化完成，而对于需要回流的图片等，浏览器则会发生重绘。
7. 至此，整个网页加载完成，可以和用户进行交互了。

结束语

浏览器工作的流程大体就是这样：DNS查找，TCP(TLS)握手，发送http请求，构建DOM，构建CSS，CSS构建DOM，布局，绘制等。