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

找工作，前端必问的面试题！！！一起来学习呀~~~

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

便于理解，我把这个过程一共分为三步。

第一步：寻找ip

输入url后，首先需要找到这个url域名的服务器ip，为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录

缓存的查找记录为：浏览器缓存 —>系统缓存 —>路由器缓存

若缓存中没有，则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器

得到ip地址

第二步：浏览器根据这个ip以及相应的端口号，构造一个http请求

这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据

第三步：将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器

上面是整个过程的三大步骤，浏览器接收到html时还要进行一系列的操作，如下所示：

1、因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码后面，

2、之后根据外部样式、内部样式和内联样式构建一个CSS对象模型树（CSSOM树）

3、构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点

4、进行布局，布局主要是确定各个元素的位置和尺寸

5、渲染页面，因为html文件中会含有图片、视频和音频等资源，在解析DOM 过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个

上面就是浏览器接收到来自服务器返回的html页面后的一系列操作，下面是对整个过程的一些小补充啦~

【注意】在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。

note1：Cache-Control和Expires的区别在于Cache-Control使用的是相对时间，Expires使用的是基于服务器端的绝对时间，因为会存在时差问题，一般采用Cache-Control

note2：在请求这些有设置缓存的数据时，会先查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304（ps：304状态码意思是Not Modified未修改，所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源）