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

传统的走马灯/轮播实现 无非是通过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
		},