javascript 效率优化

1.什么是DOM

DOM 是一个与语言无关的，用于操作XML 和HTML 文档的应用程序接口(API)，在浏览器中，主要与HTML文档打交道，在Web 应用中也经常检索XML文档，DOM API 用来访问文档中的数据。

2.DOM和JavaScript的关系

DOM 虽然是个与语言无关的API，他在浏览器中的接口却是用JavaScript实现的。客户端脚本在和底层文档打交道的过程中，DOM就成为平时JavaScript 编码中的重要部分。在浏览器中，通常会把DOM和JavaScript (指ECMAScript)独立实现，从而导致一个问题，DOM和JavaScript交互的过程中会产生消耗使性能变慢。

3.提高性能的推荐做法：尽可能减少访问DOM的次数，把运算尽量留给ECMAScript这一端处理。

例：

for(i=0;i<1000;i++)

document.getElementById(‘here’).innerHTML+=’a’;

改为:

for(i=0;i<1000;i++)

content+=’a’;

document.getElementById(‘here’).innerHTML+=content;

4.innerHTML 和 document.createElement()性能相差无几。

  element.cloneNode()会比document.createElement()性能好点，但不是特别明显。

5.HTML集合

HTML集合是包含DOM节点引用的类数组对象。他们并不是真正的数组，没有push()或slice()之类的方法，但是提供了一个类似数组的length属性，还能以数字索引的方式访问集合中的元素。HTML集合是出于一种实时状态，当底层文档对象更新时，他也会自动更新。在每次需要最新信息时，都会执行查询过程，这就导致效率低下。

一般来说，对于任何类型的DOM访问，当同一个DOM属性或方法需要多次访问时候，最好使用一个局部变量将其缓存。当遍历一个集合时候，首要优化原则是把集合存储在局部变量中，把length缓存在循环外部，然后使用局部变量访问这些需要多次访问的元素。

6.选择器API 

querySelectorAll()是原生的DOM方法，比使用JavaScript和DOM遍历查找元素快得多。querySelectorAll()返回的是一个类数组对象的静态列表而不是HTML集合。

7.重排与重绘

样式的改变会导致浏览器重新渲染页面。

重排与重绘的可能代价会很高，因此要尽量减少此类操作的发生，应该合并多次对DOM样式的修改或者脱离DOM进行修改。

(1)将要样式合并一次发生：el.style.cssText+=’’; el.className=’’;

(2)批量修改DOM：

改变隐藏的元素，不会导致重新渲染页面。因此可以先隐藏元素，然后修改元素，最后恢复显示，这样可以减少重排重绘的发生。

el.style.display=’none’;

//修改el

el.style.display=’block’;

使用文档片段，将DOM节点在文档片段中修改，最终再把文档片段加入到DOM中。document.createDocumentFragment();

 

将原始节点拷贝到一个脱离文档节点中，修改之后再替换原节点。

var old =document.getDocumentById();

var newnode =old.cloneNode(true);

//修改newnode 

old.parentNode.replaceNode(newnode ,old);

 

参考资料:High Performance JavaScript (Build Faster Web Application Interfaces)   Nicholas C. Zakas

转载于:https://www.cnblogs.com/nanpingwanzhong/archive/2013/03/03/2941410.html