javascript - 提高具有多个列表元素的纯 Javascript 平滑滚动的性能

Question

我正在尝试用纯 CSS 和 Javascript 复制 the recent, 30-year Apple Mac retrospective 用于一个小的元素时间表。我有第一个全屏英雄的基本布局和扇形的、悬停时展开的适当工作。但是屏幕后半部分的时间线平滑滚动不起作用，在 Mac OS X 上的 Google Chrome 32.0.1700.102 中即使滚动非常慢也是 obviously jittery。您可以下载一个文件夹，其中包含一个 index.html 和必要的 CSS 和 JS here 。

具体来说，我的两个问题是:

1. 修复这种平滑滚动的纯 CSS/JavaScript 解决方案是什么？我很感激能调试此示例，而不是将我指向另一个有效的示例。

2. 与此相关，我可以/应该做些什么来调试它以隔离问题？我天真地尝试收集 JavaScript CPU 配置文件，但没有发现任何需要注意的东西。

---

基本结构

时间轴的结构是一个包含有序列表的nav，每个li 包含元素，即

<nav id='timeline'>
    <ol>
        <li class='project' id='zero'>
            <div class='description'>
                <h2> Project 0 </h2>
                <span> The project that changed everything </span>
                <div class='icon'></div>
            </div> <!-- div.description -->
        </li> <!-- li.project#zero -->
    </ol>
</nav> <!-- nav#timeline -->

我有一个简单的事件循环来检测全局鼠标位置并处理滚动检测，

// 20ms event loop to update a global mouseX, mouseY position and handle scroll detection
var mouseX = null;
var mouseY = null;
var scrollTimeline = null;
var updateInterval = 10;
var scrolling = false;
window.onmousemove = function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
    if (!scrollTimeline) {
        scrollTimeline = window.setInterval(scroll, updateInterval);
    }
};

每 10 毫秒调用一个简单的滚动处理程序，

function scroll(event) {
    var buffer = window.innerWidth/4;

    var distanceToCenter = Math.abs(window.innerWidth/2-mouseX);
    var speed = distanceToCenter/(window.innerWidth/2);
    if (mouseX < buffer) {
        scrolling = true;
        scrollLeft(speed);
    }
    else if ((window.innerWidth - mouseX) < buffer) {
        scrolling = true;
        scrollRight(speed);
    }
    else {
        scrolling = false;
        window.clearInterval(scrollTimeline);
        scrollTimeline = null;
    }
}

所有实际的滚动都是通过两个函数 scrollRight 和 scrollLeft< 调整包含 nav 的 left 属性来完成的，根据鼠标位置使用 speed 参数调用。

function scrollRight(speed) {
    var leftPixels = parseInt(getStyleProp(timeline, 'left'), 10);
    var toShift = Math.pow(speed,3)*updateInterval;
    var newLeft = leftPixels - toShift;

    if (newLeft >= -1400 && newLeft  <= 0) {
        timeline.style.left = newLeft + 'px';
    }
}

(getStyleProp 是一个简单的实用函数，用于获取计算的 left 属性，如果它没有被显式设置，我从 this answer 复制):

// Utility function to grab style properties when unset
function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}

我尝试过的

所以，在排除所有这些基础知识的情况下，我尝试了:

• 删除一些创建扇形效果的 CSS 过渡
• 使用一张图片而不是六张
• 在循环中调整left，一次一个像素，而不是小幅跳跃
• 删除任何包含的文本及其过渡。
• 并删除 nav 中包含的任何 li——这解决了问题，但我不确定为什么/如何导致 observed jitter

谢谢!

Answer 1

事实证明，最初的抖动是因为在 CSS 中使用 saturate 转换的开销。我使用 requestAnimationFrame 找到了一个更好的解决方案.