Prefacio por qué optimizar el rendimiento es tan importante para los ingenieros front-end
Hay un dicho en la industria que no sé si ha oído hablar, "las personas que conocen la optimización del rendimiento y han estudiado el código fuente de jQuery y el código escrito sin optimización del rendimiento tendrán una diferencia en el consumo de rendimiento de cientos o incluso miles de veces". JavaScript de hoy es un proceso de transición de ECMAScript3 a ECMAScript5 y ECMAScript6. Cuando JavaScript no está bien escrito, el método del código no está escrito correctamente y los problemas causados no pueden ignorarse.
Optimización del rendimiento
A continuación compartiré algunas de mis ideas sobre la optimización del rendimiento con usted;
1. Imagen de elfo
Lo más básico es hacer imágenes de fondo en los elfos tanto como sea posible para reducir las solicitudes de imágenes, por lo que otro instinto básico para los ingenieros web generales es hacer elfos.
2. Optimización del selector de CSS
En CSS, intente usar el selector de niños>, use menos selector descendiente. Al usar el selector de descendiente, el motor de búsqueda buscará todos los elementos descendientes. Si usamos el selector de niños, podemos reducir el rango de búsqueda, reduciendo así el consumo de rendimiento del motor de búsqueda.
3.js cambia el estilo y operan directamente el nombre de la clase
Al operar estilos de elementos JS, no use el estilo para agregar directamente estilos. En general, habrá menos atributos y ningún rendimiento se verá afectado. De hecho, este no es el caso. Cada vez que se agrega un estilo, la página se volverá a dibujar una vez. El repintado es necesario para prestar atención. Al operar estilos, manipular directamente el nombre de la clase solo causará volver a dibujar una vez. Agregar el estilo directamente con el estilo causará múltiples redibros.
4.Js opera directamente los nodos DOM
Al operar nodos, intente agregar nodos detrás del elemento. Si se inserta frente al nodo, todos los nodos después del nodo insertado causarán reflujo. Cuando se inserta en la parte posterior, solo el nodo insertado debe reflejarse una vez.
Algunas personas pueden no entender el concepto de volver a dibujar y reflexionar
5. Selector de coincidencias regular
En CSS3 y JQuery, algunos de estos selectores coinciden con métodos regulares e intentan no usarlos. Por supuesto, si no se considera la optimización del rendimiento, estos métodos son relativamente fáciles de usar. Los selectores correspondientes regulares harán que los motores de búsqueda busquen todas las etiquetas, afectando en gran medida el rendimiento
6.js obtienen optimización de elementos
Al obtener elementos en JS, es normal usar documento. GetElementsById. El motor de búsqueda buscará desde la parte inferior del árbol DOM hasta que se busque en el documento en la ventana y luego buscará nuevamente. Por lo tanto, es mejor almacenar documentos. Cuerpo al obtener elementos. Al usarlos nuevamente, simplemente elimine esta variable para usar, lo que puede guardar el rendimiento del motor de búsqueda
7. Desbordamiento de la memoria
En general, cuando se ejecuta recursivamente, se producirá el desbordamiento de la memoria, lo que resulta en una disminución significativa en el rendimiento al ejecutar recursivo. Después de ejecutar, el sistema reciclará la memoria. Por lo tanto, cuando se ejecuta recursivo, debe guardar el valor con un objeto, detectarlo cada vez que la operación recursiva, devuélvalo directamente y agregarlo si no existe. Esto puede resolver el gran rendimiento de recursivo.
8. Use las solicitudes de obtener para AJAX
La solicitud de publicación se logra enviando primero los encabezados de solicitud HTTP y luego enviando datos. Get no tiene un encabezado de solicitud, pero debe tenerse en cuenta que el límite de tamaño GET es de aproximadamente 4K, mientras que Post no tiene límite.
9. Retraso de carga de imágenes
Cuando la página inicia una solicitud, el número de solicitudes es demasiado grande, por lo que la imagen puede ser perezosa de cargar. Cuando la página se desplaza a la ubicación de la imagen, se cargará la imagen.
Aquí hay un complemento para la carga perezosa de imágenes
jQuery.lazyload.js
10. Evite la imagen del atributo SRC que está vacío
Las imágenes con atributos SRC que son cadenas vacías son comunes, principalmente apareciendo en dos formas:
<img src = "">
var img = nueva imagen (); img.src = "";
Ambos formularios causan el mismo problema: el navegador envía otra solicitud al servidor.
Habilidad
1. pensamiento exclusivo
Primero excluya todos los actuales y luego realice la siguiente operación; En general, al realizar animaciones, agregar estilos, etc., primero aclare los estilos anteriores durante la operación secundaria y luego agregue nuevos estilos para evitar conflictos en las animaciones al mismo tiempo.
2. Operación de cortocircuito (||)
En general, cuando se debe juzgar un valor si existe, trate de no usar las declaraciones IF. Puede usar operadores de cortocircuito para guardar la memoria ocupada por el código. Por ejemplo:
a = a || b;
Si ex existe, use a; Si A no existe, use b.
3. Operación (&&)
Se puede usar cuando las condiciones coinciden, para hacer una consulta innecesaria de las condiciones, como al determinar si un objeto es una matriz,
a && a.length && a.length> = 0
4. Pseudo-Array and Array
Cuando necesite encapsular un elemento sin array y convertirlo en una matriz, la forma más fácil es agregarle un []. Si necesita ser una pseudo-array, puede establecer un atributo de longitud.
5. Válvula del acelerador
Generalmente utilizado en la animación, establecer un valor, establecerlo en verdadero al principio, determinar su valor, asignar este valor a FALSO al ingresar la animación y usar la función de devolución de llamada para reasignarlo a verdadero al final de la animación.
6. Desbloquee el estado de selección pasiva del texto (productos secos puros)
Al hacer clic en algunos botones, a veces se selecciona el texto, lo que hace que el cliente lo vea como un error. El siguiente es el código para eliminar este estado y simplemente pegarlo.
if (document.all) {document.onselectstart = function () {return false}; // para IE} else {document.OnMousEdown = function () {return false}; document.onmouseUp = function () {return true}; } document.onselectStart = new function ('event.returnValue = false');7. Utilice hábilmente el operador ternario
Cuando es necesario determinar si existe un valor, también puede usar el operador ternario para que el código sea más optimizado. Por ejemplo
obj = obj === Undefined? Object: obj;
Reponer:
Lo anterior es la optimización frontal y algunos consejos que he resumido en el trabajo. Si tiene buenas optimizaciones y técnicas, espero que pueda comentar más. Personalmente, creo que la tecnología requiere más comunicación para hacer un mejor progreso.