Supplementary article on front-end performance optimization

 function getCategory(age) {
    var category = "";
    switch (true) {
        case isNaN(age):
            category = "not an age";
            break;
        case (age >= 50):
            category = "Old";
            break;
        case (age <= 20):
            category = "Baby";
            break;
        default:
            category = "Young";
            break;
    };
    return category;
}
getCategory(5); //Baby

 var str = "<div>This is a test string</div>";
/**Low efficiency**/
var obj = document.getElementsByTagName("body");
for(var i = 0; i < 100; i++){
    obj.innerHTML += str + i;
}
/**High efficiency**/
var obj = document.getElementsByTagName("body");
var arr = [];
for(var i = 0; i < 100; i++){
    arr[i] = str + i;
}
obj.innerHTML = arr.join("");

 /**Not recommended**/
var i = 1;
var j = "hello";
var arr = [1,2,3];
var now = new Date();
/**promote**/
var i = 1,
    j = "hello",
    arr = [1,2,3],
    now = new Date();

 /**Not recommended**/
var name = values[i];
i++;
/**promote**/
var name = values[i++];

 /**Not recommended**/
var a = new Array();
a[0] = 1;
a[1] = "hello";
a[2] = 45;
var o = new Object();
o.name = "bill";
o.age = 13;
/**promote**/
var a = [1, "hello", 45];
var o = {
    name : "bill",
    age: 13
};

 String() is an internal function, so it is very fast.
.toString() needs to query the function in the prototype, so it is slightly slower.
new String() is the slowest.

 /**Low efficiency**/   
var divs = document.getElementsByTagName("div");    
for(var i = 0; i < divs.length; i++){   
    ...  
}    
/**High efficiency, suitable for obtaining DOM collections. If it is a pure array, there is little difference between the two cases**/  
var divs = document.getElementsByTagName("div");   
for(var i = 0, len = divs.length; i < len; i++){   
    ... 
}

 try {
  for ( var i = 0; i < 200; i++) {}
} catch (e){}

 The function call with statement creates its own scope, thus increasing the length of the scope in which the code is executed.
Global scope.

 var foo = function() {
  var local = {};
};
foo();
console.log(local); //=> undefined

var bar = function() {
  local = {};
};
bar();
console.log(local); //=> {}

/**Here we define the foo() function and the bar() function, both of which are intended to define a variable called local. In the foo() function, we use the var statement to declare a local variable, and because a scope is formed inside the function body, this variable is defined in that scope. Moreover, no scope extension is performed in the body of the foo() function, so after the function is executed, the local variable is also destroyed. The variable cannot be accessed in the outer scope. In the bar() function, local variables are not declared using the var statement. Instead, local is directly defined as a global variable. Therefore, the outer scope can access this variable. **/

local = {};
// The definition here is equivalent to global.local = {};

 function foo() {
  var val = 'hello';
  function bar() {
    function baz() {
      global.val = 'world;'
    };
    baz();
    console.log(val); //=> hello
  };
  bar();
};
foo();

/**In `JAVASCRIPT`, variable identifiers are searched from the current scope outward until the global scope. Therefore, access to variables in `JAVASCRIPT` code can only be done outward, not reversely. The execution of the baz() function defines a global variable val in the global scope. In the bar() function, when the identifier val is accessed, the search principle is from the inside to the outside: if it is not found in the scope of the bar function, it is searched in the upper layer, that is, in the scope of the foo() function. However, the key to everyone's confusion is here: this identifier access finds a matching variable in the scope of the foo() function and does not continue to search outside, so the global variable val defined in the baz() function has no effect on this variable access. **/

 /**Low efficiency**/
for(var i = 0; i < 10000; i++){
    var but1 = document.getElementById("but1");
}
/**High efficiency**/
/**Avoid global lookup**/
var doc = document;
for(var i = 0; i < 10000; i++){
    var but1 = doc.getElementById("but1");
}
/**In the above code, the second case is to save the variable of the global object in the function first, and then directly access the variable, while the first case is to traverse the scope chain every time until the global environment. We can see that the second case is actually only traversed once, while the first case is traversed every time, and this difference will be very obvious in the case of multi-level scope chains and multiple global variables. The number of lookups in the scope chain is O(n). By creating a local variable that points to `document`, we can improve the performance of this function by limiting the lookup to a global one. **/

 function foo() {
  var local = 'Hello';
  return function() {
    return local;
  };
}
var bar = foo();
console.log(bar()); //=> Hello

/**The technique shown here to allow the outer scope to access the inner scope is called closure. Thanks to the application of higher-order functions, the scope of the foo() function is `extended`. The foo() function returns an anonymous function, which exists in the scope of the foo() function, so it can access the local variables in the scope of the foo() function and save their references. Because this function directly returns the local variable, the bar() function can be directly executed in the outer scope to obtain the local variable. **/

 Loop binding events, we assume a scenario: there are six buttons, corresponding to six events. When the user clicks the button, the corresponding event is output in the specified place.

var btns = document.querySelectorAll('.btn'); // 6 elements
var output = document.querySelector('#output');
var events = [1, 2, 3, 4, 5, 6];
// Case 1
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function(evt) {
    output.innerText += 'Clicked ' + events[i];
  };
}
/**The first solution here is obviously a typical loop binding event error. I won’t go into details here. For details, please refer to my answer to a netizen. The difference between the second and third solutions lies in the parameters passed in by the closure. **/
// Case 2
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(index) {
    return function(evt) {
      output.innerText += 'Clicked ' + events[index];
    };
  })(i);
}
/**The second solution passes in the current loop index as a parameter, while the latter directly passes in the corresponding event object. In fact, the latter is more suitable for large-scale data applications. Because in JavaScript's functional programming, the parameters passed in when calling a function are basic type objects, then the formal parameter obtained in the function body will be a copied value, so that this value is defined as a local variable in the scope of the function body. After completing the event binding, the events variable can be manually dereferenced to reduce the memory usage in the outer scope. Moreover, when an element is deleted, the corresponding event listening function, event object, and closure function are also destroyed and recycled. **/
//Case 3
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(event) {
    return function(evt) {
      output.innerText += 'Clicked ' + event;
    };
  })(events[i]);
}

 ;(function() { // Main business code})();

 ;(function(win, doc, $, undefined) {
  // Main business code})(window, document, jQuery);

 /**RequireJS**/
define(['jquery'], function($) {
  // Main business code});
/**SeaJS**/
define('model', ['dep', 'underscore'], function($, _) {
  // Main business code});

 function getData(callBack){
    $.ajax({
        url:"",
        data:{},
        dataType:"json",
        type:"get",
        success:function(data){
            callBack(null,data)
        }
    })

}

 getData(function(error,data){
 console.log(data)
})

 var arr = [1,2,3,4,5];
var arr2 = [];

 arr[arr.length] = 6; // fastest arr.push(6); // 34.66% slower
arr2 = arr.concat([6]); // 85.79% slower

 var arr = [1,2,3,4,5];
arr.unshift(0); 
[0].concat(arr);

 [0].concat(arr); // Faster arr.unshift(0); // 64.70% Slower

 var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');