关于document.createDocumentFragment()
发布时间:2009-04-05 16:04:00
documentFragment 是一個無父對象的document對象.
他支持以下DOM2方法:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2屬性:
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以將documentFragment 作為一個參數,(比如Node的 appendChild和insertBefore 方法),這樣,fragment 就可以被追加到父對象中。
Example:
var frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Ipsum Lorem'));
document.body.appendChild(frag);
document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。
为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
var oui=document.getElementById("oItem");
for(var i=0;i<10;i++)
{
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item"+i));
}
上面的代码在循环中调用了oui.appendChild(oli),每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点,也要更新页面。所以一共要更新页面20次。
为了页面的优化,我们要尽量减少DOM的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatDocumentFragment(),代码如下:
var oui=document.getElementById("oItem");
var oFragment=document.createDocumentFragment();
for(var i=0;i<10;i++){
var oli=document.createElement("li");
oli.appendChild(document.createTextNode("Item"+i));
oFragment.appendChild(oli);
}
oui.appendChild(oFragment);


猜你喜欢
- asp之家注:那么为什么要使用分页呢?当记录不多的时候,如10个或20个,我们可以也没必要使用分页来显示数据,但是数据是在不断增加的,当到了
- 文档 地址functools.partial作用:functools.partial 通过包装手法,允许我们 "重新定义"
- Qt是一种基于C++的跨平台图形用户界面应用程序开发框架。如何跨平台?上到服务器上位机,下到嵌入式GUI,上天入地无所不能。Qt最早是由19
- 隐患一:如果客户端机器的cookie一旦因病毒而失效了,那么session也就相当于没有了。 隐患二:session在php中默认的是以文件
- APScheduler是一个Python定时任务框架,使用起来十分方便。提供了基于日期、固定时间间隔以及crontab类型的任务,并且可以持
- gRPCgRPC远程过程调用框架是基于动作的模式,类似远程调用微服务。这使得gRPC成为一种围绕Protobufs构建的进程间通信(IPC)
- 前言相信各位一定有收到过这样的群发短信,据说还被归类为玩转微信的五大技巧之一╮(╯▽╰)╭但,其实,只要跑一下脚本,就轻松找出删除自己的好友
- 一、变量和表达式>>> 1 + 1 &n
- 本文实例为大家分享了python+opencv实现堆叠图片的具体代码,供大家参考,具体内容如下# import cv2# import nu
- Plotly Express是对 Plotly.py 的高级封装,内置了大量实用、现代的绘图模板,用户只需调用简单的API函数,即可快速生成
- 网络上关于各种语言和应用软件的速查手册和快速参考指南有很多很多,不幸的是当我们需要的时候,总是很难找到,所以我决定花点时间尽可能的收集更多的
- 1、安装 vue-i18n依赖yarn add vue-i18n 或者 npm install vue-i18n --save-dev2、在
- Jupyter是一个在线的代码编辑工具,想要调用本地的文件则需要切换路径到相应的文件路径下切换路径要在打开Jupyter之前完成操作:cd
- 首先要说明的是,这个标题有点标题党的意思,这个 bug 也存在于 IE8 下,在 IE6 和 IE7 下正常。之前写过两篇关于 I
- 本文实例讲述了Python基于TCP实现会聊天的小机器人功能。分享给大家供大家参考,具体如下:一 代码1、服务端程序import socke
- 本文实例总结了Python多进程并发与多线程并发。分享给大家供大家参考,具体如下:这里对python支持的几种并发方式进行简单的总结。Pyt
- 目录多线程(连接池)操作MySQL插入数据1.主要模块2.创建连接池3.数据预处理4.线程任务5.启动多线程6.完整示例7.思考/总结多线程
- 整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享。在data中定义变量:data() { r
- 现在我们用python代码实现感知器算法。# -*- coding: utf-8 -*-import numpy as npclass Pe
- 1、设置无头浏览器模式from selenium import webdriverfrom selenium.webdriver.chrom