directory

• Introduction to performance testing tools
  • Using the process
• JS code optimization
  • Be careful with global variables
  • Caching global variables
  • Add by prototype
  • Avoid closure traps
  • Avoid attribute access methods
  • For loop optimization
  • Choose the optimal loop method
  • Node addition optimization
  • Clone optimized node operation
  • Replace the new Object directly

Introduction to performance testing tools

Performance tools can help us know how to write code more efficiently, which is essentially collecting large numbers of execution samples for mathematical statistics and analysis.

• Using aBenchmark.jsthejsperf.comDone, so far this site has been502, you can deploy locallynpm i benchmark --save-devThe Chou Chou
• Instead, use jsbench. Me

Use process (because 502 has not been used at present)

• The login
• Fill in detailed test case information (title/ slugIs a short name, will generate a url, so cannot duplicate with others.
• Fill in the preparation code (DOMFrequently used when operating)
• Required Yessetup(Startup operation) andteardown(Destroy after execution) code

JS code optimization

There are many types of code optimization. Let me briefly introduce a few of them. This is also an accumulation process

Be careful with global variables

Why should it be used sparingly?

• Global variables are defined in the global execution context and are at the top of any scope chain. Every time you look for it, you find the top part of it, and it takes time.
• The global execution context remains in the context execution stack until the program exits and memory space is wasted.
• The presence of a variable with the same name in a local scope obscures or contaminates the whole world.

The following is an illustration of the difference between using global variables and not using global variables:

Caching global variables

Caching global variables that cannot be avoided in use locally, as you can see below, improves performance when cached than when not cached.

Add by prototype

Instead of adding methods inside the constructor, try to add methods to the prototype object that the instance object needs.

Avoid closure traps

Closures can access data in a function’s inner scope from an outer scope.

• Closures are a powerful syntax
• Closures are prone to memory leaks when used improperly
• Don’t close for closure’s sake

The example analysis

The following code forms a closure where el is in scope foo, and the anonymous function onclick points to is in a new scope that references the id in scope foo, causing a memory leak.

function foo() {
    var el = document.getElementById('btn')
    el.onclick = function() {
        console.log(el.id)
    }
}

foo()
Copy the code

To prevent memory leaks, set EL to NULL after use

function foo() {
	// The code to the right of the equals sign already exists in the 'DOM' tree. 'el' is a new reference.
    // This element is referenced twice. Even if 'DOM' is removed by 'remove', it will be referenced in code 'el' and can only be removed manually below.
    var el = document.getElementById('btn')
    el.onclick = function() {
        console.log(el.id)
    }
    
    // Add the following if you want to avoid leaks
    el = null
}

foo()
Copy the code

Avoid attribute access methods

Object oriented in JavaScript

• JSNo access methods are required for attributes; all attributes are externally visible
• Attribute access methods only add a layer of redefinition without access control

For loop optimization

Store the length of the array in a variable as well.

Choose the optimal loop method

ForEach, for, for-in comparison

Node addition optimization

The addition of nodes inevitably involves backflow and redraw

Document. Createdocumentfragment () method to create a virtual node object, is a new document fragments, which contains all the attributes and methods. This merges the addition of nodes and reduces DOM redrawing.

Clone optimized node operation

You don’t need to add existing properties and content

Replace the new Object directly

When we define objects and arrays, we can use new or we can use literals.