正巧看到在送书，于是乎找了找本身博客上记录过的一些东西来及其无耻的蹭书了~~~
小广告：更多内容可以看我的博客
优化轮回
假如如今有个一个data[]数组，须要对其举行遍历，应该怎么做？最简朴的代码是：
for (var i = 0; i < data.length; i++) {
//do someting
}
这里每次轮回最先前都须要推断i是不是小于data.length，JavaScript并不会对data.length举行缓存，而是每次比较都邑举行一次取值。如我们所知，JavaScript数组实际上是一个对象，内里有个length属性，所以这里实际上就是获得对象的属性。假如直接运用变量的话就会少一次索引对象，假如数组的元素许多，效力提拔照样很可观的。所以我们一般将代码改成以下所示：
for(var i = 0, m = data.length; i < m; i++) {
//do someting
}
这里多加了一个变量m用于寄存data.length属性，如许就可以在每次轮回时，削减一次索引对象，然则价值是增添了一个变量的空间，假如遍历不要求递次，我们以至可以不必m这个变量存储长度，在不要求递次的时刻可以运用以下代码：
for(var i = data.length; i--; ) {
//do someting
}
固然我们可以运用while来替换：
var i = data.length;
while(i--) {
//do someting
}
如许便可只运用一个变量了
运算效果缓存
由于JavaScript中的函数也是对象（JavaScript中一切都是对象），所以我们可以给函数增添恣意的属性。这也就为我们供应相符备忘录情势的缓存运算效果的功用，比方我们有一个须要大批运算才得出效果的函数以下：
function calculator(params) {
//大批的耗时的盘算
return result;
}
假如个中不触及随机，参数一样时所返回的效果一致，我们就可以将运算效果举行缓存从而防止反复的盘算：
function calculator(params) {
var cacheKey = JSON.stringify(params);
var cache = calculator.cache = calculator.cache || {};
if(typeof cache[cacheKey] !== 'undefined') {
return cache[cacheKey];
}
//大批耗时的盘算
cache[cacheKey] = result;
return result;
}
这里将参数转化为JSON字符串作为key，假如这个参数已被盘算过，那末就直接返回，不然举行盘算。盘算终了后再增到场cache中，假如须要，可以直接检察cache的内容：calculator.cache
这是一种典范的空间换时候的体式格局，由于浏览器的页面存活时候寻常不会很长，占用的内存会很快被开释（固然也有破例，比方一些WEB运用），所以可以经由历程这类空间换时候的体式格局来削减相应时候，提拔用户体验。这类体式格局并不适用于以下场所：
1. 雷同参数可以发生差别效果的状况（包括随机数之类的）
2. 运算效果占用迥殊多内存的状况
不要在轮回中建立函数
这个很好明白，每建立一个函数对象是须要大批量空间的。所以在一个轮回中建立函数是很不明智的，只管将函数移动到轮回之前建立，比方以下代码：
for(var i = 0, m = data.length; i < m; i++) {
handlerData(data[i], function(data){
//do something
});
}
就可以修改成：
var handler = function(data){
//do something
};
for(var i = 0, m = data.length; i < m; i++) {
handlerData(data[i], handler);
}
让渣滓接纳器接纳那些不再须要的对象
之前我曾在 浅谈V8引擎中的渣滓接纳机制 中讲到了V8引擎怎样举行渣滓接纳。可以从中看到，假如长时候保留对象，须生代中占用的空间将增大，每次在须生代中的渣滓接纳历程将会相称冗长。而渣滓接纳器推断一个对象为活对象照样死对象，是依据是不是有活对象或根对象含有对它的援用来剖断的。假如有根对象或许活对象援用了这个对象，它将被剖断为活对象。所以我们须要经由历程手动消弭这些援用来让渣滓接纳器对接纳这些对象。
delete
一种体式格局是经由历程delete体式格局来消弭对象中的键值对，从而消弭援用。但这类体式格局并不首倡，它会转变对象的组织，可以致使引擎中对对象的存储体式格局变动，降级为字典体式格局举行存储（细致请见V8 之旅：对象示意），不利于JavaScript引擎的优化，所以只管削减运用
null
另一种体式格局是经由历程将值设为null来消弭援用。经由历程将变量或对象的属性设为null，可以消弭援用，使底本援用的对象成为一个“孤岛”，然后在渣滓接纳的时刻对其举行接纳。这类体式格局不会转变对象的组织，比运用delete要好
全局对象
别的须要注重的是，渣滓接纳器以为根对象永远是活对象，永远不会对其举行渣滓接纳。而全局对象就是根对象，所以全局作用域中的变量将会一向存在
事宜处理器的接纳
在寻常写代码的时刻，我们常常会给一个DOM节点绑定事宜处理器，但有时刻我们不须要这些事宜处理器后，就不管它们了，它们默默的在内存中保留着。所以在某些DOM节点绑定的事宜处理器不须要后，我们应该烧毁它们。同时绑定的时刻也只管运用事宜代办的体式格局举行绑定，以避免形成屡次反复的绑定致使内存空间的糟蹋，事宜代办可见前端机能优化（DOM操纵篇）
闭包致使的内存泄漏
JavaScript的闭包可以说等于“天使”又是“魔鬼”，它“天使”的一面是我们可以经由历程它打破作用域的限定，而其魔鬼的一面就是和轻易致使内存泄漏，比方以下状况：
var result = (function() {
var small = {};
var big = new Array(10000000);
//do something
return function(){
if(big.indexOf("someValue") !== -1) {
return null;
} else {
return small;
}
}
})();
这里，建立了一个闭包。使得返回的函数存储在result中，而result函数可以接见其作用域内的small对象和big对象。由于big对象和small对象都可以被接见，所以渣滓接纳器不会去碰这两个对象，它们不会被接纳。我们将上述代码改成以下情势：
var result = (function() {
var small = {};
var big = new Array(10000000);
var hasSomeValue;
//do something
hasSomeValue = big.indexOf("someValue") !== -1;
return function(){
if(hasSomeValue) {
return null;
} else {
return small;
}
}
})();
如许，函数内部只可以接见到hasSomeValue变量和small变量了，big没有办法经由历程任何情势被接见到，渣滓接纳器将会对其举行接纳，勤俭了大批的内存。
慎用eval和with
Douglas Crockford将eval比作魔鬼，确着实许多方面我们可以找到更好地替换体式格局。运用它时须要在运转时挪用诠释引擎对eval()函数内部的字符串举行诠释运转，这须要斲丧大批的时候。像Function、setInterval、setTimeout也是相似的
Douglas Crockford也不发起运用with，with会下降机能，经由历程with包裹的代码块，作用域链将会分外增添一层，下降索引效力
对象的优化
缓存须要被运用的对象
JavaScript猎取数据的机能有以下递次（从快到慢）：变量猎取 > 数组下标猎取（对象的整数索引猎取） > 对象属性猎取（对象非整数索引猎取）。我们可以经由历程最快的体式格局替代最慢的体式格局：
var body = document.body;
var maxLength = someArray.length;
//...
须要斟酌，作用域链和原型链中的对象索引。假如作用域链和原型链较长，也须要对所须要的变量继承缓存，不然沿着作用域链和原型链向上查找时也会分外斲丧时候
缓存正则表达式对象
须要注重，正则表达式对象的建立异常斲丧时候，只管不要在轮回中建立正则表达式，只管多的对正则表达式对象举行复用
斟酌对象和数组
在JavaScript中我们可以运用两种寄存数据：对象和数组。由于JavaScript数组可以寄存恣意范例数据如许的灵活性，致使我们常常须要斟酌什么时候运用数组，什么时候运用对象。我们应该在以下状况下做出斟酌：
1. 存储一串雷同范例的对象，应该运用数组
2. 存储一堆键值对，值的范例多样，应该运用对象
3. 一切值都是经由历程整数索引，应该运用数组
数组运用时的优化
- 往数组中插进去夹杂范例很轻易下降数组运用的效力，只管坚持数组中元素的范例一致
- 假如运用希罕数组，它的元素接见将远慢于满数组的元素接见。由于V8为了勤俭空间，会将希罕数组经由历程字典体式格局保留在内存中，勤俭了空间，但增添了接见时候
对象的拷贝
须要注重的是，JavaScript遍历对象和数组时，运用for...in的效力相称低，所以在拷贝对象时，假如已知须要被拷贝的对象的属性，经由历程直接赋值的体式格局比运用for...in体式格局要来得快，我们可以经由历程定一个拷贝组织函数来完成，比方以下代码：
function copy(source){
var result = {};
var item;
for(item in source) {
result[item] = source[item];
}
return result;
}
var backup = copy(source);
可修改成：
function copy(source){
this.property1 = source.property1;
this.property2 = source.property2;
this.property3 = source.property3;
//...
}
var backup = new copy(source);
字面量替代组织函数
JavaScript可以经由历程字面量来组织对象，比方经由历程[]组织一个数组，{}组织一个对象，/regexp/组织一个正则表达式，我们应该全力运用字面量来组织对象，由于字面量是引擎直接诠释实行的，而假如运用组织函数的话，须要挪用一个内部组织器，所以字面量稍微要快一点点。
缓存AJAX
曾听过一个接见时候比较（固然不准确）：
* cpu cache ≈ 100 * 寄存器
* 内存 ≈ 100 * cpu cache
* 外存 ≈ 100 * 内存
* 收集 ≈ 100 * 外存
可看到接见收集资源是相称慢的，而AJAX就是JavaScript接见收集资源的体式格局，所以对一些AJAX效果举行缓存，可以大大削减相应时候。那末怎样缓存AJAX效果呢
函数缓存
我们可以运用前面缓存庞杂盘算函数效果的体式格局举行缓存，经由历程在函数对象上组织cache对象，道理一样，这里略过。这类体式格局是准确到函数，而不准确到要求
当地缓存
HTML5供应了当地缓存sessionStorage和localStorage，区分就是前者在浏览器封闭后会自动开释，而后者则是永远的，不会被开释。它供应的缓存大小以MB为单元，比cookie（4KB）要大很多，所以我们可以依据AJAX数据的存活时候来推断是寄存在sessionStorage照样localStorage当中，在这里以存储到sessionStorage中为例(localStorage只需把第一行的window.sessionStorage修改成window.localStorage)：
function(data, url, type, callback){
var storage = window.sessionStorage;
var key = JSON.stringify({
url : url,
type : type,
data : data
});
var result = storage.getItem(key);
var xhr;
if (result) {
callback.call(null, result);
} else {
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
storage.setItem(key, xhr.responseText);
callback.call(null, xhr.responseText);
} else {
}
}
};
xhr.open(type, url, async);
xhr.send(data);
}
};
运用布尔表达式的短路
在许多语言中，假如bool表达式的值已能经由历程前面的前提肯定，那末背面的推断前提将不再见实行，比方以下代码
function calCondition(params) {
var result;
//do lots of work
return !!result;
}
if(otherCondition && calCondition(someParams)) {
console.log(true);
} else {
console.log(false);
}
这里起首会盘算otherCondition的值，假如它为false，那末全部正则表达式就为false了，后续的须要斲丧大批时候的calCondition()函数就不会被挪用和盘算了，勤俭了时候
运用原生要领
在JavaScript中，大多数原生要领是运用C++编写的，比js写的要领要快很多，所以只管运用诸如Math之类的原生对象和要领
字符串拼接
在IE和FF下，运用直接+=的体式格局或是+的体式格局举行字符串拼接，将会很慢。我们可以经由历程Array的join()要领举行字符串拼接。不过并非一切浏览器都是如许，如今许多浏览器运用+=比join()要领还要快
运用web worker
web worker是HTML5提出的一项新手艺，经由历程多线程的体式格局为JavaScript供应并行盘算的才能，经由历程message的体式格局举行相互之间的信息通报，我还没有细致研讨过
JavaScript文件的优化
运用CDN
在编写JavaScript代码中，我们常常会运用库（jQuery等等），这些JS库一般不会对其举行变动，我们可以将这些库文件放在CDN（内容分发收集上），如许能大大削减相应时候
紧缩与兼并JavaScript文件
在收集中传输JS文件，文件越长，须要的时候越多。所以在上线前，一般都邑对JS文件举行紧缩，去掉个中的解释、回车、不必要的空格等过剩内容，假如经由历程uglify的算法，还可以缩减变量名和函数名，从而将JS代码紧缩，勤俭传输时的带宽。别的常常也会将JavaScript代码兼并，使一切代码在一个文件当中，如许就可以削减HTTP的要求次数。兼并的道理和sprite手艺雷同
运用Application Cache缓存
这个在之前的文章前端机能优化（Application Cache篇）中已有形貌，就不赘述了
