浏览器渲染原理及重绘和重排

最新推荐文章于 2024-07-25 09:24:40 发布

qq_40178497

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量72

点赞数

分类专栏：前端文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/qq_40178497/article/details/123269564

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

                    
                        
                    
                    HTML： 字节数据 => 字符串 => Token（标记） => Node => DOM （尽量少的添加无意义的标签）
CSS：字节数据 => 字符串 => Token => Node =>CSSOM (尽量避免过于具体的CSS选择器)
生成DOM树和CSSOM树后将其组合成渲染树（渲染树只包含需要显示的节点和这些节点的样式信息）
生成渲染树后根据渲染树进行布局（即回流），然后调用GPU绘制合成图层，显示在屏幕上
构建DOM
 字节数据 -> 字符串 -> Token -> Node -> DOM
 浏览器从磁盘或者网络读取到HTML原始字节，并根据文件的指定编码将其转换成字符串，然后将字符串转换成Token，例如<html>、<body>等，在token中会标识出当前Token是“开始标签”或者“结束标签”亦或是“文本”等信息，然后创建出节点对象，最后构建出DOM树
构建CSSOM
 字节数据 -> 字符串 -> Token -> Node -> CSSOM
重排（回流）
 根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和几何尺寸大小），并将其安置在界面中的正确位置
 当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受影响的部分失效，并重新构建渲染树
 任何改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流 
  添加或者删除可见DOM元素
元素尺寸改变–边距、填充、边框、高度
内容变化，比如input框中输入文字
浏览器窗口尺寸改变–resize事件发生时
计算offsetWidth和offsetHeight属性
 
重绘
 一个元素的外观被改变但不影响其在文档流中的位置所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
 引起重绘的属性和方法
 color、border-style、visibility、background、text-decoration、background-image、background-position、background-repeat、outline-color、outline、border-radio、box-shadow、background-size
重排避免 
  使用最佳布局方案，不要使用内联样式和table布局，内联样式会在下载 HTML 时影响布局，并触发额外的 reflow，table 布局开销很大，因为解析器需要多次传递去计算单元格维度
最小化 CSS 规则的数量，css 规则越少，重排越快，要尽量避免复杂的 css 选择器
最小化 DOM 层级
更改 class 的 DOM 层级要低，减小重排的范围，只重排必要的元素
从文档流中移除复杂的动效，通过使用position: absolute; 或者 position: fixed;来使有动效的元素脱离文档流，这可以在不影响文档流中的其它元素的情况下更新尺寸和位置
批量更新元素，如更改元素的多个样式时通过加类class来一次性更改，而不是JS操作一次只改一个，或者一次添加多个元素节点
限制受影响的元素
意识到平滑影响性能，每帧移动 1px 看起来平滑，但是低端机会卡顿，每帧移动 4px，需要 1/4 的重排，且可能只会稍微不那么平滑
 

                

qq_40178497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器渲染原理及重绘和重排

HTML：字节数据 => 字符串 => Token（标记） => Node => DOM （尽量少的添加无意义的标签）CSS：字节数据 => 字符串 => Token => Node =>CSSOM (尽量避免过于具体的CSS选择器)生成DOM树和CSSOM树后将其组合成渲染树（渲染树只包含需要显示的节点和这些节点的样式信息）生成渲染树后根据渲染树进行布局（即回流），然后调用GPU绘制合成图层，显示在屏幕上构建DOM字节数据 -> 字符串 .
复制链接

扫一扫

专栏目录