浏览器解析并渲染页面的过程

目录

 1、用户输入网址,浏览器发起DNS查询请求

  2、建立TCP连接

  3、浏览器向web服务器发送一个http请求

   4、发送响应数据给客户端

  5、浏览器解析http response

(1)html文档解析(DOM Tree)

(2)浏览器发送获取嵌入在html中的对象

(3)css解析

(4)js解析

(5) 回流和重绘


 1、用户输入网址,浏览器发起DNS查询请求

        用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址域名解析服务器是基于UDP实协议实现的一个应用程序,通常通过监听53端口来获取客户端的域名解析请求。DNS查找过过程如下:

        浏览器缓存—浏览器会缓存DNS记录一段时间。有趣的是操作系统没有告诉浏览器存储DNS记录的时间,这样不同浏览器会记录他们各自固定的一个时间(2分钟到30分钟不等)

       系统缓存—如果在浏览器缓存中没有找到需要的记录,浏览器会做一个系统调用(gethostbyname)。这样便可获得系统缓存中的记录。

       路由器缓存—接着前面的查询请求发向路由器,他一般会有自己的DNS缓存

       ISP DNs缓存—接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。

        递归搜索-你的ISP的DNS服务器从域名服务器开始进行递归搜索,从com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。

  2、建立TCP连接

        浏览器通过DNS获取到web服务器真的IP地址后,便向服务器发起TCP连接请求,通过tcp的三次握手建立好连接后,浏览器便可以将http请求数据通过发送给服务器了。

  3、浏览器向web服务器发送一个http请求

        http请求时基于tcp协议之上的应用层协议--超文本传输协议。一个http事务由一条(从客户端发往服务器的)请求命令和一个(从服务器发回客户端的)响应结果组成。

   4、发送响应数据给客户端

web服务器通过监听80端口,来获取客户端的http请求。与客户端建立好TCP连接后,web服务器开始接受客户端发来的数据,并通过http解码,从接收到的网络数据中解析出请求的url信息以前其他诸如Accept-Encoding、Accept-Language等信息。Web服务器根据http请求头的信息,得到响应数据返回给客户端。

至此,一个http通信过程完成。web服务器会根据http请求头中的Connection字段值决定是否关闭TCP链接通道,当Connection字段值为keep-alive时,web服务器不会立即关闭此链接。

  5、浏览器解析http response

(1)html文档解析(DOM Tree)

        在浏览器没有完整的接收全部HTML文档时,它就已经开始显示这个页面了。生成解析树解析即dom树,是由dom元素及属性节点组成,树的根是docunment对象。

(2)浏览器发送获取嵌入在html中的对象

        加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另发出一个请求,来获取图片资源。这是异步请求,并不会影响html文档进行加载。但是当文档加载过程中遇到js文件,html文档会挂起渲染的线程,不仅要等待文档中的js文件加载完毕,还要等待解析执行完毕,才能恢复html文档的渲染线程。

(3)css解析

        浏览器下载css文件,将css文件解析为样式表对象,并来用渲染dom tree。该对象包含css规则,该规则包含选择器和声明对象。

        css元素遍历的顺序,是从树的低端向上遍历。

(4)js解析

        浏览器UI线程:单线程,大多数浏览器让一个单线程共用于执行JavaScript和更新用户界面

        js阻塞页面:浏览器里的http请求被阻塞一般都是由js所引起,具体原因是js文件在下载完毕之后会立即执行,而js执行时候会阻塞浏览器的其他行为,有一段时间是没好网络请求被处理的,这段空闲时间就是所谓的http请求被阻塞。

js被阻塞的原因:之所以会阻塞U线程的执行,是因为js能控制UI的展示,而页面加载的规则是要顺序执行,所以在碰到js代码时候UI线程会首先执行他。

(5) 回流和重绘

在页面构建时就会触发一次回流和重绘;

回流:当某个元素的大小、位置发生了变化时,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树;

重绘:当某个元素的字体颜色等不影响布局的属性变化时,不需要重新构建渲染树,只需直接重新绘制页面即可;
 

猜你喜欢

转载自blog.csdn.net/m0_64346035/article/details/124949849