High performance JavaScript — programming practice

Time:2020-6-30

-Settimeout() and settimeinterval() pass functions instead of strings as arguments

Extension:
What is the difference between setinterval() and setinterval() simulated with the settimeout() method?

Accuracy?

Micro task and macro task problem?

Macro task (macro task): including the overall code script, setTimeout, setinterval

Micro task: promise, process.nextTick , similar to node.js The version of “setTimeout” invokes the callback callback function in the next cycle of the event loop.

Synchronous > asynchronous

Main task > micro task > macro task

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');

Results: 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')
    })
})

Results: synchronous tasks 1, 7, nexttick and promise.then () 6,8, macro task setTimeout, which is used as a new content 2,4,3,5,9,11,10,12

-Try to create objects and arrays using direct quantities

//Use direct quantity
var obj = {
  name: 'zzz',
  age: 24,
};
var arr = ["nicholas", 50, true];

//No direct quantity is used
var obj = new Object();
obj.name = 'zzz';
obj.age = 24;

var arr = new Array();
arr[0] = "nicholas";
arr[1] = 50;
arr[2] = true;

-Avoid doing repetitive work. When you need to detect the browser, you can use delayed loading or conditional preloading

The most common repetitive work is browser detection, which generates a lot of code based on the function of browser.

If a page calls the addhandler function several times to add events, the browser will judge which method to execute each time. In fact, the judgment is the same every time. There are several ways to avoid it.

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');
});

Method 1: delay loading

Delay loading, also known as lazy loading, lazy loading and so on. Delayed loading means that nothing is done until the information is used:

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');
});
//When the method is called for the first time, it will make a judgment to decide which method to use to bind the time processor. Then the original addhandler will be covered by the new addhandler function. Finally, the new function is called and the original parameters are passed in. Each subsequent call to addhandler() does not detect again, because the detection code has been covered by the new function.

//The first time always takes a long time because the task needs to be detected and then called to complete. And then it gets faster.

Method 2: conditional preloading

Conditional preloading is detected in advance during script loading without waiting for the function to be called:

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');
});
//This example is to check whether addeventlistener() exists, and then specify the function according to the result.

//Conditional preloading ensures that all function calls take the same amount of time at the expense of having to detect the script as it loads. It is applicable to the scenario that a function is about to be used and appears frequently in the whole page life cycle.

-In doing mathematical counting, consider the use of direct operation of digital binary form of bit operation

-The original method of JS is faster than any code you write. Try to use the native method.

Especially mathematical operations. Methods for built-in math objects. DOM operation, queryselector() and queryselectorall ()

Math objects are used to perform mathematical tasks.

Syntax for using math’s properties and methods:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

Math objects are not object classes like date and string, so there is no constructor, math (), like Math.sin () such a function is only a function, not a method of an object. Instead of creating it, you can call all its properties and methods by using math as an object.
https://www.w3school.com.cn/j…