推荐关注 Meteor JSLint - a Javascript code quality tool jsFiddle D3.js WebStorm 推荐书目 Javascript 权威指南第 5 版
Closure: The Definitive Guide
Closure: The Definitive Guide 
这是一个创建于 4393 天前的主题，其中的信息可能已经有所发展或是发生改变。
要求是效率尽量要高。不光是算法效率，还要考虑DOM元素操作的效率。大家有什么想法？
还有就是遇到类似这种问题解题技巧？
还有就是遇到类似这种问题解题技巧？
 | 1 democ 2014 年 2 月 19 日  1 1. 先复制一份 (不要插入到DOM中,频繁的操作DOM消耗资源是很大的) 2. 对复制出的这份做操作. 方法是从最后一个开始拿插入到一个新的<ul>中 (这一步也不需要插入到DOM中) 3. 将DOM中的<ul>更换为从新排序的<ul> 有不合适的地方请楼下指出. |
 | 2 learnshare 2014 年 2 月 19 日 在内存中操作完成，然后插入到页面中 |
 | 3 kfll 2014 年 2 月 19 日 |
 | 4 bombless 2014 年 2 月 19 日 先remove掉ul，首尾交换上面的li再把ul插回去 |
 | 5 P233 2014 年 2 月 19 日 87 ul {transform: rotate(180deg)} li {transform: rotate(180deg)} 搞定 |
 | 6 tinyhill 2014 年 2 月 19 日 1 [].slice.call(nodeList).reverse(); 循环一次组成字符串插回 ul 节点 |
 | 7 chairuosen 2014 年 2 月 19 日 via Android 卧槽，楼上机智！！ |
 | 8 fakefish 2014 年 2 月 19 日 fragementElement+=(lastchild--) parent.append(fragementElement) 大概是这么个意思，把从最后的一个子元素开始复制到fragmentElement,组装完再一起插入原处 |
| 9 fakefish 2014 年 2 月 19 日 速度最快的肯定不能让dom在每次循环的时候有变化。 |
 | 10 blacktulip 2014 年 2 月 19 日 via iPhone 五楼正解 |
 | 11 sneezry 2014 年 2 月 19 日 最快的方法我感觉是innerHTML |
 | 13 Sunyanzi 2014 年 2 月 19 日 只有我觉得只要简单的遍历一遍然后生成一个反向的大字符串写入 innerHTML 就好吗 ... 这样的优点是快 ... 生成字符串绝对比任何的 DOM 操作来得都要高效 ... 缺点是重新生成了列表 ... 所有原来元素上面的事件和属性都没了 ... 如果要保持原来的元素 ... 大概也只能二分之后 replaceChild 了吧 ... |
 | 14 clippit 2014 年 2 月 20 日 |
 | 15 crs0910 2014 年 2 月 20 日 via Android http://stackoverflow.com/questions/5530472/how-to-handle-10000-li-efficiently 手机chrome测试，字符串和DOM操作响应差不多。 |
 | 17 alay9999 2014 年 2 月 20 日 五楼！五体投地！ |
 | 19 FrankFang128 2014 年 2 月 20 日 via Android 这题哪看到的？ |
 | 21 mikej OP @FrankFang128 知乎 |
 | 22 laoona 2014 年 2 月 20 日 给五楼跪了！ |
| 23 FrankFang128 2014 年 2 月 20 日 via Android @mikej 这个问题是我出的。。。我只是随口一说的，想不到有人转到V2了 :) |
 | 24 mengzhuo 2014 年 2 月 20 日 5楼太机智了！怒赞一个！ 以后的倒序直接加class就over了，js代码又省了很多 |
 | 26 ccccccc 2014 年 2 月 20 日 可以用css3 flex order改变排序 |
 | 27 geew 2014 年 2 月 20 日 5楼碉堡了, 10086个怒赞 |
 | 28 paloalto 2014 年 2 月 20 日 5楼太颠覆了！！！ ！ |
 | 29 RoshanWu 2014 年 2 月 20 日 我是来看5楼的，啊，真是个机智的骚年 |
 | 30 EPr2hh6LADQWqRVH 2014 年 2 月 20 日 次奥怒赞5楼 |
| 32 learnshare 2014 年 2 月 20 日 五楼... 给跪了 |
 | 33 January 2014 年 2 月 20 日 五楼笑死我了 |
 | 34 atian25 2014 年 2 月 20 日 1 赞5楼... 还有个: <ol reversed> <li>list item one</li> <li>list item two</li> <li>list item three</li> <li>list item four</li> <li>list item five</li> </ol> http://www.w3schools.com/tags/att_ol_reversed.asp |
| OP @FrankFang128 是吗？呵呵，没想到还能在这里遇到。。 |
 | 36 iamjs 2014 年 2 月 20 日 5楼。。直接面试官崩溃的节奏。。 |
 | 38 shiny PRO 5楼是嘲弄面试官呀 |
 | 44 Ellison 2014 年 2 月 20 日 5楼怒赞... |
 | 45 fim8 2014 年 2 月 20 日 热情的转到知乎。 |
| 49 P233 2014 年 2 月 20 日 感谢大家! |
 | 51 shiniv 2014 年 2 月 20 日 怒赞 |
 | 53 zztczcx 2014 年 2 月 20 日 我是来看5楼的 |
 | 54 princexu 2014 年 2 月 20 日 5楼碉堡了.... |
 | 55 jieorlin 2014 年 2 月 20 日 ### fdsafdfdsf |
