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