初识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渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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 数组入门教程小结
2009/05/20 PHP
php简单的会话类代码
2011/08/08 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python中尾递归用法实例详解
2015/04/28 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
通过实例了解python property属性
2019/11/01 Python
python重要函数eval多种用法解析
2020/01/14 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
黑白记忆观后感
2015/06/18 职场文书
七一晚会主持词
2015/06/29 职场文书
护理工作心得体会
2016/01/22 职场文书
详解Django的MVT设计模式
2021/04/29 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