document的createDocumentFragment()方法
2016-05-29 18:55
218 查看
假如你想动态的向html中添加十个段落,使用常规的方式可能会写出这样的代码:
当然,这段代码运行是没有问题,但是它调用了十次document.body.appendChild(),每次都要产生一次页面渲染。这时碎片就十分有用了:
/>元素都被添加到文档碎片中,然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片本省追加到body元素中,而是仅仅追加碎片中的子节点,然后可以看到明显的性能提升,document.body.appenChild()一次替代十次,这意味着只需要进行一个内容渲染刷新
for(var i = 0 ; i < 10; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild(oTxt); document.body.appendChild(p); }
当然,这段代码运行是没有问题,但是它调用了十次document.body.appendChild(),每次都要产生一次页面渲染。这时碎片就十分有用了:
var oFragment = document.createDocumentFragment(); for(var i = 0 ; i < 10; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild(oTxt); oFragment.appendChild(p);<br>} document.body.appendChild(oFragment);在这段代码中,每个新的<p
/>元素都被添加到文档碎片中,然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片本省追加到body元素中,而是仅仅追加碎片中的子节点,然后可以看到明显的性能提升,document.body.appenChild()一次替代十次,这意味着只需要进行一个内容渲染刷新
相关文章推荐
- JDK 配置
- 给Project中文件设置标签用法
- 【转】 Linux内核spin_lock、spin_lock_irq 和 spin_lock_irqsave 分析
- codeforces 638B—— Making Genome in Berland——————【类似拓扑排序】
- 计算机专业英语-01:Foreword
- JAVA时间日期学习笔记
- Unity目录结构
- Xamarin 技术解析
- PHP环境配置综合篇
- JAVA 输入年份月份打印该月的日历
- Qt——消息对话框的设计
- Entity Framework4.3安装以及错误(基础连接已经关闭:未能为SSL/TLS……)问题解决!
- 第十三周学习进度条
- 《校园封神榜》第二阶段个人工作总结——第六天
- 第二次团队冲刺--3
- 【转】自旋锁spin_lock和raw_spin_lock
- 在ubuntu中安装有道词典
- bzoj 2631(link cut tree)
- 团队作业—第二阶段04
- 1833 深坑 TLE 求解