刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片

一、对文档碎片的基本认识

  • 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的
  • 文档碎片原理

减少对DOM 修改带来的的回流操作。

下面我说一下什么是DOM的回流操作

举个粗俗简单的例子:

比如一个人去商场买醋、白酒、盐。

他有两种做法:

(1)一次性去商场把这三样东西都买回家,这样来回也就是2趟;

(2)可以是买一样东西就拿回家,然后又回去买第二样东西,接着又回去买第三样东西,显示这样来回是要6趟。

显然后者是神经病。

这个例子想表达的这就是回流操作,来来去去。

现在我结合一下DOM的新增节点,使用文档碎片的方法怎么减少DOM回流操作,来提高性能。

例如:一次性定义10000个li节点,然后把它们放在文档碎片上,最后一次性挂载上去。

另一种方法,我们没新增一个li节点就把它挂载上去,显然这样要操作DOM的次数很多,引发的DOM操作回流次数多,从理论上降低了执行性能。(只是理论上,因为我后来做的例子,跟我预期的结果不一致。)

如何创建一个文档碎片

var oFrag = document.createDocumentFragment();              //是用来创建文档碎片的。

下面我把我实验的代码+执行截图贴出来:

我的测试方法:新增10000个li节点,统计执行的时间,通过对比两者的的执行时间来判断谁的性能更高一点。

(1)使用普通方法挂载新增节点

 1<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>文档碎片性能测试——普通方法</title>
6 <script>
7 window.onload = function(){
8 var oBtn = document.getElementById("btn1");
9 var oUl = document.getElementById("ul1");
10
11 var iStart = new Date().getTime(); //开始执行的时间
12 oBtn.onclick = function(){
13 //普通追加
14
15 for(var i=0; i<100000; i++){ //使用for循环创建100000个li节点,并一个个的挂载在ul下面
16 var oLi = document.createElement("li");
17 oUl.appendChild(oLi);
18 }alert(new Date().getTime() - iStart); //打印出最后这个程序耗费的而时间
19 }
20
21 }
22 </script>
23 </head>
24 <body>
25 <input id="btn1" type="button" value="普通" />
26 <ul id="ul1">
27 <li>li</li>
28 </ul>
29 </body>
30 </html>

执行结果:

(2)使用文档碎片:

 <!--创建文档碎片-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档碎片性能测试</title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1"); var iStart = new Date().getTime();
oBtn.onclick = function(){
//文档碎片方式
var oFrag = document.createDocumentFragment();//建立一个文档对象,作为新增节点的临时容器,最后将这个容器连的内容直接挂载在父节点ul下面。 for(var i=0; i<100000; i++){
var oLi = document.createElement("li");
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
alert(new Date().getTime() - iStart);
} }
</script>
</head>
<body>
<input id="btn1" type="button" value="碎片" />
<ul id="ul1">
<li>li</li>
</ul>
</body>
</html>

执行截图:

大概总结:

当我们需要大量 appendChild 页面元素时,可以先将这些元素 appendChild 进 document.createDocumentFragment。

然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。(再次证明只是理论上的提高性能)

这些就是我学习到的内容,以后有学习到更多关于这方面的,到时再更新。

javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率的更多相关文章

  1. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  2. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  3. JavaScript权威指南--脚本化文档

    知识要点 脚本化web页面内容是javascript的核心目标. 第13章和14章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象, ...

  4. Javascript绝不要使用在文档加载之后使用 document.write(), 怎么理解?

    在文档加载之后使用 document.write(),会覆盖该文档.   需满足两个条件:      1.在函数内部调用document.write():      2.通过按钮响应调用函数:   举 ...

  5. 关于HTML文档的文档模式

    HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...

  6. 返回当前文档的文档的url

    HTML DOM referrer 属性 HTML DOM Document 对象 定义和用法 referrer 属性可返回载入当前文档的文档的 URL. 语法 document.referrer 说 ...

  7. 把 MWeb Lite 的文档库文档和数据搬到 MWeb 正式版中

    MWeb Lite 版的文档库中的文档要搬到 MWeb 正式版中,如果 Lite 版的文档中没有图片或者只有少量图片,可以用导入导出为 Markdown 的方法. 否则的话请用以下方式(注意下面这个方 ...

  8. 使用C#动态生成Word文档/Excel文档的程序测试通过后,部署到IIS服务器上,不能正常使用的问题解决方案

    使用C#动态生成Word文档/Excel文档的程序功能调试.测试通过后,部署到服务器上,不能正常使用的问题解决方案: 原因: 可能asp.net程序或iis访问excel组件时权限不够(Ps:Syst ...

  9. 创建MFC应用程序的类型:单文档+多文档+基于对话框

    单文档支持文档视图架构.数据的保存--(读取--改动)文档类功能--显示(视图类功能),比較方便. 基于对话框,主窗体是对话框类型.能够方便的使用控件,所见即所得的编程,比較方便. 单文档类似&quo ...

随机推荐

  1. Java之网络请求工具类(依赖:org.apache.http;注:HttpClient 4.4,HttpCore 4.4)

    到此处可以去下载依赖包:http://hc.apache.org/downloads.cgi import java.util.List; import org.apache.http.HttpSta ...

  2. Servlet&JSP基础

    Servlet     JSP     JSP四种基本语法:     JSP注释<%--注释内容-->     JSP声明<%!变量.函数%>     JSP表达式<%= ...

  3. HTTP 无法注册 URL http://+:80/Temporary_Listen_Addresses/92819ef8-81ea-4bd9-

    今天在练习wcf时,客户端调用服务端方法时出现异常.如下: 未处理System.ServiceModel.AddressAlreadyInUseException Message="HTTP ...

  4. WPF之application对象

    WPF:Application简介 Application是一个地址空间,在WPF中应用程序就是在System.Windows命名空间下的一个Application实例.一个应用程序只能对应一个App ...

  5. ubuntu修改主机名称

    一.为何要修改主机名称 在安装Ubuntu时,一不小心主机名称输入的“too long”了,导致命令行上就提示符占据了一行的1/3,迫使我产生修改主机名称的冲动. 二.操作方法 原理:系统启动时,会从 ...

  6. Quartz源码阅读

    基于Quartz1.8.5的源码解读 首先看一个demo //简单的任务管理类 //QuartzManager.java package quartzPackage; import java.text ...

  7. LightOj_1265 Island of Survival

    题目链接 题意: 在孤岛生存, 孤岛上有t头老虎,d头鹿, 每天会出现随机出现两只生物(包括你自己), 如果出现了一只老虎,那么你将被吃掉, 如果两只老虎, 则两只老虎会同归于尽,其他情况你都将生存下 ...

  8. iOS程序开发引用的第三方库之间出现duplicate symbol时的处理方法

    iOS程序集成的第三方库过多时,很容易出现某几个库同时用到了一样的函数库,也就是在你的程序link时会提示duplicate symbol,而重复的符号又不是由你自己程序的代码造成的,也就说没法通过直 ...

  9. poj 3667 Hotel

    昨天学习了线段树的延迟标记: 发现自己还有区间合并没有学: 抓紧时间学习一下: 代码: #include<cstdio> #include<algorithm> #define ...

  10. 更改linux系统时间

    date  //查看时间 date -s '21:04:20 2014-06-06' //将时间设为21:04:20 2014-06-06