javascript 處理HTML元素必須避免使用的一種方法
更新時(shí)間：2009年07月30日 18:50:34 作者：
我們?cè)诰帉懬芭_(tái)頁面的時(shí)候，可能經(jīng)常會(huì)用到“javascript+數(shù)據(jù)”生成頁面元素的方法，但當(dāng)我們要處理的數(shù)據(jù)量較大，導(dǎo)致頁面需要展現(xiàn)過多的控件的時(shí)候，頁面的響應(yīng)速度也會(huì)直線下降
我們可能往往會(huì)去排查問題的緣由，其實(shí)，在排查掉冗余的循環(huán)和精簡(jiǎn)了控件數(shù)量后，我們發(fā)現(xiàn)性能還是不樂觀，于是繼續(xù)排查，一個(gè)偶然的修改，卻大大改善了效率，就是類似如下的修改：
修改前：
objDiv.innerHTML += ‘<img id=”picture” src=”back.gif”>';
修改后：
var imga = document.createElement("img");
imga.setAttribute("src","back.gif");
imga.setAttribute("id","picture");
objDiv.appendChild(imga);
之前可能因?yàn)闀鴮懙谋憷?，所以沒有采用創(chuàng)建頁面元素，再分別賦值，最后進(jìn)行嵌套的方法，而是直接通過字符串賦值innerHTML的方法，這種方法就是比較簡(jiǎn)單和便捷，但是在性能方面還是有所損失的，因?yàn)檫@中間必然涉及到一個(gè)將字符串轉(zhuǎn)換為正確的頁面控件的的一個(gè)過程，這其中的性能損失可能比較大，所以造成了頁面相應(yīng)的遲緩。
修改前：
復(fù)制代碼 代碼如下:
objDiv.innerHTML += ‘<img id=”picture” src=”back.gif”>';
修改后：
復(fù)制代碼 代碼如下:
var imga = document.createElement("img");
imga.setAttribute("src","back.gif");
imga.setAttribute("id","picture");
objDiv.appendChild(imga);
之前可能因?yàn)闀鴮懙谋憷?，所以沒有采用創(chuàng)建頁面元素，再分別賦值，最后進(jìn)行嵌套的方法，而是直接通過字符串賦值innerHTML的方法，這種方法就是比較簡(jiǎn)單和便捷，但是在性能方面還是有所損失的，因?yàn)檫@中間必然涉及到一個(gè)將字符串轉(zhuǎn)換為正確的頁面控件的的一個(gè)過程，這其中的性能損失可能比較大，所以造成了頁面相應(yīng)的遲緩。
相關(guān)文章
用IE重起計(jì)算機(jī)或者關(guān)機(jī)的示例代碼
本篇文章主要是對(duì)用IE重起計(jì)算機(jī)或者關(guān)機(jī)的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)獲取和解析頁面內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-03-03
本文給大家介紹的是去年很火的一款小游戲--2048用javascript實(shí)現(xiàn)的思路以及代碼，有需要的小伙伴可以參考下。2015-07-07
分享幾個(gè)JavaScript運(yùn)算符的使用技巧
這篇文章主要介紹了分享幾個(gè)JavaScript運(yùn)算符的使用技巧，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-04-04
JS+CSS設(shè)置img在DIV中只顯示Img垂直居中的部分
img的寬和Div相同，但高不固定，要求只顯示Img垂直居中的部分，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了JS中art-template模板使用過濾器問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getA
最近在開發(fā)Echarts忽然遇到了個(gè)問題,這篇文章主要給大家介紹了關(guān)于echarts報(bào)錯(cuò)Cannot?read?properties?of?null?(reading?‘getAttribute‘)的解決方法,需要的朋友可以參考下2023-01-01
JavaScript讓IE瀏覽器event對(duì)象符合W3C DOM標(biāo)準(zhǔn)
IE瀏覽器event對(duì)象跟W3C實(shí)現(xiàn)的不一樣.所以自己封裝一個(gè)EventUtil類來讓IE瀏覽器的event對(duì)象與W3C一樣.2009-11-11
我們?cè)趯W(xué)到j(luò)s中數(shù)組的時(shí)候,我們會(huì)接觸到j(luò)s中數(shù)組的一些方法這些方法對(duì)我們來說,可以很便利的達(dá)到我們想要的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于javascript中搜索數(shù)組的四種方法,需要的朋友可以參考下2022-12-12
JS實(shí)現(xiàn)的手機(jī)端精簡(jiǎn)幻燈片效果
這篇文章主要介紹了JS實(shí)現(xiàn)的手機(jī)端精簡(jiǎn)幻燈片效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09