前言
从前从前，有个人编程很久，但偏偏，面试时，发现他两眼蒙圈。一个关于浏览器工作原理的面试题，再次发现自身的短板，那么在学习之后还是写写总结，顺便巩固一下避免忘了。
作为一个资深“API调用工程师”，我本来是不太关注这个的。但被问到之后发现其实了解一下对我们前端开发是有帮助的。毕竟我们的开发大部分时间都是和浏览器打交道，如果不知其所以然，那么开发出来的代码可能并不是最高效的。
正文开始之前再多一句嘴，因为浏览器原理这个东西真的很广泛，要真的写可能可以写出一本书。毕竟我们都是站在巨人的肩膀上做事，我能做的也只是了解，并不能面面俱到的讲它每个过程背后的原理（如果以后有时间的话可以考虑写写），所以我的文章除了描述出大致的过程之外，更多的是针对面试官想通过这道题来考验我们什么，也就是它背后的重要考点。（剧透一下，是HTTP协议、缓存和页面渲染过程）
(一) DNS解析域名
由于浏览器网络通信大多都是基于TCP/IP的，所以计算机是只能识别IP地址而无法识别域名。通常一个正常人不可能去记得每个网址的IP地址，毕竟就是一串数字。例如，我百度了一下百度的IP地址202.108.22.5/，你输入这段数字和输入www.baidu.com的效果是一样的，正经人谁去记IP地址啊。所以我们在浏览器输入url之后，第一步就是先把我们输入的url解析为可以被识别的IP地址。DNS背后的工作原理有兴趣可以去了解一下，这里就不详细展开了。
(二)根据IP地址发送HTTP请求
HTTP，全称HyperText Transfer Protocol，翻译过来就是超文本传输协议，是一种基于TCP/IP之上的应用层协议，它是web数据通信的基础。
HTTP协议采用了请求/响应模式，即客户端向服务端发送请求报文，服务端接收请求并处理，返回一个状态行。
在发送HTTP请求之前，先是建立TCP连接（TCP三次握手，感兴趣可以去看计算机网络这本教材，了解下就行，不用深究，除非是专门做这块的），通过TCP连接，客户端向服务端发送请求报文。请求报文包括请求方法，url，协议版本，请求头和数据。
(三)服务器接收HTTP请求并响应
前方高能，存在大量需要前端掌握的知识！
在接收到HTTP请求之后，服务端会返回响应报文，包括状态码，协议版本、响应头和数据。这是一句话描述了它干了什么，那面试官当然不会止步于此，比如，常见状态码有什么？HTTP缓存机制是怎么样的？这些问题都是在这个过程中需要掌握的。
1、常见状态码
1xx ——1开头的状态码代表服务器接收到HTTP请求，等待进一步处理。
2xx ——2开头的状态码代表服务器对HTTP请求成功接收，理解并接受。如200(请求成功)
3xx ——3开头的状态码代表服务器接收到请求，但仍需要进一步处理才能完成请求。如301（永久重定向）、302（临时重定向）、304（本地资源尚未改变）
4xx ——4开头的状态码代表请求错误，如403（服务器拒绝执行请求）、404（请求失败，找不到资源）
5xx和6xx ——5开头和6开头的状态码，一般发生在服务端有错误的时候，如502（服务器未返回有效的响应）、503（服务器维护或过载）
这里我们只需要记得每个数字开头代表的含义以及常见的状态码就够了。
2、HTTP缓存机制
由于浏览器请求资源这个过程相当消耗性能，因此，合理利用缓存成为前端性能优化的一个重要途径。
1、强缓存
强缓存是指当客户端初次请求资源时，服务器返回资源和Cache-Control值。Cache-Control的值主要记住max-age（缓存的过期时间）和no-cache（不采用本地存储）。当客户端再次请求资源时，假如再次请求的时间还没超过max-age，则直接在读取本地存储；如果超过了max-age，则返回新的资源以及Cache-Control的值。画个流程图帮助理解。
2、协商缓存
协商缓存是一种服务端的缓存策略，它通过对比客户端缓存的资源标识来判断客户端缓存的资源是否与服务端一致，假如一致则返回304，否则返回200并且返回服务端生成的资源标识。服务端返回的资源标识有两个：Etag和last-modified。Etag就是一个资源标识，它是服务器端创建的一个独有的字符串，每次资源修改都会发生改变；Last-modified是资源修改的最后时间。请求资源时，客户端发送的是if-None-Match 和 if-Modified-Since两个字段，它对应的是Etag和Last-Modified。由于last-modified是精确到秒级，所以两个字段共存时，将优先判定Etag。
懒人就不单独画协商缓存的流程图了，直接强缓存结合协商缓存一起画。
3、缓存机制总图
(四)浏览器渲染页面
万事俱备，此时的浏览器所需要的资源都已经有了，最后一个东风即将来临。首先是将HTML生成DOM tree,然后根据CSS生成CSSOM，接着，把DOM和CSSOM整合成一个渲染树（render tree）。浏览器会根据渲染树进行渲染页面。值得一提的是，当渲染过程遇到script标签，则会停下渲染，优先加载并执行JS。
以上就是我对浏览器从输入url到页面呈现的全过程的理解。
关注公众号：yellowbird的飞行日记
