Front-end performance optimization and techniques_javascript techniques

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 it, ‘The performance consumption of code written by people who understand performance optimization and have studied jquery source code will be hundreds of times different from those who don’t understand performance optimization. Even thousands of times ', the current javascript is a transition process from ECMAscript3 to ECMAscript5 and ECMAscript6. The problems caused by improper coding methods when JavaScript is not perfect cannot be ignored.

Performance optimization

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

1. Sprite map

The most basic thing is to make the background image into a sprite map as much as possible to reduce image requests, so another basic instinct of general web engineers is the production of sprite maps .

2.css selector optimization

In CSS, try to use descendant selectors as much as possible>, and use descendant selectors less. When using descendant selectors, the search engine will search all descendant elements. If we use descendant selectors, , you can narrow the scope of the search, thereby reducing the performance consumption of the search engine.

3.js changes the style and directly operates the class name

When operating element styles in js, do not use style to directly add styles. Generally, the performance will not be affected much if there are few attributes. In fact, this is not the case. Every time a style is added, the page will be redrawn, and redrawing must be paid attention to. , when operating styles, directly operating the class name will only cause one redraw, while directly adding styles with style will cause multiple redraws.

4.js directly operates dom nodes

When operating a node, try to add the node after the element. If you insert it in front of the node, the nodes after the inserted node will cause reflow. When inserting to the back, you only need to reflow the inserted node once. .

Some people may not understand the concepts of redrawing and reflow

5. Regular matching selector

Attribute selectors in css3 and jQuery. Some of these selectors use regular matching. Try not to use them. Of course, if performance optimization is not considered, these methods are still easier to use. Yes, the regular matching selector will cause the search engine to search all tags, which will greatly affect performance

6.js element acquisition optimization

When getting elements in js, you normally use document.getElementsById. The search engine will search from the bottom of the Dom tree until it finds the document in the window and then returns to the search, so It is best to store the document.body when obtaining the element. When using it again, just take out this variable and use it, which can save the performance of the search engine

7. Memory overflow

Generally, when running recursion, memory overflow will occur, causing a significant drop in performance when running recursion. After the operation is completed, the memory will be recycled by the system, so when running recursion, an object needs to be used to save the value. It is detected during operation. If it exists, it will be returned directly. If it does not exist, it will be added. This can solve the great performance of recursion.

8. Use GET request for Ajax

POST request is implemented by sending HTTP request header first and then sending data. GET has no request header, but it should be noted : GET size limit is about 4K, while POST has no limit.

9. Lazy loading of images

                                                                                                                                                                                                 because the request volume is too large can cause the image to be loaded lazily. When the page scrolls to the position of the image, the image will be loaded again.

Now I recommend a plugin for lazy loading of images

jquery.lazyload.js

 a=a||b;

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

 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');

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