首页 > 代码库 > 不同浏览器(chrome,firefox,IE)在JQuery与原生JS之执行性能比较

不同浏览器(chrome,firefox,IE)在JQuery与原生JS之执行性能比较

本次测试所用浏览器为chrome(36.0.1985.125m),firefox(31.0),IE(8.0)

1. 比较JQuery在不同浏览器对于js的执行性能

计算插入20000条div节点所需时间

    for(var i=0;i<20000;i++){        var divTag = document.createElement(‘div‘);        $("#chn").append(divTag);    }

Result:

时间单位ms

chrome584614593574596
firefox552608531527633
IE62216187623561276202

 

 

 

chrome和firefox基本接近,IE8的性能不敢恭维。。。

2. 比较原生JS的写上的执行性能法在不同浏览器

使用JS的appendChild来替代JQuery的append

    for(var i=0;i<20000;i++){        var divTag = document.createElement(‘div‘);        document.getElementById("chn").appendChild(divTag);        //$("#chn").append(divTag);

 时间单位ms

chrome2521243022
firefox4241434240
IE311302305305307

 

 

 

数据不忍直视啊,让JQuery重度用户情何以堪。 

chrome在原生JS执行速度上要超过firefox 2倍,与jQuery上执行相比也要快上30倍左右;

firefox在原生JS执行上相比于JQuery要快上10倍以上;

IE如果使用原生JS,则速度提高20倍;

结论:

  • 如果使用JQuery开发,则chrome和firefox执行速度是差不多的。
  • 如果使用原生JS开发,则chrome引擎表现是最突出的。
  • 如果开发的JS运算量大,果断使用原生JS来编码,否则IE用户要崩溃了!!!