js代码优化（如何优化javascript性能优化）

本文目录

• 如何优化javascript性能优化
• 如何优化js代码
• 站内优化代码怎么优化
• js里怎么用循环优化代码
• JS代码为什么越优化越慢
• 如何通过优化JS代码来适合网站优化
• 代码优化是如何实现的
• javascript优化有哪些

如何优化javascript性能优化

前言

一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。

鉴于想让自己有一个提升，进不了一个更加广阔的天地，总得找一个属于自己的居所好好生存，所以平时会有意无意的去积累一些使用jQuerry的常用知识，特别是对于性能要求这一块，总是会想是不是有更好的方式来实现。

下面是我总结的一些小技巧，仅供参考。(我先会说一个总标题，然后用一小段话来说明这个意思 再最后用一个demo来简单言明)

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

function search() {
//当我要使用当前页面地址和主机域名
alert(window.location.href + window.location.host);
}
//最好的方式是如下这样 先用一个简单变量保存起来
function search() {
var location = window.location;
alert(location.href + location.host);
}

定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器

var timeoutTimes = 0;
function timeout() {
timeoutTimes++;
if (timeoutTimes 《 10) {
setTimeout(timeout, 10);
}
}
timeout();
//可以替换为：
var intervalTimes = 0;
function interval() {
intervalTimes++;
if (intervalTimes 》= 10) {
clearInterval(interv);
}
}
var interv = setInterval(interval, 10);

字符串连接

如果要连接多个字符串，应该少使用+=，如

s+=a;

s+=b;

s+=c;

应该写成s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来

var buf = ;
for (var i = 0; i 《 100; i++) {
buf.push(i.toString());
}
var all = buf.join(““);

避免with语句

和函数类似 ，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句。

with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
//可以替换为：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

数字转换成字符串

般最好用”“ + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

(“” +) 》 String() 》 .toString() 》 new String()

浮点数转换成整型

很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()

各种类型转换

var myVar = “3.14159“,
str = ““ + myVar, // to string
i_int = ~ ~myVar, // to integer
f_float = 1 * myVar, // to float
b_bool = !!myVar, /* to boolean - any string with length
and any number except 0 are true */
array = [myVar]; // to array

如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

多个类型声明

在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间，就如上面代码一样，上面代码格式也挺规范，让人一看就明了。

插入迭代器

如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

使用直接量

var aTest = new Array(); //替换为
var aTest = ;
var aTest = new Object; //替换为
var aTest = {};
var reg = new RegExp(); //替换为
var reg = /../;
//如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
var oFruit = new O;
oFruit.color = “red“;
oFruit.name = “apple“;
//前面的代码可用对象字面量来改写成这样：
var oFruit = { color: “red“, name: “apple“ };

使用DocumentFragment优化多次append

一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。

