Improve JS execution efficiency

General principle of JS optimization

  • Optimize only when needed
  • Consider maintainability

Improve JS file loading performance

  • Load elements in the order CSS files are placed<head>In, the JS file is placed<body>In the water.

JS variable and function optimization

  • Use id selectors whenever possible
  • Try to avoid eval
  • Keep JS functions as simple as possible
  • Use event throttling functions
  • Using event Delegate
  • The rational use ofrequestAnimationFrameAnimation instead ofsetTimeout.setInterval
    • requestAnimationFrameYou can render at the right time,SetTimeout (the callback)andsetInterval (callback)There is no guarantee thatcallbackThe timing of the callback function execution

Use caching wisely

  • Cache DOM objects properly
  • Cache list length
  • Use cacheable Ajax

Optimize the JS cache

Cookie

  • Typically stored by the browser, cookies are then sent to the same server with each subsequent request. When an HTTP request is received, the server can send a header with a Cookie. Cookies can be set to a valid time.
  • Apply to:
    • Session management: login names, shopping cart items, game scores, or anything else the server should keep track of
    • Personalization: User preferences, themes, or other Settings
    • Tracking: Records and analyzes user behavior, such as burying points

sessionStorage

  • Create a locally stored key/value pair
  • Applied to pages Applied to transfer values between pages

IndexedDB

  • Indexed database
  • Applied to the
    • Clients store large amounts of structured data
    • Use without an Internet connection (e.g., Google Doc, graphite)
    • Will be redundant, rarely modified, but frequently accessed data to avoid fetching data from the server at any time

LocalStorage

  • The local store
  • Applied to the
    • Cache static file content JS/CSS (such as baidu M site home page)
    • Cache infrequently changing API interface data
    • Store geographic location information
    • Browse the specific location on the page

Select the appropriate modular loading scheme

JS modular loading scheme and selection

  • CommonJS

    • Aims to build an ecosystem of modules for JavaScript outside the Web browser
    • The Node.js modular scheme is influenced by CommonJS

  • AMD (Asynchronous Module Definition) specification

    • RequireJS Modular loader: Implemented based on THE AMD API

  • The CMD (Common Module Definition) specification

    • SeaJS modular loader: written following the CMD API

  • ES6 import

Code examples:

/* CommonJS */
// Introduce dependencies
var store = require('store');
// exports
exports = function() {
    return store.get('customers');
}

/* NodeJS module */
// Introduce dependencies
var store = require('store');
function customerStore() {
    return store.get('customers');
}
// exports
modules.exports = customerStore;

/* RequireJS */
// 

/* SeaJS */
/ / way
define(function(require, exports, module) {
    // Module code
});
2 / / way
define('module'['module1'.'module2'].function(require, exports, module){
    // Module code
});

/* ES6 import */
// square.js
export function square(x) {
    return x*x;
}

// main.js
import { square } from 'square';
console.log(square(10)); / / 100
Copy the code