高性能javascript--编程实践

2019-11-22

- 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()是否存在,然后根据结果指定函数。

//条件预加载确保所有函数调用消耗的时间相同,代价是需要在脚本加载时就检测。适用于一个函数马上就要被用到,并且在整个页面的生命周期中频繁出现的场景。

- 在做数学计数时,考虑使用直接操作数字的二进制形式的位运算

- 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/j...

原文链接:segmentfault.com

上一篇:高性能javascript--算法和流程控制
下一篇:shelltest
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部