输入一个URL到这个页面呈现出来，这个过程发生了什么？

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

---

题外

关于缓存：
为了提高网站响应速度，减少服务器的负担。节省带宽，将需要的静态资源存在客户端。当这些文件更新时又要尽快使这些缓存失效，这时就需要用到缓存去实现。
缓存分为两种：强缓存和协商缓存，根据响应头的内容来决定。

1. 强缓存相关字段：expires，cache-control。如果二者都存在，则cache-contorl优先级高于expires。
2. 协商缓存相关字段：Last-Modified，Etag。
3. Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用Cache-Control。