初识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获取下拉列表的值和元素个数示例
May 07 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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/12/13 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
使用js画图之画切线
2015/01/12 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
如何提高数据访问速度
2016/12/26 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
详解JS数值Number类型
2018/02/07 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
用Python逐行分析文件方法
2019/01/28 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python基于event实现线程间通信控制
2020/01/13 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
产品销售员岗位职责
2013/12/18 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
出国签证在职证明
2014/01/16 职场文书
父母对孩子的寄语
2014/04/09 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
小学运动会加油词
2015/07/18 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js