【问题标题】:is there performance difference between -transform translate ans scroll-transform translate 和 scroll 之间是否存在性能差异
【发布时间】:2012-03-05 08:51:57
【问题描述】:

我正在建立一个地图网站,例如谷歌地图。会有相互连接的图像块。将通过用鼠标拖动来探索地图,每次拖动后都会加载新图像。为了实现拖拽探索功能,我找到了两种方法:

  1. 调用滚动函数滚动到地图中的正确位置
  2. 在地图上应用 css-transform translate,以便地图的右侧部分进入显示区域。

问题是,这些方法之间是否存在性能差异? (主要是在渲染速度和拖动流畅度方面) 另外,还有其他标准可以选择其中一种方法吗?

【问题讨论】:

    标签: html css scroll draggable css-transforms


    【解决方案1】:

    滚动更好,因为 CSS 转换会导致文档重排,这非常昂贵。

    见:http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

    【讨论】:

    • 我意识到这是一个旧线程,但我今天正在研究这个并遇到了这个测试,它表明滚动比翻译慢 97%:jsperf.com/translate3d-vs-xy/76跨度>
    • jsperf 测试充其量是误导,在循环中执行设置样式只会意味着只有最后一个有任何影响,所以它当然会比实际设置滚动位置更快。跨度>
    【解决方案2】:

    在开发手机游戏时,我们做了类似的事情。

    我们使用了 iScroll JS 库。 http://cubiq.org/iscroll-4

    【讨论】:

      猜你喜欢
      • 2014-05-17
      • 2012-08-21
      • 2023-03-15
      • 2014-02-23
      • 2010-10-02
      • 2012-08-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多