浏览器输入URL后发生了什么

在前端的面试中，经常会碰到的面试题，我想从如下3个方面去分析，缓存+网络+dom解析渲染

缓存

无缓存

如果是首次发送请求，或者说是浏览器给浏览器缓存发起请求返回的没有缓存标示和缓存结果，此时是没有缓存的，浏览器需要向服务器发起请求，服务器会返回缓存结果和缓存标示， 将其放入浏览器缓存中，下次就会有缓存了

强缓存

由于强缓存会优先于协商缓存，当强缓存失效后才会进入到协商缓存。浏览器给浏览器缓存发送请求，浏览器缓存直接返回缓存结果，强缓存不用与服务器交互，因此，它主要有cache-control和Expires，expires的优先级高于cache-control。

协商缓存

当强缓存失效后，会使用协商缓存，当浏览器给浏览器缓存发送请求，由于缓存结果失效，浏览器缓存只返回缓存标示，浏览器带着缓存标示向服务器发起请求，服务器根据资源是否更新决定返回code是200/304，如果资源未更新，返回304，否则200。并将缓存标示和结果写入到浏览器缓存中，更新浏览器缓存

网络

应用层

发送请求在应用层进行的，发出去后使用DNS进行域名解析,在应用层协议有http/DNS/ftp，DNS主要是将域名解析成ip地址

传输层

传输层主要是提供两台计算机的数据传输，它将应用层获取的数据进行分割，并打上标记序号和端口号发给网络层，在传输层的协议有UDP/TCP。 TCP采用三次握手，第一次，发送端将标有SYN的数据包发给接收端；第二次，接收端收到数据后，发送带有SYN/ACK的数据包；第三次，发送端发送ACK的数据包到接收端；三次后完成连接的搭建

网络层

网络层是处理网络流动数据包，采用ARP寻址找到对应的MAC地址，转发给链路层，在网络层的协议有ip

链路层

链路层用来处理网络的硬件部分，如网卡、设备驱动等

dom解析渲染

a. 将HTML转换成DOM树
b. 将css转换成CSSOM树
c. 将DOM和CSSOM合并为渲染树
d. 根据渲染树来布局，计算每个节点的几何信息
e. 将各个节点绘制到屏幕上

css阻塞渲染

在上面的渲染过程中，如果css下载没完成，会导致阻塞渲染，阻塞渲染仅是浏览器是否需要暂停网页的首次渲染，直到资源准备就绪。

参考

1. www.toutiao.com/i6917490602…
2. www.w3.org/TR/navigati…
3. mp.weixin.qq.com/s?srcid=042…
4. www.cnblogs.com/xuxg/articl…
5. developers.google.cn/web/fundame…
6. javascript.info/script-asyn…
7. developers.google.com/web/fundame…
8. developer.mozilla.org/zh-CN/docs/…