看到一道面试题：<ul>有 10000 个<li>子元素，如何将这 10000 个<li>颠倒顺序。

[mikej]

要求是效率尽量要高。不光是算法效率，还要考虑DOM元素操作的效率。大家有什么想法？
还有就是遇到类似这种问题解题技巧？

[adam]

可以作为一条面试题~~

[est]

@siyang1982 卧槽居然成功了

[rekey]

特地赶来赞5楼的.

[Keinez]

@P233 五楼已经颠覆我对CSS3的认知

[zzNucker]

@lichgo CSS3动画是不需要repaint的。

[FrankFang128]

@RIcter 充分说明前端思维角度和后台是不同的

[sampeng]

由于我带前端团队。。
这个题目，我刚看到。第一反应是，这是个好题。。第二反应，取出来。用算法，然后插入dom。这个是常规的。第三反应，css是控制显示的。如果用css控制呢？我不懂css。所以，我会先用个第二种方式上线，因为开发快。写代码，不一定要精细到极致，一切都是可改的。完全可以满足产品需求，回头再改（如果记得的话）。然后再找时候去网上找找css有没办法。。。收工。
如果面试的用上面的这个思路来回答，我会直接弄进来。。赶紧去给我去干活

[otakustay]

@zzNucker 你确定？不需要relayout/reflow我知道，repaint也不需要那屏幕上的东西是如何改变的？CSS3的translate3D顶多也就是让浏览器支持图层缓存，不用repaint感觉有点太厉害了啊

[otakustay]

@lichgo 效率比JS高那是轻轻松松，JS这么做一是DOM结构变化的计算，二是函数调用的损耗（JS<->DOM不是一般的JS函数调用，往往要走一个代理或者序列化），三是引起重布局的损耗，四是有没有浏览器做GPU加速之类的优化的区别

[zzNucker]

@otakustay 唔，我这样表达确实不太对，是不做传统意义上的那种非常耗资源的repaint，就是整个renderlayer tree的重绘。 而用CSS Translate3D这种的话，在开启了硬件合成加速以后会直接在GPU RAM里作为texture改变，就相当于改变的部分很少，而且基本不占用CPU资源。

[zzNucker]

刚发现chrome新版取消了windows下的强制合成的选项。

[zzNucker]

难道已经默认启用了。

[P233]

@lichgo
@shiye515
@otakustay
@zzNucker

做了个简单的测试（可能并不严谨），Chrome 下 10000 个 li 元素，page paint time 在 3.4ms - 4.7ms 左右；使用 ul,li {transform: rotate(180deg)} 反转后（不会开启 GPU 加速），骤增到 13.2ms - 16.6ms 左右；translateZ(0) 强制开启 GPU 加速后，page paint time 只有 1.5ms - 1.8ms

[otakustay]

@P233 感谢实验，理论上translateZ因为有贴图缓存支持肯定够快，DOM操作可能会因为li中的内容复杂度有很大的区别，而transform我理解应该和内容复杂度关系不呈线性

[mikej]

@otakustay
@zzNucker
@P233
研究得够深！都是前端牛人啊。

[lygmqkl]

做了6年后端了，说实话 五楼的想法让我眼前一亮，web 不只是数据。 哈哈

[P233]

@otakustay 应该是这样的，贴两张测试截图





开启 GPU 加速后，recalculate 时间竟然增加了很多，但 paint time 毫无疑问减少了

[iLluSioN]

……给五楼跪

[jabbany]

太机智了.......

[sobigfish]

@siyang1982 也是直接论坛最近回复在前的解决方法