javascript 處理HTML元素必須避免使用的一種方法
更新時(shí)間：2009年07月30日 18:50:34 作者：
我們?cè)诰帉?xiě)前臺(tái)頁(yè)面的時(shí)候，可能經(jīng)常會(huì)用到“javascript+數(shù)據(jù)”生成頁(yè)面元素的方法，但當(dāng)我們要處理的數(shù)據(jù)量較大，導(dǎo)致頁(yè)面需要展現(xiàn)過(guò)多的控件的時(shí)候，頁(yè)面的響應(yīng)速度也會(huì)直線下降
我們可能往往會(huì)去排查問(wèn)題的緣由，其實(shí)，在排查掉冗余的循環(huán)和精簡(jiǎn)了控件數(shù)量后，我們發(fā)現(xiàn)性能還是不樂(lè)觀，于是繼續(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)闀?shū)寫(xiě)的便利，所以沒(méi)有采用創(chuàng)建頁(yè)面元素，再分別賦值，最后進(jìn)行嵌套的方法，而是直接通過(guò)字符串賦值innerHTML的方法，這種方法就是比較簡(jiǎn)單和便捷，但是在性能方面還是有所損失的，因?yàn)檫@中間必然涉及到一個(gè)將字符串轉(zhuǎn)換為正確的頁(yè)面控件的的一個(gè)過(guò)程，這其中的性能損失可能比較大，所以造成了頁(yè)面相應(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)闀?shū)寫(xiě)的便利，所以沒(méi)有采用創(chuàng)建頁(yè)面元素，再分別賦值，最后進(jìn)行嵌套的方法，而是直接通過(guò)字符串賦值innerHTML的方法，這種方法就是比較簡(jiǎn)單和便捷，但是在性能方面還是有所損失的，因?yàn)檫@中間必然涉及到一個(gè)將字符串轉(zhuǎn)換為正確的頁(yè)面控件的的一個(gè)過(guò)程，這其中的性能損失可能比較大，所以造成了頁(yè)面相應(yīng)的遲緩。
相關(guān)文章
通過(guò)繼承IHttpHandle實(shí)現(xiàn)JS插件的組織與管理
最近，項(xiàng)目中的用到的Js插件越來(lái)越多，有的是用原生javascript寫(xiě)的，有的是調(diào)用的jquery插件，頁(yè)面上Js和Css文件的引用也越來(lái)越混亂，而且Js文件之間還有引用先后的依賴關(guān)系2010-07-07
微信小程序之 catalog 切換實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
將函數(shù)名作為指向函數(shù)的指針，有助于理解為什么ECMAScript中沒(méi)有函數(shù)重載的概念,需要的朋友可以參考下2014-08-08
這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JS 日期驗(yàn)證正則附asp日期格式化函數(shù)
JS 日期驗(yàn)證正則 asp日期格式化函數(shù)，大家以后的日期就是能通過(guò)驗(yàn)證的了。2009-09-09
其實(shí)所謂bind顧名思義就是綁定。bind()方法會(huì)創(chuàng)建一個(gè)新函數(shù)，當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，它的this值是傳遞給bind()的第一個(gè)參數(shù)，它的參數(shù)是bind()的其他參數(shù)和其原本的參數(shù)。這么說(shuō)可能很多人都糊涂了，下面通過(guò)這篇文章的示例來(lái)給大家詳細(xì)的介紹下吧。2016-12-12
如何才能學(xué)好JS？在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗(yàn)，希望能對(duì)你們有所幫助。2021-05-05
詳解JavaScript發(fā)送埋點(diǎn)請(qǐng)求的兩種方式
對(duì)于發(fā)送埋點(diǎn)請(qǐng)求這種應(yīng)用場(chǎng)景，我們有兩種簡(jiǎn)單的處理方式：動(dòng)態(tài)創(chuàng)建<script>和<img>兩種方式。本文就詳細(xì)講講二種方式的實(shí)現(xiàn)，需要的可以參考一下2022-06-06
script標(biāo)簽屬性type與language使用選擇
很多使用javascript的朋友都有著這樣一個(gè)問(wèn)題:script標(biāo)簽屬性type與language使用應(yīng)如何選擇，為解決此疑惑，本文詳細(xì)整理了一下，需要的朋友可以參考下2012-12-12