CSS中的重绘和重排(回流)是什么?(面试常问)
2023-09-11 14:19:18 时间
面试中问到的重排和重绘是什么?
其实在我们学习css的时候已经学过重绘和重排是什么,也经常的使用,只是那时候不知道他们会拥有这麽高级的名称。下面我们一起来看看重绘和重排(回流)是啥玩意。我最近找实习工作给问到了,那时候忘记了,后面回到学校查资料简单总结了一下
注意:那些单词要去背背,不然那个题目写的重绘和重排都是英文单词你看不懂就尴尬了
1、重绘(repaint或redraw)
当盒子的位置大小以及其它属性,如:color 、background-color 等都确定下来了,浏览器会根据我们设置对应的样式渲染出来,页面从头开始重绘一遍并且渲染出来。
重绘我们可以这样理解:
重绘是指一个元素发生外观上的改变除非浏览器的行为,浏览器根据元素的新属性重新绘制,使得元素拥有最新的设置的元素,替换之前设置的外观。
1-1触发重绘条件:
改变元素的外观属性,比如:background-color 、color等
2、重排(回流/reflow)
当渲染树中一部分或全部,因为元素的规模尺寸,布局,隐藏等改变需要重新构建,我们就叫回流(重构),每一个页面在加载第一次的时候就会触发一次回流。
2-1触发重排的条件:
页面渲染初始化、添加或删除可见的DOM元素、元素位置改变或者使用动画、元素的尺寸改变[boder、margin等]、读取[height、width、top]等
3、重绘和重排的关系:
重绘不一定触发重排,重排一定触发重绘
相关文章
- 纯CSS实现柱形图
- 关于css中选择器的小归纳(一)
- CSS - 解决子级用css float浮动 而父级div没高度不能自适应高度
- CSS - 工具类 tool.css
- CSS - input 美化
- [CSS] Customer focus / disabled style for select element
- [Angular 9] Custom CSS Variables binding
- [React] Use CSS Transitions to Avoid a Flash of Loading State
- [CSS] Conditionally Apply Styles Using Feature Queries @supports
- [CSS] Targeting Elements with CSS Attribute Selectors
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 为什么CSS这么难学?css核心知识点攻坚指南
- 36. 使用 Chrome 开发者工具 Elements 标签动态修改 SAP UI5 应用的 CSS 类
- 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
- 【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05
- vue-ant design示例大全——icon与分隔符本地css/js资源