高性能javascript--编程实践
#### - setTimeout()和settimeInterval()传递函数而不是字符串作为参数
引申：
用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别？
精确度问题？
微任务和宏任务问题？
macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick，类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。
同步>异步
主任务>微任务>宏任务
```
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
```
结果：script start, script end, promise1, promise2, setTimeout
```
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
```
结果：同步任务1，7，微任务nextTick和promise.then()6,8,宏任务setTimeout，里面作为一个新的内容2，4，3，5，9，11，10，12
#### - 尽量使用直接量创建对象和数组
```
// 使用直接量
var obj = {
name: 'zzz',
age: 24,
};
var arr = ["nicholas", 50, true];
// 不使用直接量
var obj = new Object();
obj.name = 'zzz';
obj.age = 24;
var arr = new Array();
arr[0] = "nicholas";
arr[1] = 50;
arr[2] = true;
```
#### - 避免做重复的工作，当需要检测浏览器的时候，可使用延迟加载或条件预加载
最常见的重复工作就是浏览器探测，基于浏览器的功能作分支判断导致产生大量代码。
一个页面假如有多次调用 addHandler 函数添加事件，那么每次浏览器都会做判断，来执行哪一个方法。事实上每次的判断结果都是一样的。有几种方法可以避免。
```
function addHandler(target, eventType, handler) {
if (target.addEventListener) { // DOM2 Events
target.addEventListener(eventType, handler, false);
} else { // IE
target.attachEvent('on' + eventType, handler);
}
}
addHandler(document, 'click', function() {
console.log('hello world');
});
```
方法一：延迟加载
延迟加载，也称惰性加载，惰性载入等。延迟加载意味着在信息被使用前不会做任何操作：
```
function addHandler(target, eventType, handler) {
if (target.addEventListener) { // DOM2 Events
addHandler = function(target, eventType, handler) {
target.addEventListener(eventType, handler, false);
};
} else { // IE
addHandler = function(target, eventType, handler) {
target.attachEvent('on' + eventType, handler);
};
}
addHandler(target, eventType, handler);
}
addHandler(document, 'click', function() {
console.log('hello world');
});
addHandler(window, 'keydown', function() {
console.log('key down');
});
//方法在第一个调用的时候，会做一次判断决定使用哪种方法去绑定时间处理器，然后原始addHandler会被新的addHandler函数覆盖，最后一步调用新的函数，并传入原始参数。随后每次调用addHandler()都不会再做检测，因为检测代码已经被新的函数覆盖。
//第一次总会消耗较长的时间，因为需先检测再调用完成任务。之后会变快。
```
方法二：条件预加载
条件预加载会在脚本加载期间提前检测，而不会等到函数被调用：
```
var addHandler = document.addEventListener ?
function(target, eventType, handler) {
target.addEventListener(eventType, handler, false);
}:
function(target, eventType, handler) {
target.attachEvent('on' + eventType, handler);
};
addHandler(document, 'click', function() {
console.log('hello world');
});
//这个例子就是先检查 addEventListener()是否存在，然后根据结果指定函数。
//条件预加载确保所有函数调用消耗的时间相同，代价是需要在脚本加载时就检测。适用于一个函数马上就要被用到，并且在整个页面的生命周期中频繁出现的场景。
```
#### - 在做数学计数时，考虑使用直接操作数字的二进制形式的位运算
i&1可以判断奇偶，奇时返回true，偶时返回false
#### - js的原始方法比你写的任何代码都快，尽量使用原生方法。
特别是数学运算。内置Math对象的方法。dom运算，querySelector()和querySelectorAll()
Math 对象用于执行数学任务。
使用 Math 的属性和方法的语法：
```
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
```
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
https://www.w3school.com.cn/jsref/jsref_obj_math.asp
网友评论