javascript 處理HTML元素必須避免使用的一種方法
更新時間：2009年07月30日 18:50:34 作者：
我們在編寫前臺頁面的時候，可能經(jīng)常會用到“javascript+數(shù)據(jù)”生成頁面元素的方法，但當(dāng)我們要處理的數(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)文章
通過繼承IHttpHandle實現(xiàn)JS插件的組織與管理
最近，項目中的用到的Js插件越來越多，有的是用原生javascript寫的，有的是調(diào)用的jquery插件，頁面上Js和Css文件的引用也越來越混亂，而且Js文件之間還有引用先后的依賴關(guān)系2010-07-07
這篇文章主要介紹了微信小程序之 catalog 切換實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了JS實現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
將函數(shù)名作為指向函數(shù)的指針，有助于理解為什么ECMAScript中沒有函數(shù)重載的概念,需要的朋友可以參考下2014-08-08
這篇文章主要為大家介紹了js前端獲取用戶位置及ip屬地信息示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
JS 日期驗證正則 asp日期格式化函數(shù)，大家以后的日期就是能通過驗證的了。2009-09-09
其實所謂bind顧名思義就是綁定。bind()方法會創(chuàng)建一個新函數(shù)，當(dāng)這個新函數(shù)被調(diào)用時，它的this值是傳遞給bind()的第一個參數(shù)，它的參數(shù)是bind()的其他參數(shù)和其原本的參數(shù)。這么說可能很多人都糊涂了，下面通過這篇文章的示例來給大家詳細的介紹下吧。2016-12-12
如何才能學(xué)好JS？在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗，希望能對你們有所幫助。2021-05-05
對于發(fā)送埋點請求這種應(yīng)用場景，我們有兩種簡單的處理方式：動態(tài)創(chuàng)建<script>和<img>兩種方式。本文就詳細講講二種方式的實現(xiàn)，需要的可以參考一下2022-06-06
script標(biāo)簽屬性type與language使用選擇
很多使用javascript的朋友都有著這樣一個問題:script標(biāo)簽屬性type與language使用應(yīng)如何選擇，為解決此疑惑，本文詳細整理了一下，需要的朋友可以參考下2012-12-12