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>

结果：
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。

chrome，FireFox和Edge性能比较

猜你喜欢