-transform 翻译 和 滚动 之间有性能差异吗
我正在建立一个地图网站，如谷歌地图。将会有相互连接的图像块。将通过用鼠标拖动来探索地图，每次拖动后，将加载新图像。为了实现拖动探索功能，我找到了两种方法：
- 调用滚动函数滚动到地图中的正确位置，
- 在地图上应用 css-transform 平移，以便地图的右侧部分进入显示区域。
问题是，这些方法之间是否存在性能差异？ （主要是渲染速度和拖动流畅度方面） 另外，是否还有其他标准来选择其中一种方法？
I am building a maps website like google maps. There will be tiles of images connected to each other. The map will be explored by dragging with mouse where after each drag, new images will be loaded. In order to have explore-by-dragging functionality, I have found two ways:
- calling scrolling functions to scroll to the right place in the map
- applying css-transform translate on the map so that right portion of the map comes into the displayed area.
The question is, is there a performance difference between the methods? (mainly in terms of rendering speed and dragging smoothness)
Also, are there any other criteria to prefer one of the methods?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
滚动更好，因为 CSS 转换可能会导致文档重新流动，这是相当昂贵的。
请参阅：http: //www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
Scrolling is better because CSS transforms can cause document re-flows, which are quite expensive.
See: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
在开发手机游戏时，我们做了类似的事情。
我们使用 iScroll JS 库。
http://cubiq.org/iscroll-4
While working on a mobile game we did something like this.
We used the iScroll JS library.
http://cubiq.org/iscroll-4