初识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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
js实现div在页面拖动效果
May 04 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
vue实现登录拦截
Jun 29 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/03/04 星际争霸
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP的自定义模板引擎
2017/03/24 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
索趣科技的答案
2007/02/07 Javascript
js 对象是否存在判断
2009/07/15 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
python实现批量修改文件名代码
2017/09/10 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Python requests上传文件实现步骤
2020/09/15 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
自主招生自荐信格式
2013/12/03 职场文书
运动会口号8字
2014/06/07 职场文书
物理学专业求职信
2014/07/04 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
高二语文教学反思
2016/02/16 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL