textarea延迟渲染

-textarea延迟渲染原理(郑昀)-

据 玉伯介绍，HTML元素中有一种RCDATA elements，含textarea和title。

RCDATA=Replaceable Character Data。

如果用隐藏的textarea来存放 html 代码，textarea 中的内容会按照 RCDATA 规则来解析：

1. 遇到 & 时，会尽可能得到实体字符。
2. 遇到 </textarea(\s|\\|>) 时，会结束解析。
3. 其他都直接作为 textarea 的内容。

获取也非常简单：

    if ($("#data-textarea").is('textarea')) {  //检测"#data-textarea"的元素是否是<textarea></textarea>
                var textAreaValue = $("#data-textarea").val()
                //$("#data-textarea").replaceWith('<div id="data-textarea" class="hide">' + textAreaValue + '</div>')
                    
                    //原本标签是<textarea></textarea> 将其替换成<div></div>
            }

 

据 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 内容的最佳方式》（需FQ）

2.BigRender所依赖的 “数据延迟加载组件”datalazyload

3.yiminghe《 数据延迟加载组件》

 http://www.cnblogs.com/zhengyun_ustc/archive/2012/07/21/BigRender.html