JavaScript文档碎片操作实例分析

本文实例分析了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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body

  • 基于JavaScript创建动态Dom

    基于JavaScript创建动态Dom

    动态脚本 我们在页面中使用<script>元素就可以向页面中插入javascript代码.有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码.所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本.与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码. 动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码: var script = document.cr

  • 初识javascript 文档碎片

    后来是一技术群问到以下一段代码: 复制代码 代码如下: 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.firstC

  • JavaScript中对DOM节点的访问、创建、修改、删除

    JavaScript中对DOM节点的访问、创建、修改、删除

    DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

  • 简单实现JS对dom操作封装

    这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • JavaScript DOM 学习总结(五)

    1.DOM简介. 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构,即节点树.通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能.JS能够改变页面中所有的HTML元素.属性和CSS样式,并对页面中所有事件做出响应.所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作. 2.DOM获取元素. JS要想操作H

  • javascript bom是什么及bom和dom的区别

    javascript bom是什么及bom和dom的区别

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C BOM最初是Netscape浏览器标准的一部分 在BOM章节中你将学到什么 BOM教程中,同学们将学到与浏览器窗口交互的一些对

  • JavaScript文档碎片操作实例分析

    本文实例分析了JavaScript文档碎片操作方法.分享给大家供大家参考,具体如下: 使用文档碎片在某些情况下可以提高页面效率. javascript操作dom是一个很耗性能的过程,在某些情况下,不得不进行dom循环操作,我们每次对dom的操作都会触发"重排",这严重影响到能耗,一般通常采取的做法是尽可能的减少dom操作来减少"重排". 面对循环操作dom的过程,我们选择使用文档碎片(creatDocumentFragment),将需要添加到dom中的内容一次性添加

  • PHP4和PHP5版本下解析XML文档的操作方法实例分析

    本文实例讲述了PHP4和PHP5版本下解析XML文档的操作方法.分享给大家供大家参考,具体如下: 在PHP网站开发与建设过程中,时常会碰到需要对XML文档进行解析,PHP4版本自带了XML解析器(sax),PHP5版本增加了SimpleXML(基于dom)的XML扩展,对XML的解析更是非常方便,今天和大家分享下在不同环境下对XML文档进行解析的方法. XML文档 <?xml version="1.0" encoding="gbk"?> <Leap

  • javascript将DOM节点添加到文档的方法实例分析

    javascript将DOM节点添加到文档的方法实例分析

    本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • 有趣的JavaScript隐式类型转换操作实例分析

    本文实例讲述了JavaScript隐式类型转换操作.分享给大家供大家参考,具体如下: JavaScript的数据类型是非常弱的(不然不会叫它做弱类型语言了)!在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加.之所以不同的数据类型之间可以做运算,是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的,如下是数值类型和布尔类型的相加: 3 + true; // 4 结果是一个数值型!如果是在C或者Java环境的话,上面的运算肯定会因为运算符两边

  • javascript性能优化之DOM交互操作实例分析

    本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite

  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • JavaScript文档对象模型DOM

    JavaScript文档对象模型DOM

    目录 一.JavaScript 能够改变页面中的所有 HTML 元素 1.通过 id 找到 HTML 元素 2.通过标签名查找 HTML 元素 3.通过类名找到 HTML 元素 4.JavaScript 能够改变页面中的所有 HTML 属性 5.JavaScript 能够改变页面中的所有 CSS 样式 6.JavaScript 能够对页面中的所有事件做出反应 前言: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).通过可编程的对象模型,JavaScr

  • jQuery EasyUI API 中文帮助文档和扩展实例

    jQuery EasyUI API 中文帮助文档和扩展实例

    下载地址:jQuery EasyUI API 中文帮助文档 1.validatebox验证和提示框扩展: //弹框 $.extend({ show_alert: function (strTitle, strMsg) { $.messager.alert(strTitle, strMsg); } }); //扩展validatebox,添加验证 $.extend($.fn.validatebox.defaults.rules, { eqPwd: { validator: function (va

随机推荐