浏览器从输入URL到渲染完页面的整个过程是怎么样的?

2022-05-29    分类: 网站建设


 浏览器的主要功能是将用户选择的web资源呈现出来,它从服务器请求资源,并将得到的资源(HTML,PDF,image等等)显示在浏览器窗口。那么从用户敲入URL到完整渲染出来,经历了什么过程呢?也就是说整个浏览器的工作流程是怎样的呢?

整个过程大致如下:


       1. 输入URL,浏览器根据域名寻找IP地址
 2. 浏览器发送一个HTTP请求给服务器,如果服务器返回以301之类的重定向,浏览器根据相应头中的location再次发送请求
 3. 服务器接受请求,处理请求生成html代码,返回给浏览器,这时的html页面代码可能是经过压缩的
 4. 浏览器接收服务器响应结果,如果有压缩则首先进行解压处理
 5. 浏览器开始显示HTML

     6. 浏览器发送请求,以获取嵌入在HTML中的对象。在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。


这时,浏览器会发送一个获取请求来重新获得这些文件——包括CSS/JS/图片等资源,这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等…

 那么,一个页面,究竟是如何从我们输入一个网址到最后完整的呈现在我们面前的呢?还需要了解一下浏览器是如何渲染的。
首先是用户输入url,浏览器通过DNS查询要访问页面的IP,查询到后,浏览器会替用户去向这个IP地址发送请求拉取html文件,浏览器会派GUI线程去解析加载回来的html文件

html解析过程:01机器码-》charter字符-》tokens令牌-》node节点-》dom树


解析CSS,构建CSSOM
有了骨骼以后,接下来就是确定长相了,这是CSS要做的事情。和解析HTML类似,CSS解析各种样式信息,生成网页的“外观”。但是有个问题,CSSA(class选择器)说,我喜欢蓝色,我家网页的所有文字都要是蓝色。CSSB(id选择器)就不乐意了,凭啥啊,我喜欢红色,我家的标题必须是红色。由于id选择器是亲生的,那就标题是红色的吧,于是不同选择器就有了不同的权重。最后生成CSSOM

因为浏览器解析文档,如果遇到请求外部资源时,如图像,iconfont,JS等。浏览器将下载该资源。请求过程是异步的,并不会影响HTML文档进行加载,当遇到