Textarea與懶惰渲染實現(xiàn)代碼
更新時間：2012年01月04日 17:24:14 作者：
2008年有啊第一次性能優(yōu)化時，我們曾用textarea來存貯需要懶惰渲染的節(jié)點
代碼如下。
<div>
立即渲染內(nèi)容
<ul>
<li>張三<img src="p01.jpg"/></li>
<li>張四<img src="p02.jpg"/></li>
</ul>
</div>
<div>
<textarea id="lazyRender01" style="display:none">
懶惰渲染內(nèi)容
<ul>
<li>李三<img src="p11.jpg"/></li>
<li>李四<img src="p12.jpg"/></li>
</ul>
</textarea>
</div>
<script>
setTimeout(function(){//懶惰渲染
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000);
</script>
代碼的好處是：讓李三李四對應(yīng)的內(nèi)容，在懶惰渲染之前，不形成dom節(jié)點，不請求圖片。
但有的同學(xué)會問：“Textarea里的內(nèi)容，對搜索引擎不友好?！?
沒問題，這個也很好解決的：
<div>
立即渲染內(nèi)容
<ul>
<li>張三<img src="p01.jpg"/></li>
<li>張四<img src="p02.jpg"/></li>
</ul>
</div>
<div>
<script>document.write('<textarea id="lazyRender01" style="display:none">');</script>
懶惰渲染內(nèi)容
<ul>
<li>李三<img src="p11.jpg"/></li>
<li>李四<img src="p12.jpg"/></li>
</ul>
</textarea>
</div>
<script>
setTimeout(function(){//懶惰渲染
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000);
</script>
代碼的區(qū)別很簡單，只是把'<textarea id="lazyRender01">'這一段通過js的document.write輸出來。
但結(jié)果卻有了很大的不同：就算瀏覽器不支持js，一切內(nèi)容也還是能原樣顯示出來。
復(fù)制代碼 代碼如下:
<div>
立即渲染內(nèi)容
<ul>
<li>張三<img src="p01.jpg"/></li>
<li>張四<img src="p02.jpg"/></li>
</ul>
</div>
<div>
<textarea id="lazyRender01" style="display:none">
懶惰渲染內(nèi)容
<ul>
<li>李三<img src="p11.jpg"/></li>
<li>李四<img src="p12.jpg"/></li>
</ul>
</textarea>
</div>
<script>
setTimeout(function(){//懶惰渲染
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000);
</script>
代碼的好處是：讓李三李四對應(yīng)的內(nèi)容，在懶惰渲染之前，不形成dom節(jié)點，不請求圖片。
但有的同學(xué)會問：“Textarea里的內(nèi)容，對搜索引擎不友好?！?
沒問題，這個也很好解決的：
復(fù)制代碼 代碼如下:
<div>
立即渲染內(nèi)容
<ul>
<li>張三<img src="p01.jpg"/></li>
<li>張四<img src="p02.jpg"/></li>
</ul>
</div>
<div>
<script>document.write('<textarea id="lazyRender01" style="display:none">');</script>
懶惰渲染內(nèi)容
<ul>
<li>李三<img src="p11.jpg"/></li>
<li>李四<img src="p12.jpg"/></li>
</ul>
</textarea>
</div>
<script>
setTimeout(function(){//懶惰渲染
var el =document.getElementById('lazyRender01');
el.parentNode.innerHTML = el.value;
},1000);
</script>
代碼的區(qū)別很簡單，只是把'<textarea id="lazyRender01">'這一段通過js的document.write輸出來。
但結(jié)果卻有了很大的不同：就算瀏覽器不支持js，一切內(nèi)容也還是能原樣顯示出來。
相關(guān)文章
最近看了一下developer.mozilla.org里的東西，發(fā)現(xiàn)它為Array對象添加了不少generic method，趕得上Prototype的熱心程度。2009-10-10
javascript的動態(tài)加載、緩存、更新以及復(fù)用（一）
在做OA、MIS、ERP等信息管理類的項目,經(jīng)常會遇到引用很多js文件，這就需要用到動態(tài)加載、緩存、更新以及復(fù)用等技術(shù)，下面我們來討論下2014-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
toString方法的作用是不用多說的了，這個JavaScript內(nèi)置方法還有一個特性是：在執(zhí)行一些特殊方法的時候，比如alert或innerHTML等方法，它將由腳本解析器自動調(diào)用。2010-02-02
本文通過實例代碼給大家分享了基于js+jquery實現(xiàn)的注冊信息驗證功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
本篇文章主要介紹了AngularJs 禁止模板緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
JS類中定義原型方法的兩種實現(xiàn)的區(qū)別...2007-03-03
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
小程序websocket心跳庫(websocket-heartbeat-miniprogram)
這篇文章主要介紹了小程序websocket心跳庫(websocket-heartbeat-miniprogram)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
input輸入框限制只能輸入數(shù)字的方法實例(個人認(rèn)為最好的)
在很多業(yè)務(wù)中需要對輸入框進行字符限制,比如金額輸入框、手機號碼輸入框等,下面這篇文章主要給大家介紹了關(guān)于input輸入框限制只能輸入數(shù)字的相關(guān)資料,文中介紹的方法個人認(rèn)為最好的,需要的朋友可以參考下2022-10-10