前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【说站】JavaScript如何减少重绘和回流

【说站】JavaScript如何减少重绘和回流

作者头像
很酷的站长
发布2022-11-24 11:57:12
6240
发布2022-11-24 11:57:12
举报
文章被收录于专栏:站长的编程笔记

JavaScript如何减少重绘和回流

方法说明

1、用transform代替top。

2、用visibility换display。

none,前者只引起重绘,后者引起回流。

3、不要将节点属性值放在一个循环。

4、不要使用table布局。

5、动画实现的动画速度越快,回流次数越多。

也可以使用requestAnimationFrame。

6、将频繁重绘或回流的节点设置为图层。

实例

代码语言:javascript
复制
for(var i = 0;i<=10;i++){
   var body = document.getElementsByTagName('body')[0]
   var h = body.offsetHeight;
}

以上就是JavaScript减少重绘和回流的方法,希望对大家有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JavaScript如何减少重绘和回流
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档