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