Async and defer

Async: Optional property. Indicates that the script should be downloaded immediately, but should not interfere with other actions on the page, such as downloading additional resources or waiting for additional scripts to load. This property is valid only for external script files (js code written in an HTML file, adding this property does not work and is still executed in the order the code is loaded).

Defer: Optional. The identification script can be deferred until the document is fully parsed and displayed. This applies only to external script files.

The difference between script tag properties async and defer: the blue line represents network reads and the red line represents execution time, both of which are specific to the script; The green line represents HTML parsing.

Pseudo elements and pseudo classes

Pseudo-element: is a keyword appended to the end of the selector that allows you to style specific parts of the selected element. For example ::before, :after, ::first-letter, etc. It’s creating an “element” content that doesn’t exist and attaching styles to it.

Pseudo-classes: do not create element content, but simply select existing elements in some state and attach styles. For example :first-child, :active, :focus, etc.

Anti-shake and throttling

Function stabilization: When the event is continuously triggered and no event is triggered again within a certain period of time, the event handler will execute once. If the event is triggered again before the set time, the delay will start again.

function debounce(handle, delay) {
    var timer = null;
    return function () {
        var _self = this,
            _args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            handle.apply(_self, _args)
        }, delay)
    }
}
Copy the code

Function throttling: Ensures that event handlers are called only once in a certain period of time when events are continuously raised.

function throttle(handler, wait) {
    var lastTime = 0;
    return function (e) {
        var nowTime = new Date().getTime();
        if (nowTime - lastTime > wait) {
            handler.apply(this.arguments); lastTime = nowTime; }}}Copy the code

Call, apply, bind

To change the reference to this inside the method, the first argument is the reference to this, and the remaining arguments are a plain argument list.

Call: The first argument is a pointer to this, and the rest of the arguments are a plain argument list.

Apply: The first argument points to this and the rest of the arguments take an array type.

Bind: The first argument is a pointer to this, and the rest of the arguments are a plain argument list. But the return is a function.

Of course, the three parameters are not limited to string type, can be a variety of types, including function, object, etc.!

Cookie, localStorage, sessionStorage

storage Action and characteristics Storage quantity and size
cookie 1. Store user information and connect to the server to obtain data. 2. The data that can be stored is limited and depends on the server, so the data of the server should not be stored in cookies as far as possible, so as not to affect page performance. 3. You can set the expiration time. 1. It is better to keep the cookie within 4095B, and the data beyond it will be ignored. 2, IE6 or lower version to save a maximum of 20 cookies; IE7 and later versions can have a maximum of 50; Firefox up to 50; Chrome and Safari don’t have hard limits.
localStorage 1. Store client information without requesting the server. 2. Data is saved permanently unless the user manually cleans the client cache. 3. The developer can encapsulate a method and set the expiration time. The storage space varies with browsers.
sessionStorage 1. Store client information without requesting the server. 2. The data is saved in the current session. The data on the page refresh will not be cleared, and the data on the end of the session (closing the browser, closing the page, or jumping to the page) becomes invalid. The storage space varies with browsers.

The prototype with __proto__

__proto__ is a property that every object has, while Prototype is a property that functions have.

__proto__ points to the prototype of the current object, while prototype points to the prototype of the object constructed from the current function.

① Whenever a function is created, its prototype object is also created, and the properties and methods in the prototype object are shared by instances created through its corresponding constructor.

② After each function is created, it gets a prototype property that points to the function’s prototype object.

③ The __proto__ attribute of each object points to the prototype of its constructor.

function Fun() {}
var f = new Fun();
console.log(f.__proto__ === Fun.prototype); // true
console.log(f.__proto__.__proto__);
console.log(Fun.__proto__.__proto__);
console.log(Fun.__proto__.__proto__ === f.__proto__.__proto__); // true
console.log(f.prototype);
console.log(Fun.prototype);

function a() {}
console.log(a.prototype);
console.log(a instanceof Function) // true
console.log(a.__proto__ === Function.prototype) // true
Copy the code
  • Welcome to follow my public numberThe front end of the road to disaster
  • Reply keywordse-books, you can get 12 front-end popular e-books.
  • Reply keywordsThe Little Red Book, 4th edition, you can get the latest JavaScript Advanced Programming (4th edition) ebook.
  • I have created a technical exchange and article sharing group, in which there are many front leaders of big factories. After following the public account, click the menu below to learn more and you can add my wechat. I look forward to your joining.