地址栏里输入URL,到页面呈现的过程

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

这是一个大几率会考的面试问题

浏览器的输入URL到页面呈现的大致过程：

• 输入地址，发送至DNS服务器，获取相应的域名和web服务器的IP地址
• 与web服务器创建TCP连接
• 浏览器向web服务器发送HTTP请求
• 服务器响应请求,并发送对应的数据
• 浏览器下载数据,并解析源文件,渲染页面,呈现页面
• 关闭TCP连接

过程详解：

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