国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Javascript createElement和innerHTML增加頁面元素的性能對(duì)比

2019-11-21 01:08:15
字體:
供稿:網(wǎng)友
最近遇到j(luò)s的效率問題,是關(guān)于在頁面中新增元素的問題。
假設(shè)我們有頁面如下:
復(fù)制代碼 代碼如下:

<HTML>
<HEAD>
</HEAD>
<BODY>
<div id="div1"></div>
</BODY>
<script>
// 腳本位置
</script>
</HTML>

現(xiàn)在,我們要往div1中添加對(duì)象,大家都知道在為web頁面增加一個(gè)元素時(shí)可以使用如下代碼:
//方法1
div1.innerHTML = '<a href="">測(cè)試</a>';
或者:
//方法2
var a = document.createElement('a');
a.innertText = '測(cè)試';
div1.appendChild(a);
在網(wǎng)上搜索到一個(gè)探討js效率問題的文章,其大概意思是說方法2的效率高,其對(duì)比代碼如下:
復(fù)制代碼 代碼如下:

// 方法1
function init(){
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
container.innerHTML += str;
}
alert(new Date - staDate);
}
//方法2
function init(){
var staDate = new Date();
var doc = window.document;
for(var i=0;i<100;i++){
var oDiv = doc.createElement("div");
var oText = doc.createTextNode("text");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.style.id = "div_"+i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
alert(new Date - staDate);
}

其頁面中有:
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
從執(zhí)行效果來看方案2要比方案1快10倍左右,到底這是不是真的呢?其實(shí)上面的測(cè)試代碼是有待商榷的,且看其方法1中的循環(huán)代碼:
復(fù)制代碼 代碼如下:

for(var i=0;i<100;i++){
var str="<div id='div_'"+i+"' style='width:100px; height:20px;background-color:#eee'>test</div>";
container.innerHTML += str;
}

其中有很多字符串操作,而且除了使用+號(hào)來連接字符串外,還使用了+=操作符,這就是問題的所在了,在javascript中這種操作字符串的做法是嚴(yán)重影響效率的,所以使用上面的方法來測(cè)試createEmenent和innerHTML的效率對(duì)innerHTML是不公平的, 據(jù)此看來很可能是字符串操作吃掉了innerHTML的性能,于是寫了下面的測(cè)試代碼:

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]

經(jīng)測(cè)試發(fā)現(xiàn):
1、在創(chuàng)建的對(duì)象較少(0-大約10左右)時(shí),innerHTML和createElement效率差不多,測(cè)試值悠忽不定;
2、在創(chuàng)建對(duì)象多于20時(shí),innerHTML要比createElement效率高很多,平均測(cè)試差不多createElement耗時(shí)是innerHTML的兩倍。
總結(jié):其實(shí)效率也在于編寫的代碼,在知道可用的API的效率后,怎么編寫代碼也是非常重要的,否則應(yīng)由的執(zhí)行效率不能體現(xiàn)出來,就如上面從網(wǎng)上搜到的那些代碼,得出一個(gè)與事實(shí)相悖的結(jié)論。
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 香港| 阳春市| 澄江县| 平武县| 聊城市| 宝清县| 来凤县| 驻马店市| 新营市| 红原县| 乌拉特中旗| 曲阜市| 新丰县| 台山市| 丰台区| 宁远县| 东乡族自治县| 鹤岗市| 邢台县| 望奎县| 江陵县| 鹤壁市| 绥芬河市| 肃南| 濮阳县| 佛坪县| 望谟县| 新密市| 林周县| 越西县| 略阳县| 磐石市| 郓城县| 博爱县| 靖远县| 尼勒克县| 颍上县| 赤峰市| 晋城| 井陉县| 肇东市|