高性能javascript--编程实践

高性能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