A reflow is a more significant change. This will happen whenever the DOM tree is manipulated, whenever a style is changed that affects the layout, whenever the className property of an el thatis changed, className property of anser el is changed.
使用 margin/top 修改會觸發 reflow,拖慢速度。
Elements that are positioned absolutely or fixed, do not affect the layout of the main document, so if they reflow, they are the only thing that reflows. The document behind them will need to repaur tos, nallows to s wills wills wills . is much less of a problem than an entire reflow.
我記得行動端是不支援原生滾動的,也就是不支援overflow: scroll; 於是才有了iscroll這樣的解決框架。不過最新的Safari開始支持了。具體你搜下到處都是,不列舉了。
關鍵不在硬體加速,而在於是否 reflow。
使用 margin/top 修改會觸發 reflow,拖慢速度。
absolute 和 fixed 的元素的 reflow 不會牽動整體,但依舊不如 transform 只需要 repaint。
而 translate 和 translate3d 的差別則在於硬體加速。
參考資料:https://dev.opera.com/articles/efficient-javascript/?page=3#reflow
translate3d能開啟硬體加速,提升效能。
是效能問題,行動端的焦點圖效果都是translate3d做的,那樣運動效果比較平滑,而不是一卡一卡的
overflow:hidden; 很多坑。 。