初识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 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JS实现音乐钢琴特效
Jan 06 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 加密解密函数代码
2011/08/26 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
简单的js分页脚本
2009/05/21 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
python聊天程序实例代码分享
2013/11/18 Python
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python3个性签名设计实现代码
2018/06/19 Python
python之super的使用小结
2018/08/13 Python
python join方法使用详解
2019/07/30 Python
车贷收入证明范本
2014/09/14 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
统招统分证明
2015/06/23 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书