高性能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 ...
随机推荐
- 轻松自动化---selenium-webdriver(python) (七)
本节知识点: 多层框架或窗口的定位: switch_to_frame() switch_to_window() 智能等待: implicitly_wait() 对于一个现代的web应用,经常会出现框架 ...
- Windows Azure Cloud Service (38) 微软IaaS与PaaS比较
<Windows Azure Platform 系列文章目录> 最近一直想总结Azure IaaS和PaaS的区别与比较,写个博文详细说明一下.建议读者在阅读之前,先熟悉微软PaaS和Ia ...
- Moon.Orm3.8技术全攻略
Moon.ORM技术全攻略 一.绪论 本文主要是针对Moon.ORM的技术的讨论及其使用使用指导.如有其它疑问,请留言.本文主要针对Moon.ORM3.9版本,同时将会对4.0做一个技术预览.本文从 ...
- SQL--空值处理
--为空 SELECT * FROM dbo.Product WHERE Price IS NULL --不为空 SELECT * FROM dbo.Product WHERE Price IS NO ...
- ASP.NET MVC显示HTML字符串
一些html经HtmlEncode后,如“<span>测试数据</span>”.现需要把这些内容正常显示于asp.net mvc的视图内. 举个例子来解决与说明,先创建一个mo ...
- asp.net后台注册js的四种方法
1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("kel ...
- 获取 Chromium 源代码以及环境配置
一.获取代码 a) 不下载代码,直接浏览,到这里:http://src.chromium.org/viewvc/chrome/ 或者这里:http://code.google.com/p/chromi ...
- 从NavigationController 下的UITableView中移除 header
this.AutomaticallyAdjustsScrollViewInsets = false; 解析:AutomaticallyAdjustsScrollViewInsets为系统自动为适应na ...
- Java---Java的面试题(一)
1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节 ...
- MySQL: @variable vs. variable. Whats the difference?
MySQL: @variable vs. variable. Whats the difference? up vote351down votefavorite 121 In another qu ...