一、访问与修改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. Sybase 数据库新增用户,赋权

    Sybase数据库, 需求:新增用户user1,赋予对原数据库中表t_jingyu的查询权限 数据库原用户登陆 isql -U用户 -P密码 -S服务名 sp_addlogin 'user1','us ...

  2. jQuery 实现bootstrapValidator下的全局验证

    前置: 引入jQuery.bootstrap.bootstrapValidator 问题描述: 项目中要求所有的表单输入框中都不能输入&符号.没有在bootstrap中找到有方法可用,只能自己 ...

  3. 解决Fedora解压文件产生乱码的问题

    最近有发现在使用Linux的时候,之前也遇到过在ubuntu下,最后ubuntu貌似在原生下优化了这个问题,现在换到了fedora上的时候问题又出现了,解压出来的文件中文乱码. 为了在linux下可以 ...

  4. MVC应用程序的生命周期图

  5. 常用的一些SQL语句整理,也许有你想要的。

    本篇文章是对一些常用的sql语句进行了总结与分析,需要的朋友参考下,也许会有你需要的. 1.SQL行列转换 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 ...

  6. ASP.NET 的IP帮助类

    个人网站地址: https://www.lesg.cn/netdaima/net/2016-239.html ASP.NET 的IP帮助类 在Web开发中会出现需要调用客户IP的方法: 一般调用方法就 ...

  7. SQLServer中游标是如何处理数据的?

    游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次以行或者多行前进或向后浏览数据的能力.我们可以把游标当作一个指针,它可以指定结果中的任何位置,然后允许 ...

  8. Android发送短信

    // 发送短信 public void sendMsg(){ String content = edtSend.getText().toString(); SmsManager smsManager ...

  9. Mybatis添加返回主键ID

    1.对应xml文件<insert id="insert" parameterType="DetectStandard"useGeneratedKeys=& ...

  10. Verilog学习笔记简单功能实现(七)...............接口设计(并行输入串行输出)

    利用状态机实现比较复杂的接口设计: 这是一个将并行数据转换为串行输出的变换器,利用双向总线输出.这是由EEPROM读写器的缩减得到的,首先对I2C总线特征介绍: I2C总线(inter integra ...