//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素
提高页面效率 var d1 = new Date();
//创建十个段落,常规的方式
for(var i = ; i < ; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild (oTxt);
document.body.appendChild(p);
}
var d2 = new Date();
document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime())); //使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document.createDocumentFragment();
for(var i = ; i < ; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
pFragment.appendChild(p);
}
document.body.appendChild(pFragment);
var d4 = new Date();
document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

js文档碎片的更多相关文章

  1. JS性能优化之创建文档碎片(document.createDocumentFragment)

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  2. JS JavaScript中的文档碎片 DocumentFragement JS性能优化

    文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...

  3. 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

          讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...

  4. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  5. JS中文档碎片的理解和使用

    1.我们要明白当js操作dom时发生了什么? 每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减 ...

  6. javascript创建文档碎片节点

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  7. createDocumentFragment() 创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  8. javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  9. gulpfile.js文档

    gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...

随机推荐

  1. Spring MVC+Hibernate JPA搭建的博客系统项目中所遇到的坑

    标签: springmvc hibernate 2016年12月21日 21:48:035133人阅读 评论(0) 收藏 举报  分类: Spring/Spring MVC(6)  Hibernate ...

  2. 如何从angular2中的url获取查询参数?

    问题描述 我使用angular2.0.0-beta.7.当组件在像”/path?query=value1″这样的路径上加载时,它被重定向到”/path”.为什么删除了GET参数?如何保留参数? 路由器 ...

  3. HTML5学习笔记(二十五):事件

    在浏览器或文档某个元素发生某个特定情况的瞬间,会作为一个事件进行广播,我们可以对其添加监听来处理特定的事件. 事件流 事件流描述了页面中接收事件的顺序. 整个事件流包含了三个阶段:事件捕获阶段.事件目 ...

  4. socket.io笔记一

    //服务端代码 var server = require('http').createServer(app); var io = require('socket.io')(server,{path:' ...

  5. mysql 配置路径

    1)关于配置文件路径 有时候,我发现虽然尝试修改了配置文件的一些变量,但是并没有生效.后来才发现原来是因为修改的文件并非MySQL服务器读取的配置文件. 如果不清楚MySQL当前使用的配置文件路径,可 ...

  6. SVN文件加锁

    原文:SVN与TortoiseSVN实战:文件加锁详解 加锁与解锁的操作对于项目中的二进制文件,如图片.声音.动态库等不可合并文件是非常有用的,可以让这些文件防止产生恼人的冲突,但TortoiseSV ...

  7. EntityFramework安装和EF升级方法

    例如:如何在vs2010上安装EntityFramework5.0? 首先,需要安装一个vs插件,名称为NuGet Package Manager,微软官方发布的,其作用就是为vs工程项目自动下载.安 ...

  8. Git补充命令行操作操作

    Git命令行基本操作这里有我之前整理的git基本操作,常用的操作. 本文以实际功能和实例来说明git GUI的实现原理. 单独更新特定文件 $ git checkout readme.md 删除特定文 ...

  9. FFmpeg Basics学习笔记(1)ffmpeg基础

    1 FFmpeg的由来 FFmpeg缩写中,FF指的是Fast Forward,mpeg是 Moving Pictures Experts Group的缩写.官网:ffmpeg.org 编译好的可执行 ...

  10. LeetCode: Pascal's Triangle 解题报告

    Pascal's Triangle Given numRows, generate the first numRows of Pascal's triangle. For example, given ...