前端优化-走马灯实现对比

最新推荐文章于 2025-06-29 13:53:57 发布

biu-biu-biu

最新推荐文章于 2025-06-29 13:53:57 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：代码进阶-优化篇文章标签：前端优化 cssRule setTimeout 走马灯

本文链接：https://blog.youkuaiyun.com/guard_ring/article/details/78762592

本文探讨了传统走马灯实现的性能问题，特别是在处理大量数据时导致的浏览器卡顿。作者提出了一种优化方案，通过前端分块和js控制cssRule动态更新，避免使用setTimeout，以减少性能损耗。这种方法适用于数据量庞大的场景，通过动态添加和清除cssRule，实现了高效且流畅的走马灯效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传统的走马灯/轮播实现无非是通过setTimeout来设置偏移量而已，但是这种方式非常的损耗性能，可能一般人没有太大感觉，像我现在处理的走马灯数据最少有上千条，300条数据在页面展示就要10万多px了，ie页面直接卡死(chrome不会)。所以前端我就通过分块和js控制cssRule来动态实现。代码如下：

				for (let i = 0, len = ss.length; i < len; ++i) {
					for (let x = 0; x < ss[i].cssRules.length; ++x) {
						rule = ss[i].cssRules[x];
						if (rule.name === this.animateName && rule.type == CSSRule.KEYFRAMES_RULE) {
							parentSheet = ss[i];
							index = x;
							cssRule = rule;
						}
					}
				}

其中this.animateName就是你在css的animate属性设置的动画名字。一般其实只需要写死animateName就可以实现走马灯效果了(相当于通过css来实现，性能相比setTimeout来说肯定更好)。

上面我说过我需要处理的数据量太多，后台传给我的数据至少上千条，如果将这上千条数据直接展示在前端，页面直接卡死（chrome 2000多条数据的时候还ok，但6000的时候就卡了，ie更不用说，我300条数据就已经卡了），我测试过300条数据的时候需要设置100%时的left值达到100000以上，所以我前端采取了分块方式呈现，每50条数据一个块，上一个块动画加载完成才可以实现下一个块的动画，所以我这里的animateName是动态的，每个块循环次数都只是一次。因为这个原因我可能要添加多个cssRule来实现，但我不是我想要的，所