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