1024programmer Java Considerations for implementing high-performance JavaScript

Considerations for implementing high-performance JavaScript

1. Use global variables less

Reason: Because the scope chain is a stack structure, it follows the first-in, first-out principle. When the Javascript engine parses the code, it places the global object at the bottom of the stack, and then objects of different scopes appear in sequence upwards. Active objects (these active objects have no interdependence except closures), so when looking for variables, it will start from the active object, then the active object that closes it, and finally the global object. If there are too many global variables, it will It affects the speed of obtaining variables, so don’t use global variables too much.

2. Try to use local variables to encapsulate global variables

Reason: As mentioned before, the active object is at the top of the stack, so its content is searched first. When we encapsulate the document into a local variable, the number of deep searches will be reduced and the performance will be improved.

3. When operating array lengths and object properties, try to use local variable encapsulation.

Reason: IE and Opera access arrays faster than object properties, while FF chrome safari is just the opposite, so taking these into account, we’d better encapsulate it.

4. Minimize the depth of object properties

Reason: If the depth is too large, it will increase the cost of the Javascript engine searching for the address to obtain the value, which is equivalent to adding multiple layers of nested pointers, resulting in performance loss.

5. Try to use local variables to encapsulate conditional items in the for loop

Reason: for example for(var i=0;i

6. Handle HTML collection objects carefully (such as childNodes getElementsByTagName and other objects that obtain DOM element collections). It is best to encapsulate them into arrays for operation.

Reason: It is still because operating DOM elements requires traversing the DOM document, but non-DOM elements do not need to be traversed, so please minimize the operations on the DOM and put the DOM collection into an array.

7. During the development process for Safari browser, please try to use “.” to obtain object properties instead of “[]”.

8. It is recommended to use if-else when there are less than two judgments, and use switch when there are more than three judgments. When it exceeds 10 times, use an array or json object to search by index (this mode is relatively simple)

9. If there is no difference in the order of looping the array from low to high or from high to low, then it is better to loop from high to low. For example, if we loop the contents of an array:

 var arr=[1,2,3,4,5];
 var i=0;
 while(i

 

10. Use for-in loops as little as possible and transform them into while or for loops as much as possible.

11. When dealing with large arrays, follow the duff strategy.

duff strategy: Split the large array into a group of 8. There is no need to loop the operation of the 8 arrays as one unit. Instead, you are not afraid of the tedious writing of 8 lines of code to process the array elements. This will improve the performance of large array operations.

12. When using a function to process each element of a large array, try to use a timer to suspend each operation. It is more reasonable to set the time to 50-100ms

Reason: If you simply use a loop to process each element in the array, if it is a large array, it will cause the page to freeze and freeze, giving the user a bad experience. However, using setTimeout will cause each operation to be blocked. Temporarily suspending allows the Javascript engine to have other time to process other functions in the queue, effectively preventing freezing and suspended animation. After the set delay time, the Javascript engine may be idle and can be processed better. These array operations. It is equivalent to virtualizing a background operation. Here is the solution proposed by zakas:

 function chunk(array,func,context){
 setTimeout(function(){
 var arr=array.shift();
 func.call(context,item);
 if(array.length>0){
 setTimeout(arguments.callee,100);//Recursively loop this process arguments.callee is the function object of chunk
 }
 },100);
 }

13. Pay attention to the blocking of window onload when using iframe

Reason: The loading of iframe will block the window onload, resulting in some codes loaded in the window unload event may not be executed when the user closes the page, so we need to dynamically convert it to an iframe when the window onload time occurs. Set the src attribute.

PS: Don’t use iframe if you can.

14. Optimization of CSS selectors

Reason: CSS selectors are read from right to left, so when writing, the rules on the right should be as detailed as possible, and sub-selectors should be used as little as possible to comply with descendant selectors, label selectors.

The above is the entire content of this article. I hope it will be helpful to everyone's study and I hope you will support me a lot.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/697286

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索