首页 前端知识 说一说HTML渲染过程或者浏览器渲染原理

说一说HTML渲染过程或者浏览器渲染原理

2024-05-28 09:05:34 前端知识 前端哥 416 503 我要收藏

从输入url到页面渲染,说完之前的网络请求,到返回数据,就到了浏览器渲染了。浏览器渲染,基本就是将url对应的资源,通过浏览器下载,之后引擎解析,最终将文本、图片、视频、文件、组件、字体等内容渲染出来。

目录

重绘与重排

浏览器渲染的几个概念

渲染的过程

DOM树

CSSOM树

渲染结合树

绘制

重排


重绘与重排

说到浏览器渲染呢,时刻都要记得这两个名词。Repaint(重绘Reflow(重排)。

重绘呢,看表层意思就是重新绘制,比如改变某个元素的背景色值,改变文字的色值,改变边框的色值,再比如隐藏显示,这里说的是visibility为hidden的那个隐藏显示,不是display为node的那个知识点。如果将某个元素的色值做了修改,就会造成重新绘制。就好比有一张纸,我们用橡皮把内容擦掉,重新写内容,而不是把纸撕掉,重头再来。所以,重绘不会带来重排。

重排呢,基本就是布局改变造成的。比如登录前,是登录+注册两个按钮,登录后冒出一排按钮来,地方肯定不够了,布局就会改变;比如我们项目中如果有个区域,刚开始有个初始化的大小布局,等网络请求完成后,发现内容多了,把网页撑大了;比如做电商平台的时候,某个楼层未登录的时候是有的,等登录了以后新增了一个,或者去掉一个,都是有可能的;又或者列表里删除了一项。试想一下,我们每个元素渲染在屏幕的某个位置,这都是需要复杂的计算的,突然发生布局变化了,不仅要重排,重排的过程还要整体重绘一次。

浏览器渲染的几个概念

说到浏览器渲染,我们就不得不提到几个概念。

HTML解释器,目的是分析HTML文档中的标签,语义化,从DOCTYPE到head到body,一直到结束的html标签,整体最终生成文档对象模型,也就是所谓的DOM树;

CSS解释器,我们习惯于将css文件或者样式放于文档头部,是希望有限加载css内容,去解析css内容。

Javascript引擎,试想一下,我们定义了一个var a = ; 你说代码会不会报错,是哪里报的错呢?JS被下载、加载、解析,最终作用域DOM和CSS样式。

渲染的过程

DOM树

html标签是有一个轮廓的,例如从DOCTYPE标签,到html,到body,再最终到结束的html标签,这是他的轮廓。然后他又规定了每个区域内应该放置meta,或者是style,或者是一些布局式的标签。

浏览器将这些标签解析,最终生成DOM树。

CSSOM树

css有外部引入的,有行内的,有设置有!important的,但终归他们是与DOM树要有联系的,也就是说,这些CSS内容终归是要作用于某个DOM节点的。而根据DOM结构解析出来的CSS结构树,就是所谓的CSSOM树啦。

渲染结合树

渲染的时候,排除CSS样式丢失的情况,DOM需要和CSS树一起组合起来。所以CSS文件的下载过程最好就得快一些,因为一旦CSS下载解析过程太慢的话,很明显,这个解析组合的过程就会受到阻塞。

同样,为了快速渲染网页,我们希望网页内首次加载的DOM结构最好也简单越好,少越好,从而再加上CSS样式加载的快一些,这样组合的过程就会更加效率。

这个过程中,就需要计算某个区域的宽高,设定某个区域某个元素的色值,是否是display为node,是否visibility为hidden,head区域的排除等。

绘制

有了绘制的图本以后呢,浏览器就会从上至下的绘制。有时候浏览器内容过多,良好的用户体验肯定是从上往下顺序渲染,所以大家逐渐排除使用table、iframe等这种组件,避免渲染等待,最后一次性渲染。

重排

渲染完成后呢,会解析JS内容,执行JS内容,一旦JS中有改变DOM布局的操作,将会造成网页的重排,而重排可能就又要走一遍整体的过程了。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9874.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!