for (var i = 0; i 《 1000; i++) {
var el = document.createElement(’p’);
el.innerHTML = i;
document.body.appendChild(el);
}
//可以替换为：
var frag = document.createDocumentFragment();
for (var i = 0; i 《 1000; i++) {
var el = document.createElement(’p’);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

使用一次innerHTML赋值代替构建dom元素

对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

var frag = document.createDocumentFragment();
for (var i = 0; i 《 1000; i++) {
var el = document.createElement(’p’);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替换为：
var html = ;
for (var i = 0; i 《 1000; i++) {
html.push(’《p》’ + i + ’《/p》’);
}
document.body.innerHTML = html.join(’’);

通过模板元素clone，替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找
一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写
HTML来创建节点，其实这样做，1无法保证代码的有效性2字符串操作效率低，所以应该是用document.createElement()方法，而如
果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用
cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点

var frag = document.createDocumentFragment();
for (var i = 0; i 《 1000; i++) {
var el = document.createElement(’p’);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
//替换为：
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName(’p’);
for (var i = 0; i 《 1000; i++) {
var el = pEl.cloneNode(false);
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);

使用firstChild和nextSibling代替childNodes遍历dom元素

var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i 《 l; i++) {
var node = nodes[i];
//……
}
//可以替换为：
var node = element.firstChild;
while (node) {
//……
node = node.nextSibling;

如何优化js代码

一、 让代码简洁：一些简略的表达方式也会产生很好的优化
eg：x=x+1;在不影响功能的情况下可以简写为x++;
二、 变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）
eg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。
三、 关于JS的循环，循环是一种常用的流程控制。
JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。
四、 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。
因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。
五、 尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。
六、 尽量少使用eval。
每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。
七、 减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
八、 字符串连接。
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c；
而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下
var buf = new Array();for(var i = 0; i 《 100; i++){ buf.push(i.toString());}var all = buf.join(““);
九、 类型转换
1. 把数字转换成字符串，应用““ + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：(““ +) 》 String() 》 .toString() 》 new String()
尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。
2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。
3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
十、 尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。
因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。
十一、 当需要使用数组时，也尽量使用JSON格式的语法，
使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
十二、 对字符串进行循环操作，例如替换、查找，就使用正则表达式。
因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
十三、 插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
十四、 对象查询
使用[“”]查询要比.items()更快
十五、 定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。
十六、 尽量减少DOM调用
在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少DOM操作。

站内优化代码怎么优化

1、首页优化的重点是提高对用户的友好度，减小文件大小，提高链接的曝光率。导航、栏目等链接中存在多余的title，老渔哥建议去掉。

2、页面js即javascript代码优化。建议：将这些代码放入专门的js文件夹中，在前台即html文件中使用 《script language=“javascript“ src=“js/文件名.js“》《/script》 方式调用。

3、页面排列使用了大量冗余代码，而没有使用div使用纯表格建设网站，使用dw设计器或其他工具制作网站，即不是人工手写代码。内容页，核心内容不突出

js里怎么用循环优化代码

方法一：把不重要的JS放在页面最底部
这是最简单，也是效果最好的优化方法，把不重要的JS通通放到页面的最下面body的上面，实现异步加载，也就是等网页都加载完了，最后在加载这些不重要的JS，这样就不影响网页速度了。
方法一：把不重要的JS放在页面最底部
这是最简单，也是效果最好的优化方法，把不重要的JS通通放到页面的最下面body的上面，实现异步加载，也就是等网页都加载完了，最后在加载这些不重要的JS，这样就不影响网页速度了。
方法三：给JS文件减肥
将js代码压缩成一行。

JS代码为什么越优化越慢

上面2段代码理论上你console的执行时间应该是一样的，并没有做任何优化，setTimeout只是把代码加入到js解释器的一个任务队列里去，其实到代码执行到console.timeEnd(“1“); setTimeOut的代码并没有真正执行，因此上面代码不存在优化

如何通过优化JS代码来适合网站优化

一、 让代码简洁：一些简略的表达方式也会产生很好的优化
eg：x=x+1;在不影响功能的情况下可以简写为x++;
二、 变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）
eg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。
三、 关于JS的循环，循环是一种常用的流程控制。
JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。
四、 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。
因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。
五、 尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。
六、 尽量少使用eval。
每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。
七、 减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
八、 字符串连接。
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c；
而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下
var buf = new Array();for(var i = 0; i 《 100; i++){ buf.push(i.toString());}var all = buf.join(““);
九、 类型转换
1. 把数字转换成字符串，应用““ + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：(““ +) 》 String() 》 .toString() 》 new String()
尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。
2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。
3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
十、 尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。
因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。
十一、 当需要使用数组时，也尽量使用JSON格式的语法，
使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
十二、 对字符串进行循环操作，例如替换、查找，就使用正则表达式。
因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
十三、 插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
十四、 对象查询
使用[“”]查询要比.items()更快
十五、 定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。
十六、 尽量减少DOM调用
在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少DOM操作。

代码优化是如何实现的

代码优化就是对网页中的html源代码进行必要的调整，以提高页面的有好行，页面经过优化后，一方面可以有效的精简页面中的冗余代码，加快页面的显示速度，同时降低页面占用搜索引擎服务器的存储空间，从而提高页面的用户体验及搜素引擎友好型;另一方面可以突出页面主题，提高页面的相关性。
主要步骤:精简代码;头部优化，权重标签使用及图片优化。在这四个环节中，精简代码是最基础、最根本。
1.精简代码是指清除或者简化页面中的代码，从而达到降低页面体积、提高页面的用户体验及搜索引擎优化性的目的。
精简代码又分五个小步骤:1.清理垃圾代码;2.html标签转换;3.CSS优化;4js优化以及表格优化。
1.1
垃圾代码是指那些在删除的情况下也不会影响页面正常显示的非必要代码。不要小看这些代码，他占据了很大的空间，不仅影响性能还影响搜索引擎的计算时间，所以代码最好是手写，如果用frontpage，Word，Dreamweaver，等工具写的话，产生的垃圾代码会非常多，所以手动清理掉。
1.2
html标签转换，主要是指使用短标签替换在网页中实现同样效果的长标签。例如与，两周都是对字体加粗，但是比多出五个字符，如果页面很多的话，就会产生很多冗余代码。
1.3
css优化。css优化主要是改变css的调用方式，以及避免使用css为重要内容定义样式。
使用div+css方式制作页面，一方面防止垃圾代码，另一方面可以减少重复代码。这种方式对搜索引擎非常友好。
1.4
js优化。js对搜素引擎极不友好。目前搜索引擎不能解析javascript生成的页面或者内容。所以重要的内容不能用js脚本生成;
1.5表格优化，传统的页面基本都是用table。但是这种方式对搜索引擎非常不友好，所以不建议用table
实战:我的网站gsm
alarm
system所有的页面都是手写，几乎没有任何的冗余代码，就是标签的转换，尽量避免了长便签。
还有就是css优化，所有的样式我放在外部页面，只需在头部添加引用即可，这样大大减少了页面的体积。
还有就是我采用了div+css的方式写了每个页面。
还有js优化，所有的重要内容都没有使用js，用js只是显示一些特效，但是js的代码也是写在外部页面，而要在页面的底部添加引用，千万不要再头部，如果在头部也会影响页面的性能的
而我的网站gsm
alarm
system所有的页面都遵守了上面所述规则。以上小弟如果有错的地方，各位大哥，可以给予指点，小弟不胜感激。好了今天就到此了，下节继续。

javascript优化有哪些

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器

字符串连接

如果要连接多个字符串，应该少使用+=，如

s+=a;

s+=b;

s+=c;

应该写成s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来

避免with语句

和函数类似 ，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句。

数字转换成字符串

般最好用”“ + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

(“” +) 》 String() 》 .toString() 》 new String()

浮点数转换成整型

很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()

各种类型转换

var myVar = “3.14159“,
       str = ““ + myVar, //  to string  
       i_int = ~ ~myVar,  //  to integer  
       f_float = 1 * myVar,  //  to float  
       b_bool = !!myVar,  /*  to boolean - any string with length
                               and any number except 0 are true */
       array = [myVar];  //  to array

如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

多个类型声明

在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间，就如上面代码一样，上面代码格式也挺规范，让人一看就明了。

插入迭代器

如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

使用直接量

var aTest = new Array(); //替换为
       var aTest = ;
       var aTest = new Object; //替换为
       var aTest = {};
       var reg = new RegExp(); //替换为
       var reg = /../;
       //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
       var oFruit = new O;
       oFruit.color = “red“;
       oFruit.name = “apple“;
       //前面的代码可用对象字面量来改写成这样：
       var oFruit = { color: “red“, name: “apple“ };

使用DocumentFragment优化多次append

一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。

for (var i = 0; i 《 1000; i++) {
           var el = document.createElement(’p’);
           el.innerHTML = i;
           document.body.appendChild(el);
       }
       //可以替换为：
       var frag = document.createDocumentFragment();
       for (var i = 0; i 《 1000; i++) {
           var el = document.createElement(’p’);
           el.innerHTML = i;
           frag.appendChild(el);
       }
       document.body.appendChild(frag);

使用一次innerHTML赋值代替构建dom元素

对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

       var frag = document.createDocumentFragment();
       for (var i = 0; i 《 1000; i++) {
           var el = document.createElement(’p’);
           el.innerHTML = i;
           frag.appendChild(el);
       }
       document.body.appendChild(frag);
       //可以替换为：
       var html = ;
       for (var i = 0; i 《 1000; i++) {
           html.push(’《p》’ + i + ’《/p》’);
       }
       document.body.innerHTML = html.join(’’);

通过模板元素clone，替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写HTML来创建节点，其实这样做，1无法保证代码的有效性2字符串操作效率低，所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点

       var frag = document.createDocumentFragment();
       for (var i = 0; i 《 1000; i++) {
           var el = document.createElement(’p’);
           el.innerHTML = i;
           frag.appendChild(el);
       }
       document.body.appendChild(frag);
       //替换为：
       var frag = document.createDocumentFragment();
       var pEl = document.getElementsByTagName(’p’);
       for (var i = 0; i 《 1000; i++) {
           var el = pEl.cloneNode(false);
           el.innerHTML = i;
           frag.appendChild(el);
       }
       document.body.appendChild(frag);

使用firstChild和nextSibling代替childNodes遍历dom元素

       var nodes = element.childNodes;
       for (var i = 0, l = nodes.length; i 《 l; i++) {
           var node = nodes[i];
           //……
       }
       //可以替换为：
       var node = element.firstChild;
       while (node) {
           //……
           node = node.nextSibling;

删除DOM节点

删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存。另外，在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点

使用事件代理

任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理，使用这个知识就可以将事件处理程序附加到更高的地方负责多个目标的事件处理，同样，对于内容动态增加并且子节点都需要相同的事件处理函数的情况，可以把事件注册提到父节点上，这样就不需要为每个子节点注册事件监听了。另外，现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听

重复使用的调用结果，事先保存到局部变量

       //避免多次取值的调用开销
       var h1 = element1.clientHeight + num1;
       var h2 = element1.clientHeight + num2;
       //可以替换为：
       var eleHeight = element1.clientHeight;
       var h1 = eleHeight + num1;
       var h2 = eleHeight + num2;

注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能

       var images = document.getElementsByTagName(’img’);
       for (var i = 0, len = images.length; i 《 len; i++) {

       }

编写JavaScript的时候一定要知道何时返回NodeList对象，这样可以最小化对它们的访问

进行了对getElementsByTagName()的调用

获取了元素的childNodes属性

获取了元素的attributes属性

访问了特殊的集合，如document.forms、document.images等等

要了解了当使用NodeList对象时，合理使用会极大的提升代码执行速度