要求是效率尽量要高。不光是算法效率，还要考虑DOM元素操作的效率。大家有什么想法？
还有就是遇到类似这种问题解题技巧？
还有就是遇到类似这种问题解题技巧？
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 4639 days ago, the information mentioned may be changed or developed.
 |
1
1. 先复制一份 (不要插入到DOM中,频繁的操作DOM消耗资源是很大的)
2. 对复制出的这份做操作. 方法是从最后一个开始拿插入到一个新的<ul>中 (这一步也不需要插入到DOM中) 3. 将DOM中的<ul>更换为从新排序的<ul> 有不合适的地方请楼下指出. |
1 |
learnshareFeb 19, 2014
2
在内存中操作完成，然后插入到页面中
|
 |
kfllFeb 19, 2014
3
|
 |
bomblessFeb 19, 2014
4
先remove掉ul，首尾交换上面的li再把ul插回去
|
 |
5
ul {transform: rotate(180deg)}
li {transform: rotate(180deg)} 搞定 |
 |
6
[].slice.call(nodeList).reverse(); 循环一次组成字符串插回 ul 节点
|
 |
chairuosenFeb 19, 2014 via Android
7
卧槽，楼上机智！！
|
 |
fakefishFeb 19, 2014
8
fragementElement+=(lastchild--)
parent.append(fragementElement) 大概是这么个意思，把从最后的一个子元素开始复制到fragmentElement,组装完再一起插入原处 |
|
fakefishFeb 19, 2014
9
速度最快的肯定不能让dom在每次循环的时候有变化。
|
 |
blacktulipFeb 19, 2014 via iPhone
10
五楼正解
|
 |
sneezryFeb 19, 2014
11
最快的方法我感觉是innerHTML
|
 |
SunyanziFeb 19, 2014
13
只有我觉得只要简单的遍历一遍然后生成一个反向的大字符串写入 innerHTML 就好吗 ...
这样的优点是快 ... 生成字符串绝对比任何的 DOM 操作来得都要高效 ... 缺点是重新生成了列表 ... 所有原来元素上面的事件和属性都没了 ... 如果要保持原来的元素 ... 大概也只能二分之后 replaceChild 了吧 ... |
 |
clippitFeb 20, 2014
14
|
 |
catoncatFeb 20, 2014 via Android
15
http://stackoverflow.com/questions/5530472/how-to-handle-10000-li-efficiently
手机chrome测试，字符串和DOM操作响应差不多。 |
 |
alay9999Feb 20, 2014
17
五楼！五体投地！
|
 |
FrankFang128Feb 20, 2014 via Android
19
这题哪看到的？
|
 |
21
@FrankFang128 知乎
|
 |
laoonaFeb 20, 2014
22
给五楼跪了！
|
|
FrankFang128Feb 20, 2014 via Android
23
@mikej 这个问题是我出的。。。我只是随口一说的，想不到有人转到V2了 :)
|
 |
mengzhuoFeb 20, 2014
24
5楼太机智了！怒赞一个！
以后的倒序直接加class就over了，js代码又省了很多 |
 |
cccccccFeb 20, 2014
26
可以用css3 flex order改变排序
|
 |
geewFeb 20, 2014
27
5楼碉堡了, 10086个怒赞
|
 |
paloaltoFeb 20, 2014
28
5楼太颠覆了！！！ ！
|
 |
RoshanWuFeb 20, 2014
29
我是来看5楼的，啊，真是个机智的骚年
|
 |
EPr2hh6LADQWqRVHFeb 20, 2014
30
次奥怒赞5楼
|
|
learnshareFeb 20, 2014
32
五楼... 给跪了
|
 |
33
五楼笑死我了
|
 |
34
赞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 |
|
35
@FrankFang128 是吗？呵呵，没想到还能在这里遇到。。
|
 |
iamjsFeb 20, 2014
36
5楼。。直接面试官崩溃的节奏。。
|
 |
38
5楼是嘲弄面试官呀
|
 |
EllisonFeb 20, 2014
44
5楼怒赞...
|
 |
heckthisplaceFeb 20, 2014
45
热情的转到知乎。
|
|
P233Feb 20, 2014
49
感谢大家!
|
 |
shinivFeb 20, 2014
51
怒赞
|
 |
zztczcxFeb 20, 2014
53
我是来看5楼的
|
 |
princexuFeb 20, 2014
54
5楼碉堡了....
|
 |
jieorlinFeb 20, 2014
55
### fdsafdfdsf
|
|
56
|
|
jieorlinFeb 20, 2014
57
|
 |
lichgoFeb 20, 2014
58
5楼的解法让我想到一道经典算法题：
Reverse words in a sentence: "I am a geek" => "geek a am I"。 另外，应用CSS在10000个DOM元素上，每个元素都要重画(repaint)吧？效率如何？会比JS更高？ |
 |
