Front-end engineer performance optimization and skills sharing

Front-end engineer performance optimization and skills sharing

I don't know if you have heard of anything in the industry, 'The performance consumption of code written by people who know performance optimization and have studied jquery source code may be hundreds or even thousands of times different ', currently, javascript is a transitional process from ECMAscript3 to ECMAscript5 and ECMAscript6. When javascript is not compiled properly, the coding method cannot be used, and the problems caused cannot be ignored.

　Performance Optimization

I will share some of my insights on performance optimization with you below;

　　1. Sprite

The most basic thing is to make the background image as a Sprite as much as possible to reduce the image request. Therefore, another basic instinct of web engineers is the creation of the sprite.

2.css selector Optimization

In css, we should try to use the child selector>. If the child selector is used less, the search engine will search all the child element, if we use the child selector, we can narrow down the search range to reduce the performance consumption of the search engine.

　3. js direct operation class name for style change

When operating element styles in js, do not use styles to directly add styles. Generally, when there are few attributes, this will not affect the performance. In fact, when adding styles, the page will be re-painted once, you have to pay attention to re-painting. When operating a style, you can directly operate the class name, which only causes one re-painting. Adding a style directly with the style will cause multiple re-painting.

　4. js operations on dom nodes directly

When operating on a node, try to add the node to the end of the element. If it is inserted to the front of the node, the node after the node is inserted will cause reflux, when inserted to the end, you only need to insert the node back once.

Some may not understand the concept of re-painting and backflow. We recommend a website:

Click here

　5. Regular Expression matching Selector

In css3 and jQuery attribute selectors, some of these selectors use regular expressions for matching and try not to use them. Of course, if you do not consider performance optimization, these methods are quite useful, the regular expression matches the selector to search all tags in the search engine, which greatly affects the performance.

　6. js Element Acquisition Optimization

When getting elements in js, document is normally used. getElementsById: the search engine searches at the bottom of the Dom tree until the document in the window is searched and then returns the search. Therefore, it is best to retrieve the document when obtaining the element. body for storage. When used again, you only need to extract and use this variable to save the search engine performance.

7. memory overflow

Generally, memory overflow occurs during recursive operation, resulting in a significant reduction in the performance during recursive operation. After the operation, the memory will be recycled by the system, therefore, when running recursion, you need to use an object to save the value. During each recursive operation, the value is detected. If there is a recursive operation, the value is directly returned. If there is no recursive operation, the value is added. This can solve the great performance of recursion.

　8. GET requests for Ajax

POST requests are implemented by first sending the HTTP request header and then sending data. GET does not have a request header. However, note that the GET size limit is about 4 kb, and there is no POST limit.

　　9. Delayed image loading

When a page initiates a request, the request volume is too large, so that the image can be loaded lazily. When the page is rolled to the image location, the image is loaded.

We recommend a plug-in for image lazy loading.

Jquery. lazyload. js

Plug-in: http://download.csdn.net/download/lwpxx/5179738

10. Avoid the image src attribute being empty.

The src attribute is very common for images with empty strings. It mainly appears in two forms:

Img. src = ""

Var img = new Image (); img. src = "";

Both forms cause the same problem: the browser sends another request to the server.

　　Tips

　　1. Exclusive Thoughts

First, exclude all current styles and then perform the next operation. Generally, when performing an animation or adding a style, you need to know the previous style before adding a new style, avoid simultaneous animation conflicts.

2. Short Circuit operation (|)

Generally, when you need to determine whether a value exists, do not use the if statement. You can use the short-circuit operator to save the memory occupied by the Code. For example:

A = a | B;

If a exists, a is used. If a does not exist, B is used.

3. Operations (&&)

It can be used in condition matching to facilitate extra queries of conditions. For example, when determining whether an object is an array,

A & a. length & a. length> = 0

　4. pseudo array and array

When you want to encapsulate a non-array element into an array, the simplest way is to add a [] to it. If you want to use a pseudo array, you can set a length attribute for it.

　5. throttling

It is generally used in an animation to set a value, set it to true at the beginning, determine its value, and assign the value to false when entering the animation, when the animation ends, use the callback function and then assign the value true again.

6. Remove the passive selection of text (dry goods only)

When you click some buttons, sometimes the text is selected, so that the customer can see it as a bug. The following is the Code to remove the status and paste it.

If (document. all ){

Document. onselectstart = function () {return false}; // for ie

} Else {

Document. onmousedown = function () {return false };

Document. onmouseup = function () {return true };

}

Document. onselectstart = new Function ('event. returnValue = false ');

　　7. Clever Use of ternary Operators

To determine whether a value exists, you can use the ternary operator to optimize the code. For example

Obj = undefined? Object: obj;

Supplement:

The above are the front-end optimization and some tips I have summarized at work. If you have any good optimization and skills, I hope you can comment on them more, I personally think that technology requires more communication to make better progress.