chrome，FireFox和Edge性能比较

最新推荐文章于 2024-07-27 11:04:00 发布

东都花神

最新推荐文章于 2024-07-27 11:04:00 发布

阅读量2.4w

点赞数 1

分类专栏：性能

本文链接：https://blog.csdn.net/qq_33988065/article/details/81067405

版权

性能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天没事，就比较了一下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。

东都花神

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
chrome，FireFox和Edge性能比较

今天没事，就比较了一下chrome和FireFox在渲染大量图片时的性能，本来想渲染一万张图片，结果chrome要7，8秒，FireFox和Edge直接卡死，最后改用1000张进行比较：环境：系统：window10 处理器：Intel i5 7300HQ 内存： 8G 浏览器： chrome67 Firefox61 Edge42.17134测试用例：&amp;amp;amp;amp;amp;lt;...
复制链接

扫一扫

专栏目录