N suggestions for writing high-performance Javascript code, high-performance javascript

N suggestions for writing high-performance Javascript code, high-performance javascript

Javascript has been playing an important role in web application development for many years, but many developers tend to ignore some performance knowledge, especially with the continuous upgrade of computer hardware, developers feel that the performance optimization of Javascript does not significantly affect the execution efficiency of webpages. However, in some cases, unoptimized Javascript code will inevitably affect the user experience. Therefore, even when the current hardware performance has been greatly improved, when writing Javascript code, if you can follow Javascript specifications and pay attention to some performance knowledge, it will be of great benefit for improving Code maintainability and optimizing performance.

　Below are some suggestions for writing high-performance Javascript code:

　1. Try not to use the for-in loop to access the array. We recommend that you use the for loop: 

Function foo () {var I, B, c = [,]; for (I in c) {B = c [I]; if (B = "") return B ;}// function foo () {var I, B, c = [,]; for (I =; I <c. length; I ++) {B = c [I]; if (B = "") return B ;}}

　2. It is recommended to cache objects, especially DOM access, which consumes resources:

// C. length is not cached. In each iteration, the length of the Array function foo () {var I, B, c = [,]; for (I =; I <c. length; I ++) {B = c [I]; if (B = "") return B ;}// the performance is better, the first time the length of the array is cached in variable l, the second and subsequent cycles do not need to calculate the length of the Array function foo () {var I, B, c = [,], l; for (I =, l = c. length; I <l; I ++) {B = c [I]; if (B = "") return B ;}// document. getElementById ('info') is not cached. Every time you traverse the DOM function foo () {var e; document. getElementById ('info '). innerHTML = "call"; document. getElementById ('info '). innerHTML = "call";} // better performance. You do not need to access DOM function foo () {var e = document for the second time. getElementById ('info'); e. innerHTML = "call"; e. innerHTML = "call ";}

　　3. We recommend that you do not perform a deep nested judgment in the function:

// Too many nested judgment statements in the function foo1 () {var r ={}; r. data ={}; r. data. myProp = 2; if (r) {if (r. data) {if (r. data. myProp) {// logical processing} else {// logical processing }}// function foo2 () {var r ={}; r. data ={}; r. data. myProp = 2; if (! R) return; if (! R. data) return; if (r. data. myProp) {// logic processing} else {// logic processing }}

　4. Avoid loop reference and prevent memory leakage:

// JQuery function foo (e, d) {$ (e) is required ). on ("click", function () {// perform logic processing for d cbk (d) ;}});} // break the loop! Function foo (e, d) {$ (e). on ("click", cbk (d);} function cbk (d) {// logical processing}

　　5. We recommend that you avoid returning an undeclared variable in the function and polluting the external variable:

Function foo (a, B) {r = a + B; return r; // r is not declared, a global variable is created}

　　6. var declares variables. It is recommended to write them in multiple rows.

// The test result is foo fast, but there is also a view that foo fast function foo () {var c =; var sum =; var d =; var e ;} function foo () {var c =, sum =, d =, e ;}

Note: in fact, the time difference of a single function is small. Here we use a loop to compare the performance of multiple times with the cumulative time. The testing results of different PC configurations or browsers may be different.

The above are N suggestions for writing high-performance Javascript code. I hope this will help you.