jquery - 通过 $(element).css ('top' 移动元素时出现严重问题)

Question

我有一堆“页面”，我试图在鼠标滚轮上移动，这样顶部的页面比它下面的页面移动得更多，等等。它们是 position: absolute，目前我正在调整 CSS top 来移动它们，但它非常慢而且卡顿。

编辑:删除演示，问题已解决。

相关代码:

window.onScroll = (e, delta) ->
    e.preventDefault()

    minHeight = 5
    maxHeight = 800
    top_scale = 50
    second_scale = 5
    third_scale = 1
    stack = $('.card_stack').first().children()
    top = $(stack[stack.length - 1])
    second = $(stack[stack.length - 2])
    third = $(stack[stack.length - 3])

    for pair in [[top, top_scale], [second, second_scale], [third, third_scale]]
        pair[0].css('top', parseInt(pair[0].css('top'), 10) + delta*pair[1] + 'px')

$(window).mousewheel(window.onScroll)   # jQuery mousewheel plugin  

我试着在 Chrome 的“框架”选项卡中查看它，以弄清楚是什么原因如此缓慢，并得到了这个:https://dl.dropbox.com/u/407870/static/Screen%20Shot%202012-11-20%20at%201.44.33%20PM.png

看起来好像没什么大不了的，但也许我漏掉了什么。与我遇到的框架问题相关的先前 Unresolved 问题:Web inspector profiling with "Frames": finding the cause of performance problems when nothing appears in the timeline

我知道在任何类型的发布之前还有很多其他的事情需要清理(例如，我正在页面内编译 Less 和 Coffeescript)但是滚动是我目前关心的，因为它是我的核心前提。

我怎样才能最好地加快速度？

Answer 1

好的，我想我发现了问题(我亲爱的华生)。它不是来自滚动事件，而是更多关于你用它做什么。如果你检查帧你有一幅画需要 70 毫秒。那是因为你使用了大量的 css3 规则，比如 box-shadows。如果删除它，您将只有 7 毫秒的绘画时间! (因此性能提高了 10 倍)。

作为一般规则，请尽量避免在动画元素上使用 css3 属性(因为它们对于浏览器来说很重!)。

您可以查看此 Google I/O 2012 session ，了解此特定问题及其解决方法: https://www.youtube.com/watch?v=hAzhayTnhEI