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

[mikej]

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

[democ]

1. 先复制一份 (不要插入到DOM中,频繁的操作DOM消耗资源是很大的)
2. 对复制出的这份做操作. 方法是从最后一个开始拿插入到一个新的<ul>中 (这一步也不需要插入到DOM中)
3. 将DOM中的<ul>更换为从新排序的<ul>

有不合适的地方请楼下指出.

[learnshare]

在内存中操作完成，然后插入到页面中

[kfll]

@democ 复制的实现复杂效率也不高，`cloneNode` 也不克隆事件
@mikej 我的话会掐半用 `replaceChild` 首尾交换
关系到 DOM 的优先考虑浏览器 API 再考虑算法..
不一定对...

[bombless]

先remove掉ul，首尾交换上面的li再把ul插回去

[P233]

ul {transform: rotate(180deg)}

li {transform: rotate(180deg)}

搞定

[tinyhill]

[].slice.call(nodeList).reverse(); 循环一次组成字符串插回 ul 节点

[chairuosen]

卧槽，楼上机智！！

[fakefish]

fragementElement+=(lastchild--)
parent.append(fragementElement)
大概是这么个意思，把从最后的一个子元素开始复制到fragmentElement,组装完再一起插入原处

[fakefish]

速度最快的肯定不能让dom在每次循环的时候有变化。

[blacktulip]

五楼正解

[sneezry]

最快的方法我感觉是innerHTML

[sneezry]

@P233 五楼你碉堡了。。。

[Sunyanzi]

只有我觉得只要简单的遍历一遍然后生成一个反向的大字符串写入 innerHTML 就好吗 ...

这样的优点是快 ... 生成字符串绝对比任何的 DOM 操作来得都要高效 ...

缺点是重新生成了列表 ... 所有原来元素上面的事件和属性都没了 ...

如果要保持原来的元素 ... 大概也只能二分之后 replaceChild 了吧 ...

[clippit]

http://jsperf.com/reverse-li

10000的时候确实用数组 reverse 比较快，但是如果 DOM 节点比较少的时候，反而是直接操作比较快呢

[crs0910]

http://stackoverflow.com/questions/5530472/how-to-handle-10000-li-efficiently
手机chrome测试，字符串和DOM操作响应差不多。

[democ]

@clipplt 涨姿势了.数据说话.

[alay9999]

五楼！五体投地！

[jprovim]

@P233 非常好的Trick

[FrankFang128]

这题哪看到的？

[mikej]

@clippit 佩服，真会解决问题
@P233 太颠覆了。。。
@fakefish 不错啊，思路挺清晰，代码也很简练。