我们一起来做一道 JS 题目：在控制台打印 React 仓库的 Fork 列表
bw2 · bergwhite · 2017-07-11 13:34:36 +08:00 · 4565 次点击这是一个创建于 2703 天前的主题，其中的信息可能已经有所发展或是发生改变。
要求
获取当前页面已 Fork 的成员列表，存储在数组。代码短，耗时少者更佳。返回数组长度应该是 1000。
地址
https://github.com/facebook/react/network/members
示例代码
// 时间和函数长度统计
function timeAndLengthCount(callback){
const timeStart = new Date().getTime()
callback()
const timeEnd = new Date().getTime()
console.log('Time: ' + (timeEnd-timeStart) + 'ms')
console.log('Len: '+ callback.toString().length)
}
// 执行输出 Fork 成员列表的函数
// Time: 7ms
// Len: 223
timeAndLengthCount(()=>{
const forkedMenber = document.querySelectorAll('.repo > a:nth-child(odd)');
const forkedMenberList = [];
[].forEach.call(forkedMenber, z => forkedMenberList.push(z.innerHTML));
console.log(forkedMenberList);
})
接下来就是开始你的表演了
 |
1
nino 2017-07-11 13:56:08 +08:00  1
[...document.querySelectorAll('#network .repo > a:first-of-type')].map(el => el.textContent)
|
 |
2
xiaojie668329 2017-07-11 13:59:37 +08:00 via iPhone 1
把 querySelectorAll 换成 getElementsBy...会变快。
|
 |
3
zjsxwc 2017-07-11 14:00:43 +08:00 1
剩下的就是 css 选择器的花式写法了
|
 |
5
bw2 OP @xiaojie668329 确实，然后使用正则？
|
 |
8
Wangxf 2017-07-11 14:09:38 +08:00 1
[...document.querySelectorAll('.repo')].slice(1).map((item)=>item.children[2].innerHTML)
|
 |
9
crs0910 2017-07-11 14:14:11 +08:00 1
document.querySelector('#network').textContent.replace(/\s/g, '').split('/react')
|
|
11
bw2 OP |
 |
12
hueo 2017-07-11 14:20:38 +08:00 1
要考虑性能的话正则是最快的。
不过昨天的代码是这样的： Array.from(document.querySelectorAll('#network .repo > img + a'), e => e.href) |
|
13
crs0910 2017-07-11 14:21:27 +08:00
加个 shift 不就得了，我测是 1ms
|
|
14
crs0910 2017-07-11 14:28:10 +08:00
@xiaojie668329 貌似 querySelector\querySelectorAll 都比 getElementById\getElementsByTag 要快，我是最新的 Chrome.
https://jsperf.com/getelementsbytagname-a-0-vs-queryselector-a/4 |
|
17
Wangxf 2017-07-11 14:37:32 +08:00
[...document.getElementById('network').getElementsByTagName('a')].filter((item,index)=>index%2===0).map((item)=>item.innerHTML).slice(1);
|
|
18
crs0910 2017-07-11 14:40:30 +08:00
@bw2
document.getElementById('network').textContent.replace(/\s/g, '').split('/react').slice(1)) document.getElementById('network').textContent.replace(/\s/g, '').split('/react').splice(1)) |
|
19
Wangxf 2017-07-11 14:44:57 +08:00
最新版 1.5s
[...document.getElementById('network').querySelectorAll('a:nth-child(odd)')].slice(1).map((item)=>item.innerHTML) |
|
20
crs0910 2017-07-11 15:01:22 +08:00 1
去掉一个 replace 的版本
document.querySelector('#network').textContent.split(/\s*\/\s*react\s*/g).splice(1) |
 |
21
colorwin 2017-07-11 15:19:51 +08:00
你们的电脑的真好....我的古董机跑你们的代码要慢 5s 以上...
|
 |
22
iiji86 2017-07-11 15:22:56 +08:00 1
[...document.querySelectorAll('img+a')].map(_=>_.text)
|
|
23
colorwin 2017-07-11 15:23:44 +08:00
同时也很不稳定啊, 同一段代码最慢有 24, 快的有 11
|
 |
24
ctsed 2017-07-11 15:57:39 +08:00 1
network.innerHTML.match(/@[^"]*/g).join().split('@').slice(2) 5ms 61
[...network.querySelectorAll('img+a')].map(_=>_.text) 1ms 53 |
|
25
bw2 OP 厉害了，最新记录是 @crs0910
Time: 1ms Len: 87 document.querySelector('#network').textContent.split(/\s*\/\s*react\s*/g).splice(1) |
 |
30
jun0205 2017-07-11 16:13:56 +08:00 1
[...document.querySelectorAll('.network-tree ~ a:not(:last-child)')].map(el=>el.text)
|
|
31
ctsed 2017-07-11 16:18:29 +08:00
network.innerText.split(/\s*\/\s*react\s*/g).splice(1)
2ms 50 |
|
32
ctsed 2017-07-11 16:20:47 +08:00
network.innerText.split(/ \/ react\s*/g).splice(1)
48  |
|
33
ctsed 2017-07-11 16:23:01 +08:00 1
其实控制台用$$也可以
[...$$('img+a')].map(_=>_.text) |
 |
34
cain 2017-07-11 16:28:42 +08:00 2
时间统计可以用 window.performance.now() 代替获取时间的方法
|
|
36
bw2 OP @ctsed 请问为什么输入 network 可以直接访问到对应的节点，输入 start-of-content 却访问不到 id 为 start-of-content 的节点
|
 |
39
simo 2017-07-11 17:06:48 +08:00
看完回复，再也不想干前端了
|
 |
41
baconrad 2017-07-11 17:17:12 +08:00 1
@bw2 因為 start-of-content 會被理解為三個變數兩個運算符,
但仍然能用 window['start-of-content'] 來取得節點 |
|
44
crs0910 2017-07-11 18:01:05 +08:00
innerText 需要判断 layout，会有额外的性能损耗
|
 |
45
tgxh 2017-07-11 18:07:10 +08:00 1
$$('.repo > a:not(:last-child)').map(el => el.textContent)
|
|
46
colorwin 2017-07-12 09:56:29 +08:00
@bw2 老古董, 升不动了. 靠 Linux 强行续命. 习惯了 Ubuntu 之后, 现在有点犹豫要不要买 Mac 了. 感觉相比下 Mac 性价比好低...
|
 |
47
xqin 2017-07-12 13:17:46 +08:00 4
@crs0910 你最后发的代码 ``` document.querySelector('#network').textContent.split(/\s*\/\s*react\s*/g).splice(1) ```
长度是对了, 但得到的 用户名不正确. 因为后面有一些 repo 的名字是 react-1, react-tap-event-plugin .... 而你的正则上面直接按 react 来分隔, 会导致 -1 , -tap-event-plugin 成为 后面用户名的一部分. 另外还有一个 repo 的名字是 facebook-react 所以正则需要再更新一下, 否则, 即便匹配出来了, 结果是 1000, 但得到的用户名是不正确的, 且数组的最后一个元素是空的, 也是错的. 更新后的代码如下: network.innerText.split(/ \/ \S+\s+/g).slice(1, -1) @ctsed 您的回复也存在同样的问题 |
Select Language