初识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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 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
Protoss建筑一览
2020/03/14 星际争霸
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
12岁生日感言
2014/01/21 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2014年后勤工作总结
2014/11/18 职场文书
Python Socket编程详解
2021/04/25 Python
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android
Vue router配置与使用分析讲解
2022/12/24 Vue.js