Textarea與懶惰渲染實(shí)現(xiàn)代碼
更新時(shí)間：2012年01月04日 17:24:14 作者：
2008年有啊第一次性能優(yōu)化時(shí)，我們曾用textarea來存貯需要懶惰渲染的節(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>
代碼的好處是：讓李三李四對應(yīng)的內(nèi)容，在懶惰渲染之前，不形成dom節(jié)點(diǎn)，不請求圖片。
但有的同學(xué)會問：“Textarea里的內(nèi)容，對搜索引擎不友好?！?
沒問題，這個(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ū)別很簡單，只是把'<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é)點(diǎn)，不請求圖片。
但有的同學(xué)會問：“Textarea里的內(nèi)容，對搜索引擎不友好?！?
沒問題，這個(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ū)別很簡單，只是把'<textarea id="lazyRender01">'這一段通過js的document.write輸出來。
但結(jié)果卻有了很大的不同：就算瀏覽器不支持js，一切內(nèi)容也還是能原樣顯示出來。
相關(guān)文章
jsvascript圖像處理—(計(jì)算機(jī)視覺應(yīng)用)圖像金字塔
上一篇文章，我們講解了邊緣梯度計(jì)算函數(shù)，這篇文章我們來了解圖像金字塔;圖像金字塔被廣泛用于計(jì)算機(jī)視覺應(yīng)用中;圖像金字塔是一個(gè)圖像集合，集合中所有的圖像都源于同一個(gè)原始圖像，而且是通過對原始圖像連續(xù)降采樣獲得的2013-01-01
js模擬彈窗效果代碼，用層實(shí)現(xiàn)提示效果代碼2008-04-04
解決layer 關(guān)閉當(dāng)前彈窗 關(guān)閉遮罩層 input值獲取不到的問題
今天小編就為大家分享一篇解決layer 關(guān)閉當(dāng)前彈窗 關(guān)閉遮罩層 input值獲取不到的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Js 導(dǎo)出table內(nèi)容到Excel的簡單實(shí)例
在做前端開發(fā)時(shí)，常常會用到通過js把數(shù)據(jù)導(dǎo)入到excel的功能，現(xiàn)在給出給簡單demo代碼，以供以后使用2013-11-11
獲取DOM對象的幾種擴(kuò)展及簡寫...2006-10-10
JS動態(tài)給對象添加屬性和值的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S動態(tài)給對象添加屬性和值的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
javascript實(shí)現(xiàn)的基于金山詞霸網(wǎng)絡(luò)翻譯的代碼
下面的這段代碼是基于金山詞霸網(wǎng)絡(luò)翻譯提供的接口，遠(yuǎn)程調(diào)用文件，可以作為一個(gè)自定義的在線查詢工具。2010-01-01
JavaScript canvas實(shí)現(xiàn)動態(tài)點(diǎn)線效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)動態(tài)點(diǎn)線效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
利用javascript實(shí)現(xiàn)禁用網(wǎng)頁上所有文本框,下拉菜單,多行文本域
這篇文章主要介紹了利用javascript實(shí)現(xiàn)禁用網(wǎng)頁上所有文本框,下拉菜單,多行文本域。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
javascript中mouseover、mouseout使用詳解
這篇文章主要介紹了javascript中mouseover、mouseout使用詳解的相關(guān)資料,需要的朋友可以參考下2015-07-07