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。
※為什麼有的大公司代碼也很爛？
※callback Promise async await 非同步回調 案例
TAG:程序員小新人學習 |