一、访问与修改DOM

DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响。

减少访问DOM的次数,把运算尽量留在JS端操作。

二、innerHTML 对比 DOM 方法

1、对于原生的DOM方法和innerHTML比较,性能相差无几。

2、对于大量操作,针对不同浏览器,性能不一样,因此取决于经常用的浏览器。

3、建议从可读性、稳定性、编码习惯来决定使用哪种方式。在对字符串经过优化后,innerHTML性能可以得到大幅提升。

三、操作上的优化

1、节点克隆

例如:

var tr = document.createElement("tr");
var otd = document.createElement("td");
for(var i = 1; i<=1000; i++)
{
tr.appendChild(otd.cloneNode(false));
}

2、HTML集合

document 中的方法getElementByName、getElementByTag、getElementByClassName 和属性images、links、forms返回的都是集合。

由于HTML集合一直与文档保持着联系,每次你需要更新最新信息时,都会重复执行查询的过程,哪怕只是获取集合里的元素。

在相同的情况下,遍历一个数组,明显快于一个HTML集合。

访问一个较小的集合,很多情况下缓存Length就够了。toArray()函数可做为一个通用的集合转数组函数,但转换时,需考虑转换后,会多遍历一次。

3、选择最高效的API

DOM API 提供了多种方法,使用时尽量选择最高效的API,例如,遍历查找childNodes 会比nextSibling 慢很多。

4、元素节点

children 比childNodes 快很多,childElementCount 比childNodes.length 快。

5、使用选择器时,尽量合并一次操作。

如:document.querySelectorAll("div.warning, div.notice")

6、不要再重绘布局改变时,查询它。如:

bodystyle.color='red';
tem=computed.backgroundColor;
bodystyle.color='white';
tem=computed.backgroundImage;
//高效写法
bodystyle.color='red';
bodystyle.color='white';
tem=computed.backgroundColor;
tem=computed.backgroundImage;

7、改变样式

多次操作style 样式,不如直接修改其CSS样式,style.cssText,改变className更容易维护。

8、批量修改DOM

当需要批量修改DOM时,可以通过以下步骤来减少重绘或重排的次数:

  a、使元素脱离文档

    隐藏元素,应用修改,再重新显示。
    在DOM之外创建一个子树,再将其拷回文档。
    将原始元素拷贝到一个脱离文档的节点中,修改副本,再替换原始元素。

  b、对其应用多重改变

  c、把元素带回文档中

9、缓存布局信息

将频繁操作的元素信息,保存到变量里,再进行操作。

10、让元素脱离动画流

元素的大小、位置动画变化时,会带来大量的文档重绘。尽量使用元素的绝对定位来使其脱离文档流。

11、tr:hover 类似效果性能会降低很多。

12、事件委托

避免事件的多次绑定和冒泡,阻止默认动作。

高性能JS笔记3——DOM编程的更多相关文章

  1. JS性能优化——DOM编程

    浏览器中的DOM  天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...

  2. 高性能JavaScript笔记三(编程实践)

    避免双重求值 有四个标准函数可以允许你传入代码的字符串,然后它才你动态执行.它们分别是:eval.Function.setTimeout.setInterval 事实上当你在javascript代码中 ...

  3. 高性能JS笔记1——加载执行

    一.脚本位置 1.Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响. 2.Script标签永远不要紧跟Link标签后面. 二.组织脚本 1.合并多个文件在一个Scri ...

  4. [js笔记整理]DOM 篇

    一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元 ...

  5. 高性能WEB开发:DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用 ...

  6. 高性能JS笔记4——算法和流程控制

    一.循环 for.while.do while三种循环的性能都没有多大区别.foreach 的性能较其他三种差 . 既然循环没有多大区别,注意循环内的代码控制. 减少迭代次数. 减少迭代工作量. 推荐 ...

  7. 高性能JS笔记2——数据存取

    数据存取性能而言: 字面量>本地变量>数组元素>对象成员 一.标识符解析的性能 标识符解析是有代价的,一个标识符的位置越深,它的读写速度也就越慢. 局部变量的读写速度是最快的,全局变 ...

  8. 高性能JavaScript笔记一(加载和执行、数据访问、DOM编程)

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  9. <读书笔记>《JS DOM编程艺术》

    2016/03/04 12:00 第一二章:JS的简史以及基本语法 1.P11 2.variable 3.P13    等于 4.P13 5.P14 转义字符 6.关联数组不是一个好习惯 7.P18 ...

随机推荐

  1. 轻松自动化---selenium-webdriver(python) (七)

    本节知识点: 多层框架或窗口的定位: switch_to_frame() switch_to_window() 智能等待: implicitly_wait() 对于一个现代的web应用,经常会出现框架 ...

  2. Windows Azure Cloud Service (38) 微软IaaS与PaaS比较

    <Windows Azure Platform 系列文章目录> 最近一直想总结Azure IaaS和PaaS的区别与比较,写个博文详细说明一下.建议读者在阅读之前,先熟悉微软PaaS和Ia ...

  3. Moon.Orm3.8技术全攻略

    Moon.ORM技术全攻略  一.绪论 本文主要是针对Moon.ORM的技术的讨论及其使用使用指导.如有其它疑问,请留言.本文主要针对Moon.ORM3.9版本,同时将会对4.0做一个技术预览.本文从 ...

  4. SQL--空值处理

    --为空 SELECT * FROM dbo.Product WHERE Price IS NULL --不为空 SELECT * FROM dbo.Product WHERE Price IS NO ...

  5. ASP.NET MVC显示HTML字符串

    一些html经HtmlEncode后,如“<span>测试数据</span>”.现需要把这些内容正常显示于asp.net mvc的视图内. 举个例子来解决与说明,先创建一个mo ...

  6. asp.net后台注册js的四种方法

    1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("kel ...

  7. 获取 Chromium 源代码以及环境配置

    一.获取代码 a) 不下载代码,直接浏览,到这里:http://src.chromium.org/viewvc/chrome/ 或者这里:http://code.google.com/p/chromi ...

  8. 从NavigationController 下的UITableView中移除 header

    this.AutomaticallyAdjustsScrollViewInsets = false; 解析:AutomaticallyAdjustsScrollViewInsets为系统自动为适应na ...

  9. Java---Java的面试题(一)

    1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节 ...

  10. MySQL: @variable vs. variable. Whats the difference?

    MySQL: @variable vs. variable. Whats the difference?   up vote351down votefavorite 121 In another qu ...