字符串拼接方法在不同浏览器引擎的差异测试结论

时间2024-01-25 12:31:12发布访客分类HTML浏览339

导读：收集整理的这篇文章主要介绍了html5教程-字符串拼接方法在不同浏览器引擎的差异测试结论，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。测试基本结...

收集整理的这篇文章主要介绍了html5教程-字符串拼接方法在不同浏览器引擎的差异测试结论，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

测试基本结论如下：
更快的字符串相加方式：
很多人误以为数组push方法拼接字符串会比+=快，要知道这仅仅是IE6-8的浏览器下（据我测试,IE7其实还是+=的性能好些）。
实测表明现代浏览器使用+=会比数组push方法快，而在v8引擎中，使用+=方式比数组拼接快4.7倍。
所以最好的优化策略是根据JavaScript引擎特性采用了两种不同的字符串拼接方式。

测试代码：

[htML]
!DOCTYPE HTML PubLIC "-//W3C//DTD HTML 4.0 TransITional//EN">
HTML>
HEAD>
TITLE> 字符串拼接方法在不同浏览器引擎的差异测试/TITLE>
mETA NamE="Generator" CONTENT="EditPlus">
META NAME="Author" CONTENT="">
META NAME="Keywords" CONTENT="">
META NAME="Description" CONTENT="">
/HEAD>
BODY>
p id='result'> /p>
SCRIPT LANGUAGE="JavaScript">
!--
/*
测试结论如下：
更快的字符串相加方式
很多人误以为数组push方法拼接字符串会比+=快，要知道这仅仅是IE6-8的浏览器下。
实测表明现代浏览器使用+=会比数组push方法快，而在v8引擎中，使用+=方式比数组拼接快4.7倍。
所以rtTemplate根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
*/

function show_result(key, val) {
   VAR oDiv = document.getElementById('result');
   var oChildDiv = document.createElement('p');
   oChildDiv.innerHTML = key + '=' + val;
   oDiv.appendChild(oChildDiv)
} ;

var total_loop = 20000; //定义字符串拼接操作的执行次数
var append_str = 'a';     //用于拼接的字符，为了测试方便，这里每次只进行拼接一个字符
var total_times = 100;     //测试的案例执行次数

//执行total_times次字符串+=操作，并输出每次的时间，并计算平均耗时
var s = '', beg = 0, end = 0, dif = 0;
var plus_total_time = 0; //执行total_times的总时间
for(var tt = 0; tt total_times; tt++ ) {
    //每次均进行初始化
    s= '';
    beg = new Date();
    for(var loop = 0; loop total_loop; loop++) {
          s += append_str;
    }
    end = new Date();
    dif = end - beg;

    plus_total_time += dif; //累计时间，用于计算平均值

    //输出每次的时间
    show_result('第'+(tt+1)+'次所花时间', dif);
}

//输出瓶颈时间
show_result('+=操作平均次所花时间', plus_total_time/total_times);

//执行total_times次字符串数组push操作，并输出每次的时间，并计算平均耗时
s = '', beg = 0, end = 0, dif = 0;
plus_total_time = 0; //执行total_times的总时间
var arr;
for(var tt = 0; tt total_times; tt++ ) {
    //每次均进行初始化
    s= '', arr = [];
    beg = new Date();
    for(var loop = 0; loop total_loop; loop++) {
          arr.push(append_str);
    }
    s = arr.join();
    end = new Date();
    dif = end - beg;

    plus_total_time += dif; //累计时间，用于计算平均值

    //输出每次的时间
    show_result('第'+(tt+1)+'次所花时间', dif);
}

//输出瓶颈时间
show_result('push操作平均次所花时间', plus_total_time/total_times);
//-->
/SCRIPT>
/BODY>
/HTML>

测试数据：

chrome：

当执行拼接次数20000次的时候：push的性能比+=略好：push耗时：0.37，+=耗时：0.51

当执行拼接次数200000次的时候：+=的性能比push好很多：push耗时：37.03，+=耗时：4.49

FireFox：

当执行拼接次数200000次的时候：+=的性能比push略好：push耗时：9.92，+=耗时：6.47

当执行拼接次数20000次的时候：+=的性能比push略好：push耗时：0.77，+=耗时：0.54

FF还是比较稳定的。

测试代码：

[html]
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML>
HEAD>
TITLE> 字符串拼接方法在不同浏览器引擎的差异测试/TITLE>
META NAME="Generator" CONTENT="EditPlus">
META NAME="Author" CONTENT="">
META NAME="Keywords" CONTENT="">
META NAME="Description" CONTENT="">
/HEAD>
BODY>
p id='result'> /p>
SCRIPT LANGUAGE="JavaScript">
!--
/*
测试结论如下：
更快的字符串相加方式
很多人误以为数组push方法拼接字符串会比+=快，要知道这仅仅是IE6-8的浏览器下。
实测表明现代浏览器使用+=会比数组push方法快，而在v8引擎中，使用+=方式比数组拼接快4.7倍。
所以rtTemplate根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
*/

function show_result(key, val) {
   var oDiv = document.getElementById('result');
   var oChildDiv = document.createElement('p');
   oChildDiv.innerHTML = key + '=' + val;
   oDiv.appendChild(oChildDiv)
} ;

var total_loop = 20000; //定义字符串拼接操作的执行次数
var append_str = 'a';     //用于拼接的字符，为了测试方便，这里每次只进行拼接一个字符
var total_times = 100;     //测试的案例执行次数

//执行total_times次字符串+=操作，并输出每次的时间，并计算平均耗时
var s = '', beg = 0, end = 0, dif = 0;
var plus_total_time = 0; //执行total_times的总时间
for(var tt = 0; tt total_times; tt++ ) {
    //每次均进行初始化
    s= '';
    beg = new Date();
    for(var loop = 0; loop total_loop; loop++) {
          s += append_str;
    }
    end = new Date();
    dif = end - beg;

    plus_total_time += dif; //累计时间，用于计算平均值

    //输出每次的时间
    show_result('第'+(tt+1)+'次所花时间', dif);
}

//输出瓶颈时间
show_result('+=操作平均次所花时间', plus_total_time/total_times);

//执行total_times次字符串数组push操作，并输出每次的时间，并计算平均耗时
s = '', beg = 0, end = 0, dif = 0;
plus_total_time = 0; //执行total_times的总时间
var arr;
for(var tt = 0; tt total_times; tt++ ) {
    //每次均进行初始化
    s= '', arr = [];
    beg = new Date();
    for(var loop = 0; loop total_loop; loop++) {
          arr.push(append_str);
    }
    s = arr.join();
    end = new Date();
    dif = end - beg;

    plus_total_time += dif; //累计时间，用于计算平均值

    //输出每次的时间
    show_result('第'+(tt+1)+'次所花时间', dif);
}

//输出瓶颈时间
show_result('push操作平均次所花时间', plus_total_time/total_times);
//-->
/SCRIPT>
/BODY>
/HTML>