【从输入URL到渲染页面的整个过程】

---

一、URL解析

对URL进行解析，解析协议、主机名、端口号、查询参数等。

二、查找缓存

有一些静态资源（js css img）不经常变动，可以把它们缓存下来，以此来减少网络请求的频率和数量，从而提高性能。

即发送请求前，会先检查下这个请求有没有缓存标识，有的话就按照缓存策略获取资源，没有的话，就进行DNS解析。

http缓存策略有强缓存、协商缓存。

1、强缓存：初次请求，浏览器返回资源和一个Cache-Control标识，比如设置Cache-Control：max-age=518400，表示这个资源能够缓存的时间是518400s。在这个时间内进行再次请求，浏览器会去判断缓存是否失效，未失效的话请求本地缓存并返回资源，如果缓存失效了则再去请求服务器。
2、协商缓存：并不是每个资源都是长时间固定不变的，这个时候客户端需要和服务器去协商哪些资源要缓存。如果协商缓存呢？客户端初次请求，服务端返回资源和资源标识。当再次请求时，客户端带上资源标识，服务端去重新计算资源标识，和客户端带过来的比较，如果相同则说明文件未修改，返回304状态码；如果不同则返回新资源和新的资源标识。
协商缓存的资源标识有两种，都位于请求头中。第一种是Etag，根据文件计算出的唯一标识，文件修改了标识也会发生变化。第二种是Last-Modified，这个值记录的是资源最后的修改时间，如果修改了，则值是不一样的。

强缓存的优先级大于协商缓存。

三、DNS解析

DNS可以将域名解析成IP。使用域名的好处就是，域名便于记忆，其次，如果服务器做了负载均衡，则ip不是唯一的，ip有多个，使用DNS就可以将域名解析成对应机器的ip。

四、TCP连接

根据网络七层协议，HTTP属于应用层协议，发HTTP请求之前，需要先建立TCP连接。
建立TCP连接，需要进行三次握手，连接建立后，才能进行数据传输，传输完毕后进行四次挥手断开连接。

五、浏览器向服务器发送http请求，并返回数据给浏览器

5.1 http状态码有哪些

状态码分类：

• 1xx服务器收到请求
• 2xx请求成功，如200
• 3xx重定向，如301永久重定向，302临时重定向，304资源未修改
• 4xx客户端错误，如404资源未找到，403没有权限
• 5xx服务器错误，如500服务器错误，504网关超时

301使用场景：网站域名到期或者想更换域名了，就可以返回301状态码，让浏览器自动重定向到新域名。

5.2 常见的http headers

请求头 Request Headers：

• Accept 浏览器可接收的数据格式
• Accept-Encoding 浏览器可接收的压缩算法，如gzip（压缩了浏览器能解压，能保证资源更小，传输的更快一些）
• Connection：keep-alive 一次TCP连接重复使用（把资源一次性完成，提高效率）
• Cookie
• Host：请求的域名是什么
• User-Agent（简称UA）：浏览器信息。如：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
• Content-Type发送数据的格式：如application/json

响应头Response Headers：

• Content-type 返回数据的格式：如application/json
• Content-length 返回数据大小
• Content-Encoding返回资源的浏览器压缩算法

与缓存相关的headers：

• Cache-Control
• Etag
• Last-Modified

六、浏览器进行页面渲染

1、渲染过程：

1、根据HTML代码生成DOM Tree

2、根据CSS代码生成CSSOM树（CSS对象模型）

3、DOM Tree和CSSOM整合成Render Tree，即DOM树上挂了CSS属性，这样就可以渲染了（这一步包括了尺寸计算、定位等布局）

4、根据Render Tree渲染页面

5、遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续渲染。这样做的目的是JS里面可能有一些对DOM的操作，可能会改变DOM结构，因此这样设计

用户所期望的是先加载页面及样式，而加载JS会阻塞渲染，所以JS加载一般会放在body后面。CSS的加载会放在head里面，因为不想让HTML“裸奔”，带有样式的HTML更受用户喜爱。

以上描述可以用这个图表示：

2、script标签的defer和async属性有何区别

<script src="xxx.js">由上面的渲染过程可知，渲染过程中，遇到script标签会暂停渲染，先去加载js、执行js，然后再继续渲染。
<script async src="xxx.js">js下载和html解析可并行，即边解析html边下载js。下载完先执行js，执行完js再继续解析html。
<script defer src="xxx.js">js下载和html解析可并行，下载完js，继续解析html，解析完html再执行js。