简单说一下页面重绘和回流?
1、什么是回流
回流:当 render tree 的一部分或全部的元素因改变了自身的宽高,布局,显示或隐藏,或者元素内部的文字结构发生变化 导致需要重新构建页面的时候,回流就产生了2、什么是重绘
重绘:当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就会产生重绘。例如你改变了元素的 background-color.... 因此得出了一个结论:回流必定触发重绘,而重绘不一定触发回流
需要要对元素进行复杂的操作时,可以先隐藏(display:"none"),操作完成后再显示需要创建多个 DOM 节点时,使用 DocumentFragment 创建完后一次性的加入document
缓存 Layout 属性值,如:var left = elem.offsetLeft; 这样,多次使用left 只产生一次回流
尽量避免用 table 布局(table 元素一旦触发回流就会导致 table 里所有的其它元素回流)避免使用 css 表达式(expression),因为每次调用都会重新计算值(包括加载页面)尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color
批量修改元素样式:elem.className 和 elem.style.cssText 代替elem.style.xxx
本文来自博客园,作者:jialiangzai,转载请注明原文链接:https://www.cnblogs.com/zsnhweb/articles/17501930.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现