前端每日一题：从输入网址（url）到浏览器呈现页面内容，中间发生了什么？

从输入网址到页面呈现这个过程大致可分为以下这几个部分：

网络通信
页面渲染
1.网络通信
1.1输入网址
当我们在浏览器的地址栏输入网址例如(https://www.zhihu.com/)，https://代表使用的传输协议，www.zhihu.com代表服务器地址，zhihu.com代表域名。一个完整的URL包括协议、服务器地址(主机)、端口、路径
https://www.zhihu.com/
1.2 域名解析
域名解析的过程实际上是通过域名找到与之对应的服务器ip 的过程。

1.先从浏览器缓存里找IP,因为浏览器会缓存DNS记录一段时间

2.如没找到,再从本地Hosts文件查找是否有该域名和对应IP

3.如没找到,再从路由器缓存找

4.如没好到,再从本地DNS缓存查找

5.如果都没找到,浏览器域名服务器向根域名服务器(zhihu.com)查找域名对应IP,还没找到就把请求转发到下一级,直到找到IP
2.1
1.找到IP后就可以像浏览器发送HTTP请求了，然后进行三次握手建立HTTP链接，发送请求完毕后进行4次挥手后终止请求；
浏览器收到了Http Response，从其中读取了HTML页面，开始准备显示这个页面。

但是这个HTML页面中可能引用了大量其他资源，例如js文件，CSS文件，图片等，这些资源也位于服务器端，并且可能位于另外一个域名下面，例如static.coder.com。

浏览器没有办法，只好一个个地下载，从使用DNS获取IP开始，之前做过的事情还要再来一遍。不同之处在于不会再有应用服务器如Tomcat的介入了。

如果需要下载的外部资源太多，浏览器会创建多个TCP连接，并行地去下载。

但是同一时间对同一域名下的请求数量也不能太多，要不然服务器访问量太大，受不了。所以浏览器要限制一下，例如Chrome在Http1.1下只能并行地下载6个资源。

当服务器给浏览器发送JS,CSS这些文件时，会告诉浏览器这些文件什么时候过期（使用Cache-Control或者Expire），浏览器可以把文件缓存到本地，当第二次请求同样的文件时，如果不过期，直接从本地取就可以了。
如果过期了，浏览器就可以询问服务器端，文件有没有修改过？（依据是上一次服务器发送的Last-Modified和ETag），如果没有修改过（304 Not Modified），还可以使用缓存。否则的话服务器就会被最新的文件发回到浏览器。

当然如果你按了Ctrl+F5，会强制地发出GET请求，完全无视缓存。

注：在Chrome下，可以通过 chrome://view-http-cache/ 命令来查看缓存。

现在浏览器得到了三个重要的东西：

1.HTML ，浏览器把它变成DOM Tree