高性能JS笔记3——DOM编程
一、访问与修改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编程的更多相关文章
- JS性能优化——DOM编程
浏览器中的DOM 天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...
- 高性能JavaScript笔记三(编程实践)
避免双重求值 有四个标准函数可以允许你传入代码的字符串,然后它才你动态执行.它们分别是:eval.Function.setTimeout.setInterval 事实上当你在javascript代码中 ...
- 高性能JS笔记1——加载执行
一.脚本位置 1.Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响. 2.Script标签永远不要紧跟Link标签后面. 二.组织脚本 1.合并多个文件在一个Scri ...
- [js笔记整理]DOM 篇
一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元 ...
- 高性能WEB开发:DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用 ...
- 高性能JS笔记4——算法和流程控制
一.循环 for.while.do while三种循环的性能都没有多大区别.foreach 的性能较其他三种差 . 既然循环没有多大区别,注意循环内的代码控制. 减少迭代次数. 减少迭代工作量. 推荐 ...
- 高性能JS笔记2——数据存取
数据存取性能而言: 字面量>本地变量>数组元素>对象成员 一.标识符解析的性能 标识符解析是有代价的,一个标识符的位置越深,它的读写速度也就越慢. 局部变量的读写速度是最快的,全局变 ...
- 高性能JavaScript笔记一(加载和执行、数据访问、DOM编程)
写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...
- <读书笔记>《JS DOM编程艺术》
2016/03/04 12:00 第一二章:JS的简史以及基本语法 1.P11 2.variable 3.P13 等于 4.P13 5.P14 转义字符 6.关联数组不是一个好习惯 7.P18 ...
随机推荐
- AndroidManifest.xml配置文件
AndroidManifest.xml启动文件 主activity: <activity android:name="com.example.android01.MainActivit ...
- [C++][操作符]四种显示转换操作符
整理了C++ Primer中提到的四种显示转换,用思维导图写出来,是不是很清晰O(∩_∩)O.
- C#获取年龄段 几零后
/// <summary> /// 根据年龄获得年龄段 /// </summary> /// <param name="age"></pa ...
- 基于HTML5的WebGL设计汉诺塔3D游戏
在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. http://hightopo.com/demo/hanoi_20151106/index.html ...
- 提取KIndle中每本书的笔记并单独保存
整体思路 目标:将Kindle中的每本书的笔记标注单独提取出保存为一个Markdown文件 其中检测KIndle是否已经正常插入的判断方法: 思路1:读取媒介挂载记录 思路2:直接判断挂载地址是否存在 ...
- Fiddler 抓取手机APP数据包
Fiddler是一个调试代理,下载地址http://www.telerik.com/download/fiddler 下载安装运行后,查出运行机器的IP,手机连接同一网域内的WIFI,手机WIFI连接 ...
- PHP访问MySql数据库介绍
在网站后台,经常要与数据库打交道.本文介绍如何使用XAMPP来管理MySql数据库及如何用PHP来访问MySql数据库. 一.使用XAMPP来管理MySql数据库 首先使用XAMPP打开MySql的管 ...
- 【SQL】找出行数与自增标识值不相等的表(即有缺行)
环境:mssql ent 2k8 r2 原理:遍历所有含自增列的用户表,用sp_spaceused过程分别获取每张表的行数并写入临时表,然后使用IDENT_CURRENT函数获取表的最大标识值,比较二 ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析(十六 ) ConnectionStatic
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 许可是 ...
- 从vs2010的UnitTestFramework类库提取私有方法反射调用的方法
背景 年龄大点的程序员都知道在vs2010中创建单元测试非常的简单,鼠标定位在方法名字,右键创建单元测试,就会创建一个测试方法,即使是在私有方法上也可以创建测试方法. VS2010以后就没这么简单了, ...