初识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 相关文章推荐
js/html光标定位的实现代码
Sep 23 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
JS实现小米轮播图
Sep 21 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
Cookie 小记
2010/04/01 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
党员自我评价分享
2013/12/13 职场文书
授权委托书样本
2014/04/03 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
写给导师的自荐信
2015/03/06 职场文书
倡议书的格式写法
2015/04/28 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL