浏览器渲染过程

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器渲染过程相关的知识,希望对你有一定的参考价值。

渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。

下面是渲染引擎在取得内容之后的基本流程:

解析html以构建dom树->构建render树->布局render树->绘制render树

技术图片

Render树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后,将会执行布局过程,它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。

值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

以上是关于浏览器渲染过程的主要内容,如果未能解决你的问题,请参考以下文章

浏览器渲染页面的过程

浏览器渲染页面过程

前端技能树,面试复习第 40 天—— 浏览器原理:浏览器渲染原理,如何优化渲染过程

浏览器渲染过程

浏览器从输入URL到渲染完页面的整个过程

前端-剖析浏览器渲染页面的过程