【前端】从输入网址到最后浏览器呈现页面内容，中间发生了什么？

从输入网址到最后浏览器呈现页面内容，中间发生了什么？

1. 输入网址，浏览器，发送UDP包给DNS服务器，通过DNS解析得到网址的IP地址（即服务器的IP），并将IP地址缓存。

2. 客户端（浏览器）和服务器端之间建立TCP连接：由于TCP邮差需要知道4个东西（本机IP，本机端口，服务器IP，服务器端口），现在只知道了本机IP，服务器IP， 两个端口怎么办？其中，本机端口很简单，操作系统可以给浏览器随机分配一个， 服务器端口更简单，用的是一个“众所周知”的端口，HTTP服务就是80（HTTPS服务就是443）， 我们直接告诉TCP邮差就行。经过三次握手以后，客户端和服务器端的TCP连接就建立起来了！ 

3. 浏览器发送HTTP请求。

4. Web服务器处理请求，并将HTTP Response（一个HTML页面）返回给浏览器。

5. 浏览器再次发起请求：由于这个HTML页面中可能引用了大量其他资源，例如JS文件，CSS文件，图片等，这些资源也位于服务器端，并且可能位于另外一个域名下面。所以浏览器只好一个个地下载，从使用DNS获取IP开始，之前做过的事情还要再来一遍。

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

• HTML，浏览器把它解析成DOM Tree
• CSS，浏览器把它解析成CSS Rule Tree
• JavaScript，它可以修改DOM Tree

浏览器会通过DOM Tree和CSS Rule Tree生成所谓“Render Tree”，计算每个元素的位置/大小，进行布局，然后调用操作系统的API进行绘制。最后，我们就能看到呈现的页面了。

 

参考：

小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？

从输入网址到最后浏览器呈现页面内容，中间发生了什么？

END