chrome，FireFox和Edge性能比较
今天没事，就比较了一下chrome和FireFox在渲染大量图片时的性能，本来想渲染一万张图片，结果chrome要7，8秒，FireFox和Edge直接卡死，最后改用1000张进行比较：
环境：
系统：window10
处理器：Intel i5 7300HQ
内存： 8G
浏览器： chrome67 Firefox61 Edge42.17134
测试用例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>性能测试</title>
</head>
<body>
<button class='btn'>点击显示图片</button>
<ul></ul>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type="text/javascript">
var html = '<li><img src="https://daoket.gitee.io/ai/images/pic.png"/></li>'
console.time('time')
window.onload = function () {
console.timeEnd('time')
}
// 多次操作DOM
function test1(num) {
for (let i = 0; i < num; i++) {
$(html).appendTo('ul')
}
}
// 合并DOM操作
function test2(num) {
var all = ''
for (let i = 0; i < num; i++) {
all+=html
}
$(all).appendTo('ul')
}
test1(1000)
// test2(1000)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
结果：
Firefox： ☆☆☆
test1：
time: 7772ms
time: 8409ms
time: 8380ms
test2:
time: 8040ms
time: 9061ms
time: 8762ms
vue重构结果：233ms
Edge：☆☆☆
test1：
time: 3,507.5 毫秒
time: 3,569.8 毫秒
time: 3,860.3 毫秒
test2:
time: 877.9 毫秒
time: 865.5 毫秒
time: 919.2 毫秒
vue重构结果：1,170.1 毫秒
chrome: ☆☆☆☆☆
test1
time: 227.575927734375ms
time: 230.215087890625ms
time: 271.52001953125ms
test2:
time: 152.052734375ms
time: 168.516845703125ms
time: 142.470947265625ms
vue重构结果：194.4580078125ms
从结果来看，chrome无疑是最快的，稳定性也是最好的，其次是Edge，尤其是DOM操作优化后性能提升十分明显，不过Edge在测试时，如果多次刷新会造成页面假死，稳定不好，最后是Firefox，这个确实没有想到，而且优化后的时间竟然变长了，不知道是不是bug，看来以后要放弃Firefox。
