我们一起来做一道 JS 题目：在控制台打印 React 仓库的 Fork 列表

[bw2]

要求

获取当前页面已 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);
})

接下来就是开始你的表演了

[colorwin]

你们的电脑的真好....我的古董机跑你们的代码要慢 5s 以上...

[iiji86]

[...document.querySelectorAll('img+a')].map(_=>_.text)

[colorwin]

同时也很不稳定啊, 同一段代码最慢有 24, 快的有 11

[ctsed]

network.innerHTML.match(/@[^"]*/g).join().split('@').slice(2) 5ms 61

[...network.querySelectorAll('img+a')].map(_=>_.text) 1ms 53

[bw2]

厉害了，最新记录是 @crs0910
Time: 1ms
Len: 87

document.querySelector('#network').textContent.split(/\s*\/\s*react\s*/g).splice(1)

[bw2]

@Wangxf 我这边测试是 2ms，我的电脑还是要差一点

[bw2]

@colorwin 该升级配置了

[bw2]

@iiji86 我怎么就没有想出这么好的操作
Time: 2ms
Len: 58

[bw2]

@ctsed network.querySelectorAll ？

[jun0205]

[...document.querySelectorAll('.network-tree ~ a:not(:last-child)')].map(el=>el.text)

[ctsed]

network.innerText.split(/\s*\/\s*react\s*/g).splice(1)
2ms 50

[ctsed]

network.innerText.split(/ \/ react\s*/g).splice(1)

48

[ctsed]

其实控制台用$$也可以
[...$$('img+a')].map(_=>_.text)

[cain]

时间统计可以用 window.performance.now() 代替获取时间的方法

[bw2]

@ctsed 还有这种操作

Time: 2ms
Len: 35

[bw2]

@ctsed 请问为什么输入 network 可以直接访问到对应的节点，输入 start-of-content 却访问不到 id 为 start-of-content 的节点

[bw2]

@cain 这个方法很赞

[bw2]

@jun0205 花式选择器 get

Time: 1.8699999991804361ms
Len: 89

[simo]

看完回复，再也不想干前端了

[ctsed]

@bw2 - 被解析后当作减法执行了