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

看起来似乎没有太多事情发生，但也许我错过了一些东西。以前没有答案的问题与我遇到的框架问题有关：Web inspector profiling with "Frames": finding the cause of performance problems when nothing appears in the timeline

我知道在任何类型的发布之前都应该清理一些其他的东西（例如，我在页面中编译Less和Coffeescript）但是滚动是我目前的关注，因为它是我的核心前提。

我怎样才能最好地提高速度呢？

Answer 1

好吧我觉得我发现了问题（亲爱的沃森）。它不是来自滚动事件，而是更多关于你用它做什么。如果你检查框架，你有一个需要70毫秒的绘画。那是因为你使用像箱子阴影这样的重css3规则。如果你删除它，你将只有7毫秒的绘画！（所以10倍的表现）。

作为一般规则，尽量避免在动画元素上使用css3属性（因为它们很难为浏览器渲染！）。

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

通过$（元素）.css（'top'）移动元素时可怕的jankiness

1 个答案: