0

我有一堆“页面”，我试图在鼠标滚轮上移动，这样顶部的移动比它下面的移动多，等等。它们是position: absolute，目前我正在调整 CSStop以移动它们，但它非常缓慢和笨拙。

编辑：取下演示，问题解决。

相关代码：

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 的 Frames 选项卡中查看这个，以找出什么是这么慢，并得到了这个：https ://dl.dropbox.com/u/407870/static/Screen%20Shot%202012-11-20%20at% 201.44.33%20PM.png

看起来并没有发生太多事情，但也许我错过了一些东西。与我遇到的 Frames 问题有关的先前未回答的问题：Web 检查器使用“Frames”进行分析：当时间轴中没有任何内容时找到性能问题的原因

我知道在发布任何类型的版本（例如，我正在编译 Less 和 Coffeescript in-page）之前还有很多其他的事情需要清理，但滚动是我目前关心的问题，因为它是我前提的核心。

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

4

1 回答 1

0

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

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

你可以看看这个 Google I/O 2012 会议关于这个特殊问题以及如何解决它： https ://www.youtube.com/watch?v=hAzhyTnhEI

于 2012-11-21T11:33:25.057 回答