本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

输入 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。