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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
countUp.js实现数字滚动效果
Oct 18 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
Protoss兵种介绍
2020/03/14 星际争霸
php fckeditor 调用的函数
2009/06/21 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
jQuery中map()方法用法实例
2015/01/06 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python实现微信机器人的方法
2019/09/06 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python通过socketserver处理多个链接
2020/03/18 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
英文版区域经理求职信
2013/10/23 职场文书
运动会广播稿100字
2014/01/11 职场文书
国庆促销活动总结
2014/08/29 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技