javascript - Angular 2 RC 5 Internet Explorer 10 滚动性能不佳

Question

我已经使用 angular 2 构建了一个产品目录应用程序，现在我正在调试 IE 的缺点。所以，事情是这样的:我有一个 CatalogComponent，它包含一些按类别显示产品的子组件。我在页面上有 50-60 个缩略图，所以页面上没有很重的负载。该应用程序在其他浏览器中运行良好，性能还可以。

在 CatalogComponent 中，我有一个函数可以检测当前显示的类别是什么。它监听滚动事件。

this.listeners.catalogScroll = this._renderer.listen(catalog, 'scroll',
    event => self.selectCategoryByScroll(event)
);

这个特殊的函数不会做一些繁重的工作。实际上，只需添加一个简单的 scroll 事件就足够了，目录 div 中没有代码和滚动性能会很糟糕。

catalog.addEventListener('scroll', function () {
    //console.log(1);
});

更有趣的是，如果我调用 scrollToCategory()，它会触发一个 easeInQuad 动画，播放起来比手动滚动页面更慢。我认为这证明我的页面不会太重而无法快速呈现。

关于如何继续消除此问题的任何想法？

编辑

我刚刚观察到只有在通过拖动滚动条滚动时才会发生这种情况。通过滚轮滚动就像一个魅力，没有性能下降。

Answer 1

如评论中所述，问题似乎是 IE 触发了太多滚动事件。

此类问题的一般解决方案，例如在 this Q&A thread正在将事件节流到某个合理的速率，例如像这样(使用 requestAnimationFrame ):

var scrollEventPending = false;
function handleScrollEvent () {
    scrollEventPending = false;
    // handle the event here
}
function throttleScrollEvents () {
    if (scrollEventPending) return;
    scrollEventPending = true;
    requestAnimationFrame(handleScrollEvent);
});
window.addEventListener('scroll', throttleScrollEvents);

但是，此技术的局限性在于，受限事件处理程序仍需要触发以检查先前触发的事件是否未决。在您的情况下，事件发生率似乎如此之高，以至于即使是这种微不足道的检查也足以导致明显的性能问题。

一个可能的解决方案是只使用滚动事件处理程序来检测用户何时开始滚动，并暂时卸载它直到我们通过其他方式检测(例如比较页面 X 和 Y 偏移量) ) 滚动已停止:

var lastX = window.pageXOffset, lastY = window.pageYOffset;
function runWhileScrolling () {
    var currX = window.pageXOffset, currY = window.pageYOffset;
    if (currX == lastX && currY == lastY) {
        window.addEventListener('scroll', startScrolling);
        return;  // the page has stopped scrolling
    }

    // handle scrolling here

    lastX = currX; lastY = currY;
    requestAnimationFrame(runWhileScrolling);
}
function startScrolling () {
    window.removeEventListener('scroll', startScrolling);
    runWhileScrolling();
}
window.addEventListener('scroll', startScrolling);

这是一个演示此技术的简单实时片段，此处用于模拟 CSS 固定定位:

var box = document.getElementById('jsfixed');
var lastX = window.pageXOffset, lastY = window.pageYOffset;
function runWhileScrolling () {
    var currX = window.pageXOffset, currY = window.pageYOffset;
    if (currX == lastX && currY == lastY) {
        window.addEventListener('scroll', startScrolling);
        return;  // the page has stopped scrolling
    }

    box.style.top = currY + 80 + 'px';
    box.style.left = currX + 10 + 'px';

    lastX = currX; lastY = currY;
    requestAnimationFrame(runWhileScrolling);
}
function startScrolling () {
    window.removeEventListener('scroll', startScrolling);
    runWhileScrolling();
}
window.addEventListener('scroll', startScrolling);

#cssfixed, #jsfixed {
  box-sizing: border-box;
  width: 250px; height: 50px;
  padding: 15px 5px;
  background: white;
}
#cssfixed {
  position: fixed;
  top: 20px; left: 10px;
  border: 2px solid green;
}
#jsfixed {
  position: absolute;
  top: 80px; left: 10px;
  border: 2px solid red;
}
body {
  width: 3000px;
  height: 3000px;
  background: url(/image/ybp2X.png);
}

<div id="cssfixed">This box is kept fixed by CSS.</div>
<div id="jsfixed">This box is kept fixed by JS.</div>

理想情况下，当页面滚动时，这两个框不应相互移动。在 Chrome 57、Opera 44 和 Firefox 49 上，确实如此。在 IE 11 上，滚动时红色框确实会明显移动和闪烁，但至少滚动本身是平滑的，滚动后框正确地返回到其原始位置。

请注意，像上面那样使用 requestAnimationFrame 通常会导致滚动处理程序在页面滚动时每秒被调用大约 60 次。如果您不需要如此频繁的更新，您可以将其替换为例如setTimeout(runWhileScrolling, 200)(每秒更新 5 次)。