JavaScript文档碎片操作实例分析


Posted in Javascript onDecember 12, 2015

本文实例分析了JavaScript文档碎片操作方法。分享给大家供大家参考,具体如下:

使用文档碎片在某些情况下可以提高页面效率。

javascript操作dom是一个很耗性能的过程,在某些情况下,不得不进行dom循环操作,我们每次对dom的操作都会触发"重排",这严重影响到能耗,一般通常采取的做法是尽可能的减少dom操作来减少"重排"。

面对循环操作dom的过程,我们选择使用文档碎片(creatDocumentFragment),将需要添加到dom中的内容一次性添加到文档碎片中,然后将文档碎片添加到dom树,这样就可以有效的减少操作dom的次数。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文档碎片</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
  var temp = document.createDocumentFragment();//文档碎片(当把文档碎片付给某节点时,只是把文档碎片中的子节点付给了某节点,它本身并没有插入到这个节点中)
  for (var i=0; i<100; i++) {
    var test =document.createElement('div');//创建一个节点
    test.innerHTML = 'aaa' + i;//给节点添加内容
    temp.appendChild(test);//把创建的节点插入到temp文档中
  }
  document.body.appendChild(temp);//把temp文档插入到body末尾
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
npm 语义版本控制详解
Sep 10 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 Javascript
javascript性能优化之事件委托实例详解
Dec 12 #Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 #Javascript
jQuery Validate初步体验(二)
Dec 12 #Javascript
jQuery Validate初步体验(一)
Dec 12 #Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 #Javascript
jQuery同步提交示例代码
Dec 12 #Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python实现人机猜拳小游戏
2020/02/03 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python实现AdaBoost算法的示例
2020/10/03 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
经典洗发水广告词
2014/03/13 职场文书
司机岗位职责范本
2015/04/10 职场文书
初中数学教学随笔
2015/08/15 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL