在地址栏里输入一个 URL后,按下 Enter 到这个页面呈现出来，中间会发生什么？

这是一个面试高频的问题

在输入 URL 后，首先需要找到这个 URL 域名的服务器 IP,为了寻找这个 IP，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存 ->系统缓存 -> 路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务器，得到服务器的 IP 地址后，浏览器根据这个 IP 以及相应的端口号，构造一个 HTTP 请求，这个请求报文会包括这次请求的信息，主要是请求方法、请求说明和请求附带的数据，并将这个 HTTP 请求封装在一个 TCP 包中，这个 TCP 包会依次经过传输层、网络层、数据链路层、物理层到达服务器，服务器解析这个请求来作出响应，返回相应的 HTML 给浏览器，因为 HTML 是一个树形结构，浏览器根据这个 HTML 来构建 DOM 树，在 DOM 树的构建过程中如果遇到 JS 脚本和外部 JS 链接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 HTML 代码的后面，之后根据外部样式，内部样式，内联样式构建一个 CSS 对象模型树 CSSOM 树，构建完成后和 DOM 树合并为渲染树，这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为 HTML 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是 4-6 个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用 Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置 ETag 则直接验证 Last-Modified，再决定是否返回 304.

简化一下就是：

1. 检查缓存
2. DNS解析
3. TCP连接
4. 发送HTTP请求
5. 服务器处理请求并返回HTTP报文
6. 浏览器解析渲染页面
7. 连接结束