Red de conocimiento informático - Material del sitio web - Cómo optimizar el código js

Cómo optimizar el código js

1. Mantenga el código conciso: algunas expresiones simples también producirán una buena optimización

por ejemplo: x=x+1 puede abreviarse como x++;

2. Los nombres de variables y métodos deben ser lo más simples posible sin afectar la semántica. (Puede elegir nombrarlo con la primera letra)

por ejemplo: la longitud de la matriz definida se puede nombrar: ArrLen en lugar de ArrayLength.

3. En cuanto a los bucles JS, los bucles son un control de proceso de uso común.

JS proporciona tres tipos de bucles: for(;;), while() y for(in). Entre estos tres tipos de bucles, for(in) es el menos eficiente porque necesita consultar la clave Hash. Por lo tanto, el bucle for(in) debe usarse lo menos posible. El rendimiento de for(;;) y while. () Los bucles son básicamente los mismos. Por supuesto, se recomienda utilizar un bucle for. Si la variable del bucle se incrementa o disminuye, no asigne un valor solo a la variable del bucle. En su lugar, utilice el operador anidado ++ o –.

4. Si necesita recorrer una matriz, primero debe almacenar en caché la longitud de la matriz y colocarla en una variable local para evitar consultar la longitud de la matriz varias veces.

Porque a menudo necesitamos realizar un bucle según la longitud de cadenas y matrices, y normalmente esta longitud no cambia. Por ejemplo, cada vez que consultamos a.length, debemos realizar una operación adicional y poner var. len por adelantado. =a.length, entonces hay una consulta menos.

5. Intente utilizar variables locales en lugar de variables globales.

La velocidad de acceso de las variables locales es más rápida que la velocidad de acceso de las variables globales, porque las variables globales son en realidad miembros del objeto de ventana, mientras que las variables locales se colocan en la pila de la función.

6. Utilice eval lo menos posible.

Cada vez que usa eval, lleva mucho tiempo. En este momento, puede usar el cierre admitido por JS para implementar plantillas de funciones.

7. Reducir la búsqueda de objetos

Debido a la interpretabilidad de JavaScript, a.b.c.d.e requiere al menos 4 operaciones de consulta Primero marque a, luego marque b en a y luego marque b. , etcétera. Por lo tanto, si dichas expresiones aparecen repetidamente, deben mantenerse lo más raras posible. Puede usar variables locales para colocarlas en un lugar temporal para realizar consultas.

8. Conexión de cuerdas.

Si está agregando una cadena, es mejor usar la operación s+=anotherStr en lugar de usar s=s+anotherStr.

Si desea conectar varias cadenas, debe usar += less, como s+=a;s+=b;s+=c; debe escribirse como s+=a + b + c;

Si está recopilando cadenas, como realizar operaciones += en la misma cadena varias veces, es mejor utilizar un caché. ¿Cómo usarlo? Utilice matrices de JavaScript para recopilar y, finalmente, utilice el método de unión para conectarse, de la siguiente manera

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push( i.toString ());}var all = buf.join("");

9. Conversión de tipo

1. Convierte el número en una cadena, usa "" + 1, aunque parece un poco más feo, de hecho este es el más eficiente, en términos de rendimiento: ("" +) > String() > .toString() > new String()

Pruebe utilizar tiempo de compilación Las operaciones internas que se pueden utilizar son más rápidas que las operaciones del usuario utilizadas en tiempo de ejecución.

String() es una función interna, por lo que es muy rápida, mientras que .toString() necesita consultar la función en el prototipo, por lo que no es tan rápido como se usa para regresar. una copia exacta.

2. La conversión de números de punto flotante a enteros es más propensa a errores. A muchas personas les gusta usar parseInt(). De hecho, parseInt() se usa para convertir cadenas en números, no números de punto flotante y enteros. Para convertir entre, debemos usar Math.floor() o Math.round(). Math es un objeto interno, por lo que Math.floor() en realidad no requiere mucho método de consulta ni tiempo de llamada, y es el más rápido.

3. Para objetos personalizados, si el método toString() está definido para la conversión de tipos, se recomienda llamar explícitamente a toString(), porque la operación interna probará el objeto después de probar todas las posibilidades. () intenta convertirlo en String, por lo que llamar a este método directamente será más eficiente

10. Intente usar el formato JSON para crear objetos en lugar del método var obj=new Object().

Debido a que el primero copia directamente, mientras que el segundo requiere llamar al constructor, el rendimiento del primero es mejor.

11. Cuando necesite utilizar una matriz, intente utilizar la sintaxis del formato JSON.

Usar la sintaxis del formato JSON significa definir directamente la matriz utilizando la siguiente sintaxis: [ parrm, param, param...], en lugar de utilizar la sintaxis new Array(parrm, param, param...). Porque la sintaxis que utiliza el formato JSON es interpretada directamente por el motor. Esto último requiere llamar al constructor Array.

12. Para realizar operaciones de bucle en cadenas, como reemplazo y búsqueda, utilice expresiones regulares.

Debido a que la velocidad del bucle de JS es relativamente lenta y la operación de expresión regular es una API escrita en C, el rendimiento es mejor.

13. Insertar HTML

A mucha gente le gusta usar document.write en JavaScript para generar contenido para la página. De hecho, esto es menos eficiente si necesita insertar HTML directamente, puede encontrar un elemento contenedor, como especificar un div o span, y configurar su HTML interno para insertar su propio código HTML en la página.

14. Consulta de objetos

Usar la consulta [""] es más rápido que .items()

15. Temporizador

Si Si su objetivo es código que se ejecuta constantemente, no debe usar setTimeout, sino setInterval. setTimeout reinicia un temporizador cada vez.

16. Minimizar las llamadas DOM

En el desarrollo web, una función muy importante de JavaScript es operar el DOM. Sin embargo, operar en el DOM es muy costoso porque hace que el navegador realice una operación de reflujo. Deberíamos reducir las operaciones DOM tanto como sea posible.