¿Por qué todo desarrollador front-end debería entender la representación web?
Al definir el diseño de tu página, debes optimizar la representación desde el principio. Los estilos y guiones juegan un papel muy importante en la representación de páginas. Los profesionales conocen algunos trucos para evitar algunos problemas de rendimiento.
Este artículo no profundizará en los detalles técnicos de los navegadores, pero proporcionará algunos principios generales. Los diferentes motores de navegador funcionan de manera diferente, lo que hace que aprender sobre un navegador específico sea más complejo.
¿Cómo representa el navegador la página?
Hablemos primero del proceso general de representación de páginas del navegador:
¿Está formado por HTML recibido del servidor? El modelo de objetos de documento
Carga y analiza estilos para formar el modelo de objetos CSS.
Luego, DOM y CSSOM crean un árbol de renderizado, que es una colección de objetos de renderizado (Webkit los llama "renderizadores" y "objetos de renderizado" respectivamente, y el motor Gecko los llama "marco"). Excepto por los elementos invisibles (como la etiqueta head y algunos elementos con el atributo display:none), el árbol de renderizado mapea la estructura del DOM. En el árbol de renderizado, cada cadena de texto se trata como un renderizador independiente. Cada objeto de renderizado contiene su correspondiente objeto DOM (o bloque de texto) con estilos calculados. En otras palabras, el árbol de renderizado describe una representación visual del DOM.
Para cada elemento renderizado, se calculan sus coordenadas. Este es el llamado "diseño". Los navegadores distribuyen todos los elementos mediante un "método de flujo" que solo debe procesarse una vez (las tablas deben procesarse varias veces).
Finalmente, el diseño se muestra en la ventana del navegador. Este proceso se llama "dibujo".
Redibujar
Cuando modifica algunos estilos en la página que no necesitan cambiar la posición (como el color de fondo, el color del borde, la visibilidad), el navegador solo volverá a dibujar el nuevo estilo. Dibujar sobre el elemento (esto se llama "redibujar" o "redefinir el estilo" una vez).
Reorganización
La reorganización (o "rediseño") ocurre cuando los cambios en una página afectan el contenido, la estructura o la posición de los elementos en el documento. El reordenamiento normalmente se activa mediante:
Operaciones DOM (como agregar, eliminar, cambiar o cambiar el orden de los elementos).
? Cambios de contenido, incluidos cambios de texto en tablas.
? Calcular o cambiar propiedades CSS.
? Agregue o elimine hojas de estilo.
? Cambie el atributo "Clase".
? Operaciones de la ventana del navegador (cambiar el tamaño, desplazar la ventana).
? Activa pseudoclases (como estados de desplazamiento).
¿Cómo optimiza el navegador el renderizado?
Los navegadores hacen todo lo posible para limitar el proceso de reordenamiento a cubrir solo el área del elemento modificado. Por ejemplo, un cambio de tamaño de un elemento con posición absoluta o fija solo afecta a él mismo y a sus descendientes, mientras que hacer lo mismo con un elemento con posición estática hará que todos los elementos que le siguen se reordenen.
Otra optimización es que cuando se ejecuta un fragmento de código Jjavascript, el navegador almacenará en caché algunas modificaciones y luego ejecutará estas modificaciones a la vez cuando se ejecute el código.
Por ejemplo, el siguiente código activa el redibujado y la reorganización:
var? $cuerpo? =?$('cuerpo');?
$body.css('padding ',?1px’);? //?¿Arreglar de nuevo? ¿Repintar?
$body.css('color ',? rojo');? //¿Repintar?
$body.css('margen ',? 2px’);? //?¿Arreglar de nuevo? ¿Repintar?
//?De hecho, solo se realiza una reorganización y un repintado. ?
Como se mencionó anteriormente, acceder a los atributos de un elemento forzará una reorganización. Esto sucede si agregamos una línea de código al código anterior para leer el atributo del elemento:
var? $cuerpo? =?$('cuerpo');?
$body.css('padding ',?1px’);?
$ cuerpo .CSS('relleno');? //Aquí, los atributos del elemento se leen una vez y se produce un reordenamiento forzado.
$body.css('color ',? rojo');?
$body.css('margen ',? 2px’);?
Debido al código anterior, hay dos reflujos. Por lo tanto, para mejorar el rendimiento, debe decir que el código que lee los atributos del elemento está organizado en conjunto (consulte el código en JSBin para ver un ejemplo detallado).
En un caso, se debe activar un reflujo forzado.
Por ejemplo, si el mismo atributo de un elemento se modifica dos veces (como margen izquierdo), la configuración inicial es 100 px sin animación y luego el valor se modifica a 50 px mediante animación. Puedes ver ejemplos específicos, por supuesto entraré en más detalles aquí.
Comencemos con una clase CSS con una transición:
. tiene-transición? { ?
-Transición-WebKit:? ¿Margen izquierdo? 1? Relájate;
-moz-transition:? ¿Margen izquierdo? 1? Relájate;
-o-transición:? ¿Margen izquierdo? 1? Relájate;
Transición:? ¿Margen izquierdo? 1? Relajarse;?
}?
Entonces implemente:
//¿Nuestros elementos tienen el atributo "has-transition" por defecto?
var? $objetivoElem? =?$(' # elemid objetivo ');?
//¿Eliminar la clase que contiene la transición?
$ target elem . remove class(' has-transition ');
//? Cuando la clase que contiene la transición desaparece, ¿cambiar los atributos del elemento?
$targetElem.css('margen-izquierdo ',? 100);?
//?Luego vuelva a agregar la clase que contiene la transformación.
$ elemento de destino . agregar clase('tiene-transición');?
//?¿Cambiar atributos del elemento?
$targetElem.css('margen-izquierdo ',?50);?
La implementación anterior no funciona como se esperaba. Todos los cambios se almacenan en caché en el navegador y solo se ejecutarán al final del código anterior. Lo que necesitamos es forzar el reordenamiento, lo cual se puede lograr haciendo las siguientes modificaciones:
//¿Eliminar la clase que contiene la transición?
$(esto). eliminar clase ('tiene-transición');?
//?¿Cambiar atributos del elemento?
$(esto). css('margen izquierdo',?100);?
//Activa el reordenamiento forzado para que la clase o atributo modificado pueda ejecutarse inmediatamente. ?
$(esto)[0]. En el lado alto;? ///?OffsetHeight es sólo un ejemplo, también hay otras propiedades disponibles. ?
//?Luego vuelva a agregar la clase que contiene la transformación.
$(esto). agregar clase("tiene-transición");?
//?¿Cambiar atributos del elemento?
$(esto). css('margen izquierdo',?50);?
Ahora, este código funciona como esperábamos.
Sugerencias prácticas de optimización
Resumen de información útil, sugiero lo siguiente:
? Cree HTML y CSS legales y no olvide codificar sus archivos. Los estilos deben escribirse en la etiqueta head y las etiquetas script deben cargarse al final de la etiqueta body.
? Intente simplificar y optimizar los selectores de CSS (la mayoría de los desarrolladores que utilizan preprocesadores de CSS ignoran este punto de optimización). Mantenga el número de niveles de anidación al mínimo. Aquí están las clasificaciones de rendimiento de los selectores CSS (comenzando desde el más rápido):
Selector de ID: #id
Selector de clase: ? . Clase
Etiqueta:? Diferencia
Elementos hermanos adyacentes: a+i
Selector de elementos principales:? ul & gt
Selector comodín:? *
Pseudoclases y pseudoelementos:? Respuesta:¿Pasar el cursor? Debe recordar que los navegadores procesan los selectores de derecha a izquierda, por eso el selector situado más a la derecha es más rápido: #id o . clase.
¿div? *?{...}?//?¿no es bueno?
. ¿Lista? ¿ciruela? {...}?//?¿no es bueno?
. ¿Elemento de lista? {...}?//?¿Bueno?
¿#Lista? . ¿Elemento de lista? {...}?//?¿Bueno?
En scripts, minimizar las operaciones DOM. Almacene en caché todo, incluidas las propiedades y los objetos (si se pueden reutilizar). Al realizar operaciones complejas, es mejor operar un elemento "fuera de línea" (un elemento "fuera de línea" se refiere a un elemento que solo existe en la memoria y está separado del objeto DOM) y luego insertar este elemento en el DOM.
Si utiliza jQuery, siga las mejores prácticas del selector de jQuery.
Para cambiar el estilo de un elemento, modificar el atributo "clase" es uno de los métodos más efectivos. Cuanto más profundo sea el árbol DOM, más eficiente será (también ayuda a separar la presentación de la lógica).
Cuando sea posible, anime solo elementos con posiciones absolutas o fijas.
¿Al deshabilitar algún desplazamiento complejo? :¿flotar? La animación es una buena idea (por ejemplo, agregar una clase sin desplazamiento a la etiqueta del cuerpo).
Para más detalles puedes leer los siguientes artículos:
1. Cómo funciona el navegador
2. Repintado, reflujo/diseño reflujo y rediseño de estilos.
¡Espero que este artículo pueda ayudarte!
Enlace original:? frontendbabel? traducir:? ¿Bole en línea? -?Moise
Enlace de traducción:? /72692/