Preface Why Optimizing Performance is So Important for Front-end Engineers
There is a saying in the industry that I don’t know if you have heard of, ‘People who know performance optimization and have studied jquery source code and code written without performance optimization will have a difference in performance consumption of hundreds or even thousands of times’. Today’s JavaScript is a transitional process from ECMAscript3 to ECMAscript5 and ECMAscript6. When JavaScript is not well written, the code method is not properly written, and the problems caused cannot be ignored.
Performance optimization
Below I will share some of my insights on performance optimization with you;
1. Elf Picture
The most basic thing is to make background images into elves as much as possible to reduce picture requests, so another basic instinct for general web engineers is to make elves.
2.CSS selector optimization
In css, try to use the child selector >, use less descendant selector. When using the descendant selector, the search engine will search all descendant elements. If we use the child selector, we can narrow the search range, thereby reducing the performance consumption of the search engine.
3.js change the style and directly operate the class name
When operating js element styles, do not use style to directly add styles. Generally, there will be fewer attributes and no performance will be affected. In fact, this is not the case. Every time a style is added, the page will be redrawn once. Repainting is necessary to pay attention to. When operating styles, directly manipulating the class name will only cause redrawing once. Adding the style directly with style will cause multiple redrawings.
4.js directly operates dom nodes
When operating nodes, try to add nodes behind the element. If inserted in front of the node, all nodes after the inserted node will cause reflow. When inserted in the back, only the inserted node needs to be reflowed once.
Some people may not understand the concept of redrawing and reflow
5. Regular Match Selector
In css3 and jQuery, some of these selectors are matched using regular methods and try not to use them. Of course, if performance optimization is not considered, these methods are relatively easy to use. Regular matching selectors will make search engines search for all tags, greatly affecting performance
6.js get element optimization
When obtaining elements in js, it is normal to use document.getElementsById. The search engine will search from the bottom of the Dom tree until it is searched for document in window and then search again. Therefore, it is best to store document.body when obtaining elements. When using them again, just take out this variable to use, which can save the performance of the search engine
7. Memory overflow
Generally, when running recursively, memory overflow will occur, resulting in a significant decline in performance when running recursive. After running, memory will be recycled by the system. Therefore, when running recursive, you need to save the value with an object, detect it every time the recursive operation, return it directly, and add it if it does not exist. This can solve the great performance of recursive.
8. Use GET requests for Ajax
POST request is achieved by sending HTTP request headers first and then sending data. GET does not have a request header, but it should be noted that the GET size limit is about 4K, while POST has no limit.
9. Delay loading pictures
When the page initiates a request, the number of requests is too large, so the picture can be lazy to load. When the page scrolls to the location of the picture, the picture will be loaded.
Here is a plug-in for lazy loading of pictures
jquery.lazyload.js
10. Avoid the image src attribute being empty
Images with src attributes that are empty strings are common, mainly appearing 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.
Skill
1. Exclusive Thought
First exclude all the current ones, and then perform the next operation; generally when performing animations, adding styles, etc., first clarify the previous styles during the secondary operation and then add new styles to avoid conflicts in animations at the same time.
2. Short circuit operation (||)
Generally, when a value needs to be judged whether it exists, try not to use if statements. You can use short-circuit operators to save the memory occupied by the code. for example:
a=a||b;
If a exists, use a; if a does not exist, use b.
3. Operation (&&)
It can be used when conditions match, so as to make unnecessary query of conditions, such as when determining whether an object is an array,
a && a.length&& a.length>=0
4. Pseudo-array and array
When you need to encapsulate a non-array element and turn it into an array, the easiest way is to add a [] to it. If it needs to be a pseudo-array, you can set a length attribute to it.
5. Throttle valve
Generally used in animation, set a value, set it to true at the beginning, determine its value, assign this value to false when entering the animation, and use the callback function to reassign it to true at the end of the animation.
6. Unlock the passive selection status of the text (pure dry goods)
When clicking some buttons, sometimes the text is selected, which makes the customer see it like a bug. The following is the code to remove this state and just 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. Cleverly use the ternary operator
When it is necessary to determine whether a value exists, you can also use the ternary operator to make the code more optimized. for example
obj=obj===undefined?Object:obj;
Replenish:
The above is the front-end optimization and some tips I have summarized at work. If you have any good optimizations and techniques, I hope you can comment more. I personally think that technology requires more communication to make better progress.