web前端全系列 教程
1839个小节阅读:2244k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
渲染树转换为网页布局,称为“布局流”(flow);布局显示到页面的这个过程,称为“绘制”(paint)。它们都具有阻塞效应,并且会耗费很多时间和计算资源。
页面生成以后,脚本操作和样式表操作,都会触发“回流”(reflow)和“重绘”(repaint)。
回流:当节点树中的一部分因为元素的规模尺寸,布局,隐藏等改变而需要重新构建
重绘:当节点数中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的
温馨提示
回流和重绘并不一定一起发生,回流必然导致重绘,重绘不一定需要回流。比如改变元素颜色,只会导致重绘,而不会导致回流;改变元素的布局,则会导致重绘和回流
回流
重绘
color | border-style | visibility | background |
---|---|---|---|
text-decoration | backgtound-image | background-repeat | background-position |
outline-color | outline | outline-style | border-radius |
outline-width | box-shadow | background-size |
x// 引发两次回流
box.style.top = '100px';
console.log(box.style.top);//=>'100px'
box.style.left = '100px';
// 引发一次回流
box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=>'100px'
实时效果反馈
1. 以下那个操作会造成回流:
A 改变元素背景颜色
B 添加动态元素
C 增加元素圆角效果
D 改变元素字体颜色
答案
1=>B