浏览器的工作原理

橘子烤菠萝

于 2024-03-13 17:22:00 发布

阅读量873

点赞数 17

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44904482/article/details/136673300

版权

从输入一个url到页面加载完成，中间都发生了什么？
参考原文地址

首先在浏览器地址栏输入一个地址并回车之后，

1. DNS查找

浏览器会进行DNS查找，把域名https://example.com转化为真实的IP地址10.29.33.xx，根据IP地址找到提供网站内容的服务器。

2. TCP握手、建立连接

找到服务器之后，浏览器会通过TCP握手机制跟浏览器建立连接，如图：
请添加图片描述

而现在大部分服务器传输都是基于HTTPS协议的，那么就会多一步TLS握手，建立加密的隧道，保证数据传输不被监听和篡改，如图：
请添加图片描述

3. 发起请求、接收响应

建立好浏览器和服务器之间的连接后，浏览器会发起HTTP或者HTTPS请求，来获取服务器响应，一般对于网站来说，响应就是服务器返回的HTML网页代码。这里在接收响应时，有一个slow start机制（受制于TCP连接，浏览器会先收到前14KB的数据），后续才会慢慢增加传输速率，下载其他文件。
所以，对服务器来说，能在这24KB数据里完整展示页面就非常重要。
请添加图片描述

4. 渲染页面

在收到html代码之后，浏览器开始渲染页面，这个过程分为5步：

（1）构建DOM树

解析html并构建DOM树，（DOM树是html文档在浏览器中的对象表示，可以使用js来操作DOM树）在这里插入图片描述
浏览器在解析html的时候是顺序执行的，并且只有一个主线程负责解析，当解析到script标签时，浏览器会加载javascript文件并执行其中的代码，此时主线程暂停解析html文档，等javascript文件中代码执行完后，对html文档的解析才会继续。

对于图片img或者CSS文件，或者设置了defer\async的javascript标签，不会影响主线程的解析，而是会创建线程，异步加载，（其中，对于defer属性的javascript标签，加载完后要等DOM树构建完成之后才会被执行）。
请添加图片描述

（2）构建CSSOM树

CSSOM是CSS文件在浏览器中的对象表示，也是树状结构。如图：请添加图片描述

（3）合并DOM和CSSOM

浏览器会从DOM的跟节点开始，合并CSSOM中的样式到DOM树中的每个节点，形成一颗渲染树请添加图片描述

（4）布局

生成渲染树之后，浏览器会根据生成的样式，计算每个可见节点，也就是没有设置display:none; 的节点，对除display:none; 以外的节点计算他们的宽高和位置等，对所有的节点进行布局规划。请添加图片描述

对于像图片这样的节点，如果没有指定宽高，浏览器会先忽略他的大小，在图片加载完成后，浏览器会根据图片的宽高和位置，再次对受影响的其他节点的宽高位置进行计算，这个过程就叫做回流（reflow）。请添加图片描述

（5）重绘

在第一次布局完成之后，浏览器会真正地把节点和节点样式，例如背景、阴影、边框等绘制到屏幕上，这个过程要求必须要快，否则会影响动画和交互性能。如果之前布局发生了回流（也就是加载了图片），浏览器会发生重绘，把变化的布局重新绘制，
第一次绘制：
重绘：请添加图片描述

绘制期间可能会有组合发生，因为在渲染节点时可能会产生新的图层，例如：video标签或者设置了opacity等属性的节点，浏览器需要把这些图层组合起来，按正确的堆叠顺序渲染。请添加图片描述

以上过程包含的知识点：

1. 前后端交互- HTTP协议

HTTP协议包含客户端和服务端2个实体，客户端发送请求给服务端，服务端返回响应给客户端。
在HTTP中，数据称为资源，可以是html文档、图片、也可以是普通文本。
资源是通过URL进行定位的，URL结构如下：
请添加图片描述
HTTP请求内容：

GET是默认请求方式，意思是从服务端获取资源，常用还有：
POST请求，创建资源
PUT请求，更新资源，
DELETE请求，删除资源
区别是：GET和DELETE通常没有请求体，POST和PUT通常带有请求体，

请求头：包含额外信息来帮助服务器决定如何响应，比如：使用Accept设置接收响应的类型。
服务器端在处理好请求后发送响应给客户端，
请添加图片描述
响应状态码取值及对应表示：
响应头与请求头类似，包含额外的响应信息，比如：告知客户端如何控制缓存和cookie。
响应体是服务端返回的数据。

HTTP请求是无状态的：每次客户端发送的请求都被认为是从一台新的客户端发送过来的，如果需要记录状态，应该使用cookie和session来记录会话（实现登录和购物车之类的功能）

HTTP/2

区别于HTTP/1.1，数据通过二进制形式进行传输，不再是文本形式；多路复用，建立连接后可以一次发送多个HTTP请求；压缩HTTP headers，减少负载；支持Server Push

HTTPS

在标准HTTP中，客户端和服务端交互的信息都是通过公共互联网进行传输的，由于传输的内容是明文所以当传输一些敏感信息时很容易被监听盗取，为了加强安全性，HTTPS（更安全的超文本传输协议）诞生。
HTTPS会加密传输的数据，他通过两个协议来保障数据安全，一个是SSL，一个是TSL，（原理基本都是通过服务器端对客户端进行身份验证，然后对数据加密什么的）。