初识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 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
js实现京东轮播图效果
Jun 30 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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函数之日期时间函数date()使用详解
2013/09/09 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
改进Django中的表单的简单方法
2015/07/17 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python实现飞机大战
2018/09/11 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
工商管理专业学生的自我评价
2013/10/01 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
年检委托书
2014/08/30 职场文书
课外活动实习计划
2015/01/19 职场文书
男方婚前保证书
2015/02/28 职场文书
行政经理岗位职责
2015/04/15 职场文书
小学教学工作总结2015
2015/05/13 职场文书
人力资源部工作计划
2019/05/14 职场文书
防止web项目中的SQL注入
2021/12/06 MySQL
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers