初识javascript 文档碎片


Posted in Javascript onJuly 13, 2010

后来是一技术群问到以下一段代码:

function html2node(s) { 
var d = document.createElement('div'); 
d.innerHTML = s; 
if (d.childNodes.length == 1) 
return d.childNodes[0]; 
var df = document.createDocumentFragment(); 
while (d.firstChild) 
df.appendChild(d.firstChild); 
return df; 
}

大概的原理都明白,比较困惑的是为什么要用 document.createDocumentFragment 呢?
后来在网上搜索了一下相关资源才知道,document.createDocumentFragment 是用来创建文档碎片的。
当我们需要大量 appendChild 页面元素时,可以先将这些元素 appendChild 进document.createDocumentFragment。
然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。
Javascript 相关文章推荐
Knockout数组(observable)使用详解示例
Nov 15 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
gojs实现蚂蚁线动画效果
Feb 18 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 #Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 #Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 #Javascript
javascript中字符串拼接需注意的问题
Jul 13 #Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 #Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 #Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 #Javascript
You might like
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
详解React 条件渲染
2020/07/08 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Python数据结构之单链表详解
2017/09/12 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Django缓存Cache使用详解
2020/11/30 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
设计师个人求职信范文
2014/02/02 职场文书
初中学生期末评语
2014/04/24 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
接收函格式
2015/01/30 职场文书
放射科岗位职责
2015/02/14 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
Python中time与datetime模块使用方法详解
2022/03/31 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python