Minimize DOM Access

javascript 之 DOM 优化

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <ul id="mylist1"></ul>

    <ul id="mylist2"></ul>

    <ul id="mylist3"></ul>

    <script>

        var data = [

            {

                'name': 'a',

                'url': 'http://www.a.com/'

            },

            {

                'name': 'b',

                'url': 'http://www.b.com/'

            }

        ]

        function appendDataToElement(appendToElement, data) {

            var a

            var li

            var i = 0

            var max = data.length

            for (; i < max; i++) {

                a = document.createElement('a')

                a.href = data[i].url

                a.appendChild(document.createTextNode(data[i].name))

                li = document.createElement('li')

                li.appendChild(a)

                appendToElement.appendChild(li)

            }

        }

        // 离线操作DOM树：对DOM树结构进行较大的改变时，需要先将元素脱离文档流，然后进行改变操作，最后再放回到文档流中

        // 减少重排的一个方法是通过改变 display 属性，临时从文档上移除 <ul> 元素然后再恢复它

        var ul1 = document.getElementById('mylist1')

        ul1.style.display = 'none'

        appendDataToElement(ul1, data)

        ul1.style.display = 'block'

        // 在文档之外创建并更新一个文档片断，然后将它附加在原始列表上

        var fragment = document.createDocumentFragment()

        appendDataToElement(fragment, data) // 循环添加，多次操作。拼接字符串一次性添加不是一样吗。

        document.getElementById('mylist2').appendChild(fragment)

        // 创建要更新节点的副本，然后在副本上操作，最后用新节点覆盖老节点

        var old = document.getElementById('mylist3')

        var clone = old.cloneNode(true)

        appendDataToElement(clone, data)

        old.parentNode.replaceChild(clone, old)

    </script>

</body>

</html>

-_-#【减少 DOM 访问】“离线”更新节点，再将它们添加到树中的更多相关文章

  1. -_-#【减少 DOM 访问】缓存已经访问过的元素

    Minimize DOM Access Cache references to accessed elements 选择器查询是开销很大的方法.所以,使用选择器的次数应该越少越好,并且尽可能缓存选中的 ...

  2. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  3. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  4. Vivado_MicroBlaze_问题及解决方法_汇总（不定时更新）

    Vivado_MicroBlaze_问题及解决方法_汇总(不定时更新) 标签: Vivado 2015-07-03 14:35 4453人阅读 评论(0) 收藏 举报  分类: 硬件(14)  版权声 ...

  5. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  6. 第10章 文档对象模型DOM 10.1 Node节点类型

    DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始 ...

  7. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  8. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  9. Javascript高级编程学习笔记（35）—— DOM（1）节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

随机推荐

  1. vs 2010 Cannot find or open the PDB file

    打开VS2010:工具-->选项-->>调试-->符号接下来就是选择Microsoft,然后确认  接着随便编译一个程序,过程会灰常的慢. 看到此目录下符号缓存了吗?C:\Us ...

  2. HTML5之 离线数据存储

    --- Storage接口 无论是sessionStorage还是localStorage 属性/方法 返回值 描述 ----------------------------------------- ...

  3. 排序算法TWO:快速排序QuickSort

    import java.util.Random ; /** *快速排序思路:用到了分治法 * 一个数组A[0,n-1] 分解为三个部分,A[0,p - 1] , A[p] , A[p + 1, n-1 ...

  4. Linux内核Radix Tree（三）：API介绍

    1.     单值查找radix_tree_lookup 函数radix_tree_lookup执行查找操作,查找方法是:从叶子到树顶,通过数组索引键值值查看数组元素的方法,一层层地查找slot.其列 ...

  5. c#拖放

    AllowDrop DragEnter: if (e.Data.GetDataPresent(DataFormats.FileDrop)) e.Effect = DragDropEffects.Cop ...

  6. 【原】Object 异常静态

    //所有的类都继承Object类: Object a=; Object b="ddfasfda"; //正常情况下,都会省略掉:Object:但实际上是存在的: class tes ...

  7. win7定时任务

    最近某app有个小抽奖,每天点击太麻烦,想做个定时任务访问抽奖链接(带着cookie登录信息,即可抽奖成功) 刚开始做了php,最后发现部署在百度bae中没法做定时任务每天执行,后来换成了python ...

  8. linux下tomcat的安装

    本文主要内容: (1)安装apr,这是 Apache 为了提升 Tomcat 的性能搞的一套本地化 Socket, Thread, IO 组件也就是说它有高级 IO 功能, 操作系统级别的功能调用, ...

  9. PHP生成压缩文件开发实例

    大概需求: 每一个订单都有多个文件附件,在下载的时候希望对当前订单的文件自动打包成一个压缩包下载 细节需求:当前订单号_年月日+时间.zip  例如: 1.生成压缩文件,压缩文件名格式: 2.压缩文件 ...

  10. MVC+EF 随笔小计——NuGet程序包管理

    安装EF 打开 工具-库程序包管理器-程序包管理器控制台 输入 install-package entityframework 去MSDN上查看下EF的架构图:http://msdn.microsof ...