我們在編寫前臺(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)和精簡了控件數(shù)量后，我們發(fā)現(xiàn)性能還是不樂觀，于是繼續(xù)排查，一個(gè)偶然的修改，卻大大改善了效率，就是類似如下的修改：
修改前：

復(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的方法，這種方法就是比較簡單和便捷，但是在性能方面還是有所損失的，因?yàn)檫@中間必然涉及到一個(gè)將字符串轉(zhuǎn)換為正確的頁面控件的的一個(gè)過程，這其中的性能損失可能比較大，所以造成了頁面相應(yīng)的遲緩。

相關(guān)文章

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