lneheFeb 20, 2014
59
把显示器倒过来。。。。
|
 |
ericlsFeb 20, 2014
60
5 楼碉堡了！
|
 |
shyrzFeb 20, 2014
61
我是来围观5楼的，机智的骚年~
|
 |
ccmingFeb 20, 2014
62
好腻害
|
 |
MingZheFeb 20, 2014
63
由于不是搞前端的，对五楼的说法刚开始没注意。没想到下面这么多人赞，果断去查。。。确实碉堡了。给赞一个
|
|
FrankFang128Feb 20, 2014
65
@iamjs 大家喜欢抖机灵的答案
|
 |
RIcterFeb 21, 2014
66
@FrankFang128 不过不失为一个好办法。
|
 |
donkeyluckyFeb 21, 2014
67
5楼的 大大的机智
|
 |
andy12530Feb 21, 2014
68
如果不考虑普通低级浏览器，5楼的办法是最简单好用的。
|
 |
qazwsxedcFeb 21, 2014
69
围观5楼
|
 |
hilenlaiFeb 21, 2014
71
5楼太机智了！！
|
 |
72
在本页玩了一下：`$('#Main .box:eq(1), #Main .box:eq(1) > *').css('transform', 'rotate(180deg)')`
|
 |
YufunHeFeb 21, 2014
74
围观五楼
|
 |
fftsFeb 21, 2014
75
卧槽，看了演示之后才知道5楼的想法多NB
|
 |
lidonghaoFeb 21, 2014
76
5楼的答案 面试官也不能说错啊 哈哈
|
 |
airskiFeb 21, 2014
77
大赞机智的5楼。
|
 |
lijshFeb 21, 2014
78
服
|
 |
HeyManFeb 21, 2014
79
想象力真强！
|
 |
flynngaoFeb 21, 2014
80
5楼鸡汁超越人类
|
 |
adamFeb 21, 2014
81
可以作为一条面试题~~
|
 |
estFeb 21, 2014
82
@siyang1982 卧槽居然成功了
|
 |
rekeyFeb 21, 2014
83
特地赶来赞5楼的.
|
|
FrankFang128Feb 21, 2014 via Android
86
@RIcter 充分说明前端思维角度和后台是不同的
|
 |
sampengFeb 21, 2014
87
由于我带前端团队。。
这个题目，我刚看到。第一反应是，这是个好题。。第二反应，取出来。用算法，然后插入dom。这个是常规的。第三反应，css是控制显示的。如果用css控制呢？我不懂css。所以，我会先用个第二种方式上线，因为开发快。写代码，不一定要精细到极致，一切都是可改的。完全可以满足产品需求，回头再改（如果记得的话）。然后再找时候去网上找找css有没办法。。。收工。 如果面试的用上面的这个思路来回答，我会直接弄进来。。赶紧去给我去干活 |
 |
otakustayFeb 21, 2014
88
@zzNucker 你确定？不需要relayout/reflow我知道，repaint也不需要那屏幕上的东西是如何改变的？CSS3的translate3D顶多也就是让浏览器支持图层缓存，不用repaint感觉有点太厉害了啊
|
|
otakustayFeb 21, 2014
89
@lichgo 效率比JS高那是轻轻松松，JS这么做一是DOM结构变化的计算，二是函数调用的损耗（JS<->DOM不是一般的JS函数调用，往往要走一个代理或者序列化），三是引起重布局的损耗，四是有没有浏览器做GPU加速之类的优化的区别
|
 |
zzNuckerFeb 21, 2014
90
@otakustay 唔，我这样表达确实不太对，是不做传统意义上的那种非常耗资源的repaint，就是整个renderlayer tree的重绘。 而用CSS Translate3D这种的话，在开启了硬件合成加速以后会直接在GPU RAM里作为texture改变，就相当于改变的部分很少，而且基本不占用CPU资源。
|
|
zzNuckerFeb 21, 2014
91
刚发现chrome新版取消了windows下的强制合成的选项。
|
|
zzNuckerFeb 21, 2014
92
难道已经默认启用了。
|
|
P233Feb 21, 2014
93
|
|
otakustayFeb 22, 2014
94
@P233 感谢实验，理论上translateZ因为有贴图缓存支持肯定够快，DOM操作可能会因为li中的内容复杂度有很大的区别，而transform我理解应该和内容复杂度关系不呈线性
|
 |
lygmqklFeb 22, 2014
96
做了6年后端了，说实话 五楼的想法让我眼前一亮，web 不只是数据。 哈哈
|
 |
iLluSioNFeb 22, 2014
98
……给五楼跪
|
 |
jabbanyFeb 23, 2014
99
太机智了.......
|
 |
run2Feb 26, 2014
100
@siyang1982 也是直接论坛最近回复在前的解决方法
|
Select Language