[Web Front-end] jQuery Interface Optimization, web Front-end jquery

[Web Front-end] jQuery Interface Optimization, web Front-end jquery

With the development of the Internet, the front-end interface of websites becomes more and more important. It focuses on the direct user experience. There are more and more websites of the same type on the market. A smoother and more elegant interface than other websites of the same type allows users to abandon your competitors. Therefore, it is an important topic to make your website's front-end run faster and the interface better. As a result, the front-end interface optimization technology has become a required skill for excellent front-end developers, which is the core competitiveness.

Today we will introduce some optimization technologies in jQuery's Popular Front-end javascript development framework. These optimization technologies require us to have a deep understanding of JavaScript and the Relationship Between DOM and JavaScript Engines in Web browsers.

Reduce DOM operations

DOM, full name: Document Object Model, Document Object Model, is a standard programming interface recommended by W3C for processing Extensible identity language. DOM can access and modify the content and structure of a document in a way independent of platform and language, that is, it can process XML and HTML documents. DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

Therefore, in JavaScript code, we may often use DOM operations, but this also leads to the need to jump from the JavaScript engine to the DOM, which is very expensive. Therefore, if we need to use DOM in js, we should try to reduce DOM operations as much as possible.

For example:

<! DOCTYPE html> 

After the above Code is run, the result is:
187
170
16

It can be seen that the last DOM operation is much faster than the direct DOM operation. In jQuery, $ (selector) selects elements based on DOM operations.

Detach DOM elements using detach

To improve DOM operations, you can also strip the elements to be operated, and then re-insert the elements into the document after the operation is completed.

The following is an example:

<! DOCTYPE html> 

The result of the preceding example is:
X 1: 670
X3: 13
2: 509

It can be seen that the strip element is indeed faster than the direct use, but when the document is inserted again, the relative position is changed, which can be solved through the CSS style. In addition, we can also see that using document directly is much faster than jQuery's $.

Use for loop whenever possible during a large number of loop operations

For Loop will be more than jQuery's $. each AND Array. forEach is much faster, so when the number of loops is large, we should choose for loop to make the page run faster, you can use the other two to make programming easier.

Cache objects using local variables

Using local variables can shorten the time for searching objects and the number of times jQuery searches based on the selector. You can add $ before the variable name to indicate that this is a jQuery object.

var $this = $(this);var $hello = $("#hello");$hello.button();

Skip the jQuery method when the performance requirement is high.

From the two examples we have written earlier, we can see that using core JavaScript methods and attributes will be faster than jQuery. Therefore, if the website has high performance requirements, you can directly use methods in javaScript or DOM operations.

DRY, do not write repeated code

In jQuery, we can use anonymous functions, which greatly facilitates us, but also makes it easy for us to write repeated code frequently, which is not conducive to maintenance and update. Therefore, we should try our best to integrate code with the same or similar functions.

Example:

// Use the selector to integrate code with the same functions $ ("# hello, # world "). click (function () {alert ("Hello World") ;}); function sayHello () {alert ("Hello World ");} // integrate the duplicate code by registering the same function $ ("hello "). click (sayHello); $ ("world "). click (sayHello );

ID selector and class selector should be used whenever possible

JQuery has a powerful selector mechanism and a variety of selector rules available for use. However, in these Rules, the ID selector and a single class selector are the fastest elements to select. If you can use the ID selector or class selector, try to use the two, they make your pages faster.