说一说从输入URL到页面呈现发生了什么？

写文章缘由

作为前端，应该都知道有这么一个比较经典的面试题：说一说从输入URL到页面呈现发生了什么？前段时间我在自己整理和学习的过程中，发现这个问题是一个非常深入的问题，基本上每一个点深入了解都能挖掘到很多的知识，比如缓存机制，浏览器线程，事件循环，回收机制等等。自己看了挺多资料，决定把了解的一些皮毛总结一下，方便以后复习，也希望各位大佬在看到有错误的地方指正一下，不胜感激！

正文

我们由输入URL到页面渲染成功中间的各个流程入手，总结一下相关的知识

网络请求

注：在写这点的时候我一直在想，浏览器查询缓存也就是查找强缓存的触发时机到底是什么，毕竟通过缓存机制的相关知识，查找缓存的时候是通过http的头部上的特定字段。所以我的理解是在输入网址回车之后，浏览器会构建请求行发送一次http请求，请求地址为根路径（缓存存放路径），用来查询浏览器缓存，然后在进行之后的操作。

1.构建请求行

// 请求方法是GET，路径为根路径，HTTP协议版本为1.1
GET / HTTP/1.1

2.查询缓存
注：非第一次
通过http的头部字段来查找强缓存，命中之后就直接使用缓存里面的内容，如果强缓存失效，那么就进入协商缓存，进入协商缓存就要和服务器进行通信，就要进行下一步。
分割线---------------------
缓存相关知识
浏览器缓存通常是优化的时候的第一选择，合理使用缓存可以提高程序的性能（好像合理分配和使用缓存是架构师的必备技能，哈哈，扯远了）
其实缓存这方面单独写一个文章都是绰绰有余的，不过现在网上已经有很多相关的文章了，想深入学习的同学自已自行百度，而我也是略知一二就不嫌丑了，在这里简单介绍一下。

合理使用缓存可以减少请求数量，这也是优化的一方面。

注：在第一次访问的时候(即访问一个从没有访问过的网址的时候)是没有任何缓存的，所有的缓存都是第一次访问之后根据响应进行缓存。

强缓存
强缓存是不需要向服务器发送请求的，而上面说的命中强缓存指的是强缓存是否失效。是否失效是根据缓存的时候设置的有效时间进行判定，在不同的http版本设置有效时间的对应http响应头部字段是不同的。
HTTP/1.0：使用的是Expires
HTTP/1.1：使用的是Cache-Control
先说Expires，存在于服务器的响应头中，表示未来资源会到期的时候，是一个具体的时间点，比如2020年7月23日下午四点十分。这样就会存在问题，因为这个时间是服务器时间，当客户端和服务器的时间不同步的时候就会导致缓存意外失效，比如手动修改客户端的时间
在HTTP1.1中使用了Cache-Control字段来设置时间，和Expires设置具体时间点不同的是，Cache-Control设置的是一个时间段，比如几个小时，下一次请求在这个时间段内则说明强缓存没有失效，否则就是失效了。而且Cache-Control有几个属性，分别可以设置不同的内容。
max-age：时长
public：都可以缓存
private：指定浏览器缓存，中间服务器不能缓存
no-cache：跳过当前强缓存，直接进入协商缓存阶段
no-store：不进行任何缓存
s-maxage：设置代理服务器的过期时间
注：Cache-Control高于Expires

当强缓存没有命中或者说强缓存失效的时候浏览器会做什么呐？ 下面就进入到另外一种缓存模式：协商缓存，协商缓存是需要和服务器进行通讯的

协商缓存
当强缓存失效的时候就会进入协商缓存，协商缓存需要发送http请求和服务端进行通讯。不同版本的HTTP也有不同的实现方式
HTTP/1.0时期: Last-Modified
HTTP/1.1时期: ETag
Last-Modified
同样在第一次请求的时候，服务端会在响应头上面加上字段Last-Modified，即最后修改时间。
客户端在下次请求时候会在请求头上加上字段If-Modified-Since，这个字段就是第一次响应头中Last-Modified字段的内容。
服务端在收到之后，拿If-Modified-Since字段的内容和该资源的最后修改时间进行对比。
如果字段内容的时间比较小，说明服务器上该资源已经修改，需要返回新的，如果字段内容比较大，则说明没有修改，则返回304，告诉浏览器直接使用缓存。
ETag
服务器会根据该资源的内容生成一个唯一标示，当内容改变