| 56 jieorlin 2014 年 2 月 20 日 1 |
| 57 jieorlin 2014 年 2 月 20 日 |
 | 58 lichgo 2014 年 2 月 20 日 5楼的解法让我想到一道经典算法题： Reverse words in a sentence: "I am a geek" => "geek a am I"。 另外，应用CSS在10000个DOM元素上，每个元素都要重画(repaint)吧？效率如何？会比JS更高？ |
 | 59 lnehe 2014 年 2 月 20 日 把显示器倒过来。。。。 |
 | 60 ericls 2014 年 2 月 20 日 5 楼碉堡了！ |
 | 61 Artotria 2014 年 2 月 20 日 我是来围观5楼的，机智的骚年~ |
 | 62 ccming 2014 年 2 月 20 日 好腻害 |
 | 63 MingZhe 2014 年 2 月 20 日 由于不是搞前端的，对五楼的说法刚开始没注意。没想到下面这么多人赞，果断去查。。。确实碉堡了。给赞一个 |
| 64 iamjs 2014 年 2 月 20 日 @lichgo 难说 因为几乎不可能在真实的场景中遇到。典型的面试题目。 如果我是面试官。给我一个js转换方法和这个答案。我想后者更能给考官留下深刻印象吧。。 |
| 65 FrankFang128 2014 年 2 月 20 日 @iamjs 大家喜欢抖机灵的答案 |
 | 66 RIcter 2014 年 2 月 21 日 @FrankFang128 不过不失为一个好办法。 |
 | 67 donkeylucky 2014 年 2 月 21 日 5楼的 大大的机智 |
 | 68 andy12530 2014 年 2 月 21 日 如果不考虑普通低级浏览器，5楼的办法是最简单好用的。 |
 | 69 qazwsxedc 2014 年 2 月 21 日 围观5楼 |
 | 71 hilenlai 2014 年 2 月 21 日 5楼太机智了！！ |
 | 72 siyang1982 PRO 在本页玩了一下：`$('#Main .box:eq(1), #Main .box:eq(1) > *').css('transform', 'rotate(180deg)')` |
 | 74 YufunHe 2014 年 2 月 21 日 围观五楼 |
 | 75 ffts 2014 年 2 月 21 日 卧槽，看了演示之后才知道5楼的想法多NB |
 | 76 lidonghao 2014 年 2 月 21 日 5楼的答案 面试官也不能说错啊 哈哈 |
 | 77 airski 2014 年 2 月 21 日 大赞机智的5楼。 |
 | 78 lijsh 2014 年 2 月 21 日 服 |
 | 79 HeyMan 2014 年 2 月 21 日 想象力真强！ |
 | 80 flynngao 2014 年 2 月 21 日 5楼鸡汁超越人类 |
 | 81 adam 2014 年 2 月 21 日 可以作为一条面试题~~ |
 | 82 est 2014 年 2 月 21 日 @siyang1982 卧槽居然成功了 |
 | 83 rekey 2014 年 2 月 21 日 特地赶来赞5楼的. |
| 86 FrankFang128 2014 年 2 月 21 日 via Android @RIcter 充分说明前端思维角度和后台是不同的 |
 | 87 sampeng 2014 年 2 月 21 日 由于我带前端团队。。 这个题目，我刚看到。第一反应是，这是个好题。。第二反应，取出来。用算法，然后插入dom。这个是常规的。第三反应，css是控制显示的。如果用css控制呢？我不懂css。所以，我会先用个第二种方式上线，因为开发快。写代码，不一定要精细到极致，一切都是可改的。完全可以满足产品需求，回头再改（如果记得的话）。然后再找时候去网上找找css有没办法。。。收工。 如果面试的用上面的这个思路来回答，我会直接弄进来。。赶紧去给我去干活 |
 | 88 otakustay 2014 年 2 月 21 日 @zzNucker 你确定？不需要relayout/reflow我知道，repaint也不需要那屏幕上的东西是如何改变的？CSS3的translate3D顶多也就是让浏览器支持图层缓存，不用repaint感觉有点太厉害了啊 |
| 89 otakustay 2014 年 2 月 21 日 @lichgo 效率比JS高那是轻轻松松，JS这么做一是DOM结构变化的计算，二是函数调用的损耗（JS<->DOM不是一般的JS函数调用，往往要走一个代理或者序列化），三是引起重布局的损耗，四是有没有浏览器做GPU加速之类的优化的区别 |
 | 90 zzNucker 2014 年 2 月 21 日 @otakustay 唔，我这样表达确实不太对，是不做传统意义上的那种非常耗资源的repaint，就是整个renderlayer tree的重绘。 而用CSS Translate3D这种的话，在开启了硬件合成加速以后会直接在GPU RAM里作为texture改变，就相当于改变的部分很少，而且基本不占用CPU资源。 |
| 91 zzNucker 2014 年 2 月 21 日 刚发现chrome新版取消了windows下的强制合成的选项。 |
| 92 zzNucker 2014 年 2 月 21 日 难道已经默认启用了。 |
| 93 P233 2014 年 2 月 21 日 |
| 94 otakustay 2014 年 2 月 22 日 @P233 感谢实验，理论上translateZ因为有贴图缓存支持肯定够快，DOM操作可能会因为li中的内容复杂度有很大的区别，而transform我理解应该和内容复杂度关系不呈线性 |
 | 96 lygmqkl 2014 年 2 月 22 日 做了6年后端了，说实话 五楼的想法让我眼前一亮，web 不只是数据。 哈哈 |
| 97 P233 2014 年 2 月 22 日 |
 | 98 iLluSioN 2014 年 2 月 22 日 ……给五楼跪 |
 | 99 jabbany 2014 年 2 月 23 日 太机智了....... |
 | 100 run2 2014 年 2 月 26 日 @siyang1982 也是直接论坛最近回复在前的解决方法 |
Select Language