chrome,FireFox和Edge性能比较

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

测试用例:


<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 = '
  • '
    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。

    你可能感兴趣的:(性能)