卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › 页面的重绘(repaint)与回流(reflow)

页面的重绘(repaint)与回流(reflow)

坚果大叔
2018-12-12 14:16:10技术阅读 2,869

1. 回流(reflow)

当dom中render树中的节点或者元素的大小,边距,数量发生变化后,导致页面需要重新构建的过程叫做回流。另外如果浏览器获取某些元素属性也会触发回流,例如:offsetTop,offsetLeft等。

2. 重绘(repaint)

当dom中元素的属性,例如:颜色,字体样式等发生变化时,只需要更改该元素的时候叫做重绘。

3.回流的成本高于重绘

4.回流一定重绘,重绘不一定会回流

5.如何优化

1.避免单个修改节点样式,尽量一次性修改
2.使用DocumentFragment将需要多次修改的DOM元素缓存,修改好后一次性替换
3.将需要多次修改的DOM元素设置成display:none,修改完成后在改回来。
4.避免读取上述的那些属性
5.将复杂的dom节点脱离文档流。
repaint
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
map,filter,forEach的区别和用法
上一篇
Vue响应式原理
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
Mac防撤回插件
使用uview-plus遇到的一些问题!
重学JavaScript之window对象
利用yalc本地调试NPM组件库!
生活就是每一帧每一秒
最近半个月
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
431 0 2
什么是 Skill?
2026-08-12 21:32:42
348 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
690 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,683 4 0
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