Front-End engineer front-end performance optimization and skill sharing

In the industry there is a saying that you have not heard of, ' understand the performance optimization and study the jquery source code and do not know the performance optimization of the written code for the performance of the consumption will be a hundredfold or even hundreds of thousands of times ', Today's JavaScript is a process of transition from ECMASCRIPT3 to ECMAscript5 and ECMASCRIPT6. When the JavaScript writing is not sound, writing code method is not proper, the problems caused by can not be ignored.

　Performance optimization

The following will be their own performance optimization of some insights to share with you;

　　1. Wizard Chart

The most basic is to make the background picture as much as possible, to reduce the picture request, so the general Web engineer Another Basic instinct is the production of wizard.

2.css Selector Optimization

In the CSS to use the descendant selector as much as possible, less to use the descendant selector, using the descendant selector, the search engine will all the descendant elements are searched, if we use the descendant selector, we can narrow the scope of the search, thereby reducing the search engine performance consumption.

　3.js Change style Direct Action class name

JS operation element Style, do not use style to directly add style, general properties will not affect how much performance, in fact, otherwise, in each addition to the style, the page will be redrawn once, redraw is to be emphasized, the operation style, direct operation of the class name, only to cause a redraw, Adding a style directly with style causes multiple redraw.

　4.js direct manipulation of DOM nodes

When the node is operated as far as possible to add the node after the element, if inserted in front of the node, the node after the insertion node will cause reflux, and inserted to the back of the node only to be inserted to return to the first time.

Some people may not understand the concept of redrawing and reflow, to recommend a Web site:

Dot here

　5. Regular matching Selector

The attribute selector in CSS3 and jquery, some of these selectors use regular to match the try not to use, of course, if the performance optimization does not take into account, these methods are relatively good, the regular matching selector will enable search engines search all the tags, a great impact on performance

　6.js Get element optimization

When you get elements in JS, it's normal to use Document.getelementsbyid, and search engines will search from the bottom of the DOM tree until you search for the document in window to return to the search. So it's best to store the document.body when you get the element, and when you use it again, you can save the performance of the search engine by simply taking the variable out of use.

7. Memory Overflow

Typically, a memory overflow occurs when running recursively, resulting in a significant drop in performance when running recursively. Memory is reclaimed by the system at the end of the run, so it is necessary to save the value with the object when running recursion, to detect it at every recursive operation, to return directly if it exists, and to add it if it does not exist, so that it can solve the great performance of recursion.

　8. For Ajax with GET requests

Post requests are implemented by sending the HTTP request headers and then sending the data, but not the request headers, but note that there is no limit to the get size limit of about 4k,post.

　　9. Delay Loading picture

When the page initiates the request, the request is too large, you can make the picture lazy load, when the page is rolled to the picture position, then load the picture.

below to recommend a picture lazy loaded plug-ins

Jquery.lazyload.js

Plugin Download Address: http://download.csdn.net/download/lwpxx/5179738

10. Avoid picture src attribute is null

The SRC attribute is a very common picture of an empty string, mainly in two ways:

IMG.SRC = ""

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

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

　　Skills

　　1. The idea of exclusivity

Exclude the current all, and then do the next operation, generally in animation, add style, etc., in two operations, first clear the previous style and then add new style, to avoid simultaneous animation of the conflict.

2. Short Circuit operation (| |)

Generally, when a value needs to be judged to exist, try not to use the IF statement, you can use the short-circuit operator, you can omit the memory occupied by the code. Like what:

a=a| | b

A exists then use B if A,a does not exist.

3. Operation (&&)

You can apply an extra query to a condition when a condition is matched, such as to determine whether an object is an array,

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

　4. pseudo Arrays and arrays

When you need to encapsulate a non-array element into an array, the easiest way to do this is to add a [] to it, and if you want to be a pseudo array, you can set a length property.

　5. Throttle Valve

Generally used in animation, set a value, set it to true at the start, judge its value, assign the value to False when you enter the animation, and use the callback function to reset the value to true at the end of the animation.

6. Remove text from passive selection (pure dry goods)

When you click on some buttons, sometimes the text is selected, so that customers see as if the bug general, the following is the release of this state code, paste can be.

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. Ingenious use of ternary operators

You can also use the ternary operator to make your code more optimized when you need to determine whether a value exists. Like what

Obj=obj===undefined? Object:obj;

Add:

Above is oneself in the work, summarizes the front end optimization as well as some techniques to share with everybody, if everybody has what good optimization and the technique hope to be able to comment more, personally thinks the technology is needs the communication to be able the better progress.