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. php header示例代码(推荐)

    <?php /*** Function: PHP header() examples (PHP) ** Desc: Some examples on how to use the header( ...

  2. Android_Chronometer计时器

    最近做一个项目用到Handler 和Message ,开始时不是很明白,不了解其中的内部机制,所以开发起来有点难度,之后自己找了Android 时间服务 这一节的内容,总结了一点关于时间的知识,在这里 ...

  3. 《APUE》第四章笔记（1）

    1.引言 本章介绍文件系统的特征和文件的性质.从stat函数开始,逐个说明stat结构的每一个成员以了解文件的所有属性.在此过程中,还将会说明修改这些属性的各个函数,并更详细地查看UNIX文件系统的结 ...

  4. 关于.NET技术前途问题的讨论

    我去年曾经在论坛发起过关于.NET技术前途问题这个话题的讨论,也引起了很多同行和朋友的回复,时间过去大半年,自己也有了一些新的理解.本文的目的就是将其中一些精彩的观点整理出来并谈谈自己的观点. 引子 ...

  5. linux日志审计项目案例实战（生产环境日志审计项目解决方案）

    所谓日志审计,就是记录所有系统及相关用户行为的信息,并且可以自动分析.处理.展示(包括文本或者录像) 推荐方法:sudo配合syslog服务,进行日志审计(信息较少,效果不错) 1.安装sudo命令. ...

  6. ora_reco_070361 hs message to agent event 等待事件

    现象描述:oracle通过透明网关查询Teradata数据库的表突然变得很慢,小表可以查询出来,大表干脆就出不来. 分析过程: 1.网络可以ping通,小表可以过来,说明网络和网关都没有什么问题的. ...

  7. NodeJS+ExpressJS+SocketIO+MongoDB应用模板

    OS:Win8.1 with update 关键字:NodeJS,ExpressJS,SocketIO,MongoDB. 1.源代码下载:https://github.com/ldlchina/ESM ...

  8. Linux下STM32开发环境的搭建

    目录 一.概述 1.目的 2.开发环境描述 3.Eclipse构建的STM32集成开发环境结构 4.GDB / GDB Server 调试模型 二.搭建步骤 三.详细的搭建过程 1.安装eclipse ...

  9. 【配置文件节点】java世界配置文件节点

    Spring <context:property-placeholder/> 期望:能不能有一种解决方案可以方便我们在一个阶段内不需要频繁书写一个参数的值,而在不同阶段间又可以方便的切换参 ...

  10. UIScrollView解决touchesBegan等方法不能触发的解方案

    新建一个类继承自UIScrollView  并重写下面的方法 -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [su ...