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

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

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

猜你喜欢

转载自blog.csdn.net/Dora_5537/article/details/91358436
今日推荐