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

传统的走马灯/轮播实现 无非是通过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来实现 ，但我不是我想要的，所以我就添加了clearAnimate来删除上一个块的cssRule，保证一条cssRule就可以实现我上千个块(甚至更多)的动画，代码如下

/** * 计算lamplist的width * * @param {number} w1 走马灯宽度 * @param {number} animateNum 动画编号 */lampStyle(w1, animateNum) {let defaultScreen = 1707; // 默认分辨率let w2, screen, duration;w2 = w1;screen = document.body.offsetWidth; // 当前设备分辨率if (w1 && w2 < screen) w2 = screen;duration = (w2 / screen) * 25 * (screen / defaultScreen) + 's';let w = -w1 + 'px';let rule, cssRule;let ss = document.sheet || document.styleSheets;let len = ss.length;let parentSheet, index;if (this.animateName) {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;}}}}let token = window.WebKitCSSKeyframesRule ? "-webkit-" : "";!animateNum && (animateNum = 1);if (!parentSheet) {let style = document.createElement("style");document.head.appendChild(style);parentSheet = style.sheet;index = 0;this.animateName = 'marquee' + animateNum;} else {(this.animateName === ('marquee' + animateNum)) && (animateNum = 0);this.animateName = 'marquee' + animateNum; // 保存动画 便于下次删除}if (parentSheet) {this.parentSheet = parentSheet;this.index = index;this.clearAnimate(parentSheet, index);parentSheet.insertRule('@' + token + 'keyframes ' + this.animateName +' {}', index);cssRule = parentSheet.cssRules[index];(cssRule.insertRule||cssRule.appendRule).call(cssRule, '0% {}');(cssRule.insertRule||cssRule.appendRule).call(cssRule, '100% {}');cssRule.cssRules[0].style.left = screen + 'px';cssRule.cssRules[1].style.left = w;}let div = document.getElementById('lampContent');div.style.animation = div.style.WebkitAnimation = this.animateName + ' ' + duration + ' linear 1'; // infinite},