初识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 相关文章推荐
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
js表单登陆验证示例
2016/10/19 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python简单实现获取当前时间
2016/08/27 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python实现机器学习之元线性回归
2018/09/06 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
银行职员思想汇报
2013/12/31 职场文书
写给老师的表扬信
2014/01/21 职场文书
领导干部培训感言
2014/01/23 职场文书
大学生入党自荐书
2015/03/05 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js