JavaScript文档碎片操作实例分析
更新时间：2015年12月12日 16:07:41 作者：挨踢前端
这篇文章主要介绍了JavaScript文档碎片操作技巧,结合实例形式分析了JavaScript中使用文档碎片优化dom操作的技巧,需要的朋友可以参考下
本文实例分析了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中本地存储(LocalStorage)和会话存储(SessionStorage)的使用，具有一定的参考价值，感兴趣的可以了解一下2022-08-08
动态设置鼠标事件的方法有很多，接下来为大家介绍下js中是如何做到的，感兴趣的朋友不要错过2013-10-10
本篇文章主要是对js正则表达exec与match的区别进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
JavaScript数组函数unshift、shift、pop、push使用实例
这篇文章主要介绍了JavaScript数组函数unshift、shift、pop、push使用实例,本文先是讲解了声明数组的方法,然后对4个函数使用给出了一些例子,需要的朋友可以参考下2014-08-08
javascript 不停(setInterval)/延时(setTimeout)函数使用实例
如果想实现页面的一些函数的定时执行，需要用到下面的函数大家可以看下用法。2009-08-08
这篇文章主要介绍了JS仿百度自动下拉框模糊匹配提示 的相关资料,需要的朋友可以参考下2016-07-07
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Knockoutjs 的Components 是一种自定义的组件，它以一种强大、简介的方式将你自己的ui代码组织成一种单独的、可重用的模块。接下来通过本文给大家介绍knockoutjs动态加载外部的file作为component中的template数据源的实现方法，一起看看吧2016-09-09
js数组操作学习总结。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
javascript 汉字与拼音转换...2007-02-02
JavaScript 是弱类型, 变量可存储任意类型, 并且运行期间类型可变2011-05-05
最新评论