鄭昀 201207
前端優化三：BigRender的textarea延遲渲染
-淘寶網首頁的實踐-
首頁的右側欄的“全球購”、“旅行”、“拍賣”和“二手市場”四個模塊，逐一被textarea所包裹。
這部分的特點是，直接把html代碼放置入textarea，來做到延遲渲染：
首頁最下方的“熱賣單品”模塊則是把ajax放入textarea，只有屏幕滾動到此處，才會觸發下載數據、Append新節點和渲染，通過
kissy 的
datalazyload.js 實現：
-textarea延遲渲染原理(鄭昀)-
據
玉伯介紹，HTML元素中有一種RCDATA elements，含textarea和title。
RCDATA=Replaceable Character Data。
如果用隱藏的textarea來存放 html 代碼，textarea 中的內容會按照 RCDATA 規則來解析：
- 遇到 & 時，會盡可能得到實體字符。
- 遇到 </textarea(\s|\\|>) 時，會結束解析。
- 其他都直接作為 textarea 的內容。
獲取也非常簡單：
據
yiminghe介紹，
對於屏幕外延遲渲染的html存放在隱藏(visibility:hidden)的 textarea 中，並且該 textarea 占據本該渲染的位置，監控窗體滾動，當textarea進入可見區域，將該 textarea 內的 value， 插入到 textarea 之前，並刪除掉 textarea 。
這樣，把大量不需要在首屏展示的html代碼分模塊放入一個一個的textarea里，
大大減少了DOM節點數，
從而給瀏覽器合理的喘息（UI Update）時間，
等首屏真正在顯示器上繪制出來后，
再得到 textarea.value ，填充回 DOM 樹。
textarea+datalazyload，相對於其他延遲加載異步渲染解決方案，最大好處，還是減少首屏繪制時的DOM節點總數。
引用資源：
1.玉伯（真名王保平，id@lifesinger）《
淘寶詳情頁的 BigRender 優化與存放大塊 HTML 內容的最佳方式》（需翻牆）
2.BigRender所依賴的
“數據延遲加載組件”datalazyload
3.yiminghe《
數據延遲加載組件》
前端優化四：拉手/Yupoo等的LABjs
-背景-
LABjs=Loading And Blocking JavaScript，一種腳本載入器。
官網是
http://labjs.com/ 。
它的最大特點是能盡可能並行地下載待加載的 js ，但需要時又能保證 js 的執行順序。
-拉手網是怎么用的-
2012年的拉手網，在head里引入了LABjs外聯js：
<script src="http://s2.lashouimg.com/js/lab.min.js" type="text/javascript"></script>
還是在head里，隨后引入了內聯js：
var js_url = 'http://d1.lashouimg.com/';
$LAB
.script(js_url+"js/jquery-1.3.2.min.js").wait()
.script("http://d2.lashouimg.com/js/jquery.autocomplete-01-min.js").wait()
.script("http://s1.lashouimg.com/js/baseindex-14-min.js").wait(
function () { var youhui_temp = 0; if(youhui_temp) {…………} });
讓我們看看它的加載順序，雖然都是寫在head里的，但jquery.js的下載可是在lab.min.js下載的一秒后，時間拉得很開：
-2011年又拍網是怎么用的-
2011年年底，Yupoo的頁面底部有這樣的代碼：
它的 http://www.yupoo.com/js/bootstrap.js?15541000.js 里把
Modernizr v1.7、LAB.js v1.2.0合並了。
現在又拍網是通過下面的代碼延遲加載所需JS：
uPai.addEvent('domready', function(){uPai.require(['global','editable','slideshow','photoview','lighteditor','phototags','map'], function(){uPai.fireEvent('ready', [uPai])});});
效果如下所示：
(
鄭昀)暫時不清楚它是不是直接
引入的RequireJS的require語法，從而
拋棄了LABjs（參考
RequireJS入門，如下圖所示）。
-腳本載入器是否值得引入？-
有人認為現代瀏覽器已經有很多優化了，
如Chrome和Firefox近兩年的版本中，都可以並行下載多個JS文件（同時下載幾個取決於
瀏覽器的並行連接數），
並不需要LABjs來控制JS如何載入。
LABjs更關注JS執行的順序，但未必一定要用這種方式解決。
可能大家更希望的是
JS的下載和執行分離能力，即
預載入 JavaScript 而不執行。
根據oldj的《LABjs分析》，LABjs檢測不同類型瀏覽器版本，使用了不同腳本加載技術，從而為人詬病，很有可能無法應付現代瀏覽器更新。
引用資源：
1.oldj《
LABjs分析》
2.怪飛《
各瀏覽器的並行連接數（同域名） 》
3.玉伯的知乎問答《
LABjs、RequireJS、SeaJS 哪個最好用？》
4.《
關於腳本載入器的思考》
——鄭昀 201207