logBoxHeight() { // 获取box.offsetHeight console.log(box.offsetHeight); // 更新box样式 box.classList.add('super-big'); }

1 getMaxWidth: (function () { 2 var cache = {}; 3 function getwidth() { 4 if (maxWidth in cache) { 5 return cache[maxWidth]; 6 } 7 var target = this.node, 8 width = this.width, 9 screen = document.body.clientWidth, 10 num = target.length, 11 maxWidth = num * width + 10 * num + 20 - screen; 12 cache[maxWidth] = maxWidth; 13 return maxWidth; 14 } 15 return getwidth; 16 })(),

改成这种方式后，直接蹭蹭蹭～ 减少了10多ms

3. 对用户输入事件的处理函数去抖动

如果被触摸的元素绑定了输入事件处理函数，比如touchstart/touchmove/touchend，那么渲染层合并线程必须等待这些被绑定的处理函数执行完毕才能执行，也就是用户的滚动页面操作被阻塞了，表现出的行为就是滚动出现延迟或者卡顿。

简而言之就是你必须确保用户输入事件绑定的任何处理函数都能够快速的执行完毕，以便腾出时间来让渲染层合并线程完成他的工作。

输入事件处理函数，比如scroll/touch事件的处理，都会在requestAnimationFrame之前被调用执行。因此，如果你在上述输入事件的处理函数中做了修改样式属性的操作，那么这些操作就会被浏览器暂存起来。

然后在调用requestAnimationFrame的时候，如果你在一开始就做了读取样式属性的操作，那么将会触发浏览器的强制同步布局操作(即在javascript阶段中执行布局)，这样会导致多次布局，效率低下。

优化如下：

window.requestAnimationFrame(function () { context.animateTo(nowPos); //需要更新位置的交给RAF });

4. 减少不必要的重绘

续上面，开启paint flashing 之后，可以看到浏览器重新绘制了哪些区域。发现有一些不必要重绘的区域也重绘了～给这些开启GPU优化（上文中提到）

直接看 timeline 效果，全绿了～悬着的心终于放下了

参考文章：