prefacio
El frente es enorme, incluyendo una variedad de recursos, HTML, CSS, Javascript, Imagen, Flash, y así sucesivamente. optimización de front-end es compleja, los recursos para todos los aspectos del tiene una forma diferente. Así que, ¿cuál es el propósito de optimizar la parte delantera?
1. Desde la perspectiva del cliente, la optimización puede hacer que la carga de la página más rápido, operan respuesta más oportuna para el usuario, que proporciona una experiencia fácil de usar más.
2. Desde el punto de vista del servidor, la optimización puede reducir el número de solicitudes de página o para reducir el ancho de banda ocupado por la solicitud, se ahorran recursos considerables.
En resumen, el derecho no sólo para mejorar la experiencia del usuario para optimizar el sitio y ser capaz de ahorrar recursos considerables.
Hay muchas maneras de optimizar el frente, donde he organizado en tres puntos principales, el primero es el nivel de solicitud HTTP , el segundo es el nivel de código de programa , y el tercero es el origen de la solicitud en respuesta al nivel de la fuente más cercana .
A nivel de solicitud HTTP
Esta estrategia, básicamente, todas las personas front-end sabe, pero también el más importante y más eficaz. Dicen que quieren reducir las peticiones HTTP, petición que más al final lo que va a pasar? En primer lugar, no es el costo de cada solicitud, incluye tanto el costo de tiempo también se incluye el coste de los recursos. A las solicitudes completas tienen que pasar por la búsqueda de DNS, se establece la conexión (canal TCP establecida, de tres vías), el envío de datos, a la espera para el servidor y el servidor recibe los datos tal un "largo" y complicado proceso, y finalmente las necesidades de su navegador para resolver html , representación css rinda árbol DOM correspondiente para generar, a través de una serie de calentó a reflujo y volver a dibujar JS realizó para formar la página correspondiente al usuario.
Por lo que la principal forma de reducir el número de peticiones HTTP incluir:
1. Reducir el número de peticiones HTTP (cuantificado)
(1) optimizar las solicitudes de imagen: Cuando se trata de la cantidad de solicitudes, la solicitud de que el cuadro página ciertamente no puede escapar, y una imagen será enviado una solicitud, la solicitud de la cantidad de la imagen, podemos utilizar imágenes CSS Sprites se integrará en una da mapa y, a continuación, obtener a través del fondo-posición que corresponde a la imagen que desea utilizar para solicitudes, esto es, sin duda, la solicitud de varias imágenes en una solicitud, por supuesto, esto también aumenta el ancho de banda ocupado por la solicitud, por lo que se puede considerar los Estados Unidos y hay un poco de falta de ella, y la segunda es la imagen de base 64, base 64 imagen codificada es no consume la cantidad de solicitudes, pero tenga cuidado de no utilizar más de 10k base 64 de imagen posible, ya que cuanto mayor sea el tamaño de la imagen, convertida en código de base 64 de la afecta en mayor medida la calidad del código, y el último es el icono de la fuente , el icono es un formato de fuente Iconfont, este icono no es consumido por la petición, pero por lo general se puede cumplir en esta etapa de nuestro proyecto más pequeño icono → biblioteca de iconos de Alibaba
(2) Recursos fusionó con la compresión: si es posible, tanto como sea posible de scripts externos, fusión de estilo, más en uno. Además, CSS, Javascript, compresión de la imagen se puede llevar a cabo con las herramientas adecuadas, a menudo después de la compresión puede ahorrar una gran cantidad de espacio
(3) La imagen de carga perezosa (Lazy Load Images): seguramente sabemos, como Taobao, los pétalos de esta imagen son en particular los sitios grandes no dar una imagen de la página actual, el usuario lo carga? Claramente imposible, por esta imagen muchas páginas procesando la carga diferida para reducir el doble en el número de solicitudes de una imagen, pero tenga en cuenta aquí es reducir el número de peticiones HTTP, no significa que usted puede dejar que las imágenes no necesitan ser cargados por la carga diferida enviar una solicitud, pero cuando entras a la página, mecanismo de carga diferida por la carga le dará parte de la imagen, en lugar de la página actual de las imágenes tiene que enviar una solicitud, y sólo cuando el usuario continúa desplazándose hasta la próxima carga posterior fotos . Como resultado, cuando si el usuario sólo está interesado en el contenido de la primera pantalla, y que las imágenes restantes se guardan bajo petición. Cuando brevemente sobre la realización del principio, que es el extremo frontal para obtener los datos de respuesta de imagen de fondo, dirección de fotografía, primero en las notas img data-srcen la propiedad, a continuación, srcla propiedad está vacía, entonces pergamino con la página de los usuarios del monitor JS, mientras la imagen actual de la zona visible de la ventana estará data-srcen la dirección de la imagen en srcla realización de una visualización de la imagen
(4) un conjunto razonable de HTTP Cache: caché es una fuerza poderosa y configuración de la caché apropiadas pueden reducir en gran medida las peticiones HTTP. En casa, por ejemplo, cuando la caché del navegador cuando ningún supuesto de que el acceso emitirá un total de 50 solicitudes, un total de más de 500 K de los datos, y cuando la segunda visita que se almacena en caché el acceso del navegador está a sólo 10 solicitudes, un total de 20 K datos. (Cabe señalar aquí que si a F5 directa actualizar la página, a continuación, el efecto no es el mismo, el número de solicitudes sigue siendo el mismo, en este caso, pero el recurso caché de servidor solicitado es 304 la respuesta, pero Cabecera sin cuerpo, puede ahorrar ancho de banda)
la forma en que considerados conjunto razonable? Pocos cambios en la imagen, por ejemplo, los recursos puede estar directamente proporcionada por Expira cabecera HTTP en una cabeza larga expirado; cambios no son frecuentes, pero pueden convertirse en un recurso puede ser utilizado para hacer solicitud de verificación de última Modifed. Tanto como sea posible para que los recursos pueden ser más largos en la memoria caché. Si bien esto se ajuste en su mayoría back-end, esto implicaría la respuesta de ajuste al valor de vuelta, el conjunto razonable en exceso puede reducir la parte delantera y la interacción cara posterior, la velocidad de carga de la página
2. La reducción porcentual peticiones HTTP de banda ancha (cualitativo)
(1) Recursos fusionó con compresión (cuantización ya se ha mencionado esto antes, aquí o escribir sobre él, se puede entender la solicitud para reducir la cantidad de consolidación, la compresión reduce la cuota de solicitud de banda ancha): Si es posible, tanto como sea posible de la scripts externos, estilos se fusionan, en uno más. Además, CSS, Javascript, compresión de la imagen se puede llevar a cabo con las herramientas adecuadas, a menudo después de la compresión puede ahorrar una gran cantidad de espacio
(2) evitar el gran cuadro (gran volumen) Solicitud: Solicitud el panorama está obligado a reducir la velocidad, afectará a la experiencia del usuario, pero el proyecto ciertamente no ha evitar cargar varias imágenes grandes, entonces podemos imaginar volumen compresión apropiada, cuidando de no afectar a la calidad de la imagen, tales como la distorsión borrosa, se procesará este diseñador de interfaz de usuario general de estas fotos, por supuesto, si la empresa no es tan clara división del trabajo, puede que sea necesario para completar el trabajo del front-end (por lo que a voluntad hacer, ahora hay un software que se puede hacer), pero si usted no sabe cómo lidiar con o comprimir el tiempo o la aparición de problemas de calidad, formato SVG imagen, que es que recomiendan usar no sólo el volumen en comparación con otras imágenes de pequeño formato, el más importante es una vista ampliada sin distorsión!
En segundo lugar, el nivel de código de programa
Código nivel de optimización, es una cualidad esencial de programadores, no sólo para mejorar la especificación en el mantenimiento del código, sino también mejoras en el rendimiento (alta calidad del código no puede afectar al rendimiento de su carta!), No mucho pitido sede de Lai Lai ¿Cuáles son algunas maneras:
1. estilo y ubicación del código de secuencia de comandos
(1) Ponga CSS y JS conjunto guión HEAD en el final: esto todos debemos saber aquí que las razones → ① Si el CSS en otro lugar, tal como el cuerpo, el navegador ha sido posible la descarga y el análisis sintáctico CSS ya ha comenzado a presentar una página, lo que llevó a un salto desde la página sin estado CSS CSS a estado, la experiencia del usuario es relativamente pobre. Además, algunos navegadores empiezan a representar páginas después de la descarga es CSS completa, si CSS colocado en la posición más baja hará que el navegador muestre retrasó; ② después HTTP1.1 petición del navegador HTTP es al mismo tiempo, una característica que hace que sea más rápido a los recursos de carga, sin embargo JS script de carga de bloques Shique otros recursos, como antes se ha cargado el guión, que está detrás de las imágenes, el estilo y otras secuencias de comandos en el estado bloqueado hasta después de que el guión ha terminado de cargar empezará a cargarse. Si el guión se coloca posición más adelantada, toda la velocidad de carga de la página se verá afectado lo que afecta la experiencia del usuario. Hay muchas maneras de resolver este problema, y la forma más sencilla y fiable es a la escritura el siguiente movimiento tanto como sea posible, para reducir el impacto de las descargas simultáneas.
2. HTML
(1) el uso racional de HTML5 notas semánticas, y las etiquetas caos anidada, reducen notas inútiles; que se debería hacer con la optimización del rendimiento de front-end ¿Cuál es la relación? Tenga en cuenta que el diseño de la estructura DOM es razonable, se reducirá la velocidad del navegador cuando análisis de HTML DOM árbol (estructura DOM si más complejo, con más pérdidas habrá un mayor rendimiento cuando se atraviesa), el hormigón puede ver este artículo → redibujar el regreso
(2) Dado que la nueva API ofrece almacenamiento web HTML5 es un importante almacenamiento Web, aplicaciones Web convenientes fuera de línea. Además, la nueva API con respecto a la cookie también tiene las ventajas de alta seguridad, alta eficiencia, un espacio más grande. Debido a que cada solicitud podría llevar a la cookie será todavía les consumir lo que el número correspondiente a la solicitud, y la sesión y depósitos de almacenamiento local sólo puede optimizarlo;
3.CSS
(1) En la mente de la mayoría de la gente, el tipo de navegador analiza sensación selectores CSS de izquierda a derecha conducta, por ejemplo, #pic A { color: #444; }un selector de tipo, de izquierda a derecha si se trata de resolver la eficiencia será alto, ya que la primera una selección ID de ámbito ponen definiendo sustancialmente las operaciones de búsqueda, pero en realidad selectores navegador determinación se realiza de derecha a izquierda. A medida que los selectores anteriores, los navegadores deben atravesar para encontrar los antepasados de cada uno de los nodos de una etiqueta, la eficiencia no es como antes tan alto como imaginado; por lo que desde el navegador está analizando CSS, entonces, ¿no deberíamos estar escribiendo estilos CSS cuándo no hay anidación profunda, esta optimización del rendimiento, como se mencionó anteriormente con HTML, CSS árbol DOM se resuelve en el navegador cuando se involucren, escribir un anidados demasiado profundamente (HTML o estructura CSS) siempre dejar que los análisis sintácticos navegador ralentiza;
(2) En la animación, la animación en sí se debe permitir que fluya fuera de los documentos, lo que reduce la página redibujar constantemente reflujo, debido a la animación en sí está en movimiento, si hay flujo del documento, que afectará al lado del diseño, el navegador re esta parte del tamaño del elemento de cálculo y la ubicación involucrados en segundo lugar es para la aceleración de hardware de uso CSS3, lo que permite transformar, la opacidad, los filtros de estas animaciones no causan reflujo redibujado → Sobre estos pueden mirar en este artículo para volver a dibujar el retorno dentro de dicho muy claro
4.Javascript
(1) Reducción de operación nodo DOM:
operaciones DOM debe ser una secuencia de comandos de actuación más resistencia acción de clase, tales como añadir, modificar o elementos de borrado a la operación de recogida de DOM DOM. Si el script contiene necesitará un gran número de operaciones DOM señalar lo siguiente:
a. Colección HTML (HTML colector, información de contenido devuelve es una matriz)
en los document.images guión, document.forms, getElementsByTagName () Devuelve un tipo de colección HTMLCollection son, por lo general, cuando la mayoría usarlo como una matriz para su uso, ya que tiene una propiedad de longitud, se puede utilizar el índice para acceder a cada elemento. Pero en el rendimiento de acceso de la matriz a ser mucho peor, porque esto no es un conjunto estático de resultados, sólo representa una consulta en particular, la consulta es re-ejecuta cada vez que acceda a la colección para actualizar los resultados de la consulta. El llamado "el acceso a la colección" incluye una colección de propiedad de longitud de lectura, elementos de acceso de la colección.
Así que cuando se necesita para atravesar HTML Colección, probarlo y luego el acceso en matrices para mejorar el rendimiento. Si no es así en una matriz, por favor, acceder a ella lo menos posible, por ejemplo, cuando se atraviesa la propiedad de longitud se pueden guardar en un miembro de una variable local y luego utilizar variables locales.
b. reflujo y Repintado
además con el punto anterior, las operaciones DOM también es necesario tener en cuenta el navegador de reflujo y volver a pintar, ya que estos son la necesidad de consumir recursos
c. marcos son etapa DOM virtual como Vue / Reaccionar operación, el bastidor inferior a través de diferentes algoritmos para DIFF DOM antes y después de operación de comparación, que no entra en detalles específicos
(2) datos variables de acceso:
los datos de acceso directamente comprende una cantidad de Javascript (una cadena, una expresión regular), las variables, los atributos de objeto y matriz, y en el que la cantidad de acceso directo a las variables locales es el más rápido, y una serie de propiedades de los objetos la necesidad de un mayor acceso a los gastos generales. Cuando las condiciones siguientes, se recomienda poner los datos en variables locales:
. Una visita a cualquier propiedad del objeto más de una vez
B veces en cualquier miembro de la matriz para el acceso a más de 100 veces.
Además, debe reducir la profundidad del objeto, así como una serie de posibles encontrar.
(3) reducir la cadena de ámbito de encontrar (a este respecto a cuestiones relacionadas con el diseño algunos de los contenidos):
previamente hablado de la cadena de ámbito para encontrar el problema, y esto es un problema particular a la nota en circulación. Por favor, si necesita a las variables de acceso no están bajo el alcance de este ciclo en la memoria caché antes de atravesar las variables de las variables locales y después de atravesar el final de la reescritura de esa variable, lo cual es particularmente importante para las variables globales, debido a que la variable global está en el ámbito la parte superior de la cadena, el número de veces en que la visita es encontrar los más; comparamos estos dos usos ↓
① redacción ineficiente:
// 全局变量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次
globalVar += i;
}
}
② escritura más eficiente:
// 全局变量
var globalVar = 1;
function myCallback(info){
// 局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
// 访问局部变量是最快的
localVar += i;
}
// 本例中只需要访问 2次全局变量
// 在函数中只需要将 globalVar中内容的值赋给localVar
globalVar = localVar;
}
Además, para reducir la cadena de ámbito también debe buscar para reducir el uso de cierres.
concatenación (4) cadena
uso en Javascript signo "+" para concatenar cadenas eficiencia es relativamente bajo, ya que se abrirá nueva memoria y generar una nueva variable de cadena, y luego asignar el resultado a una nueva variable de costura de cada carrera. En contraste enfoque más eficiente es el uso de una gran variedad de unirse método, pronto tendrá que empalmar la cadena en un array llamando a su método se unen para obtener el resultado final. Sin embargo, debido a la utilización de la matriz tiene una cierta sobrecarga, más aún cuando la cuerda cuando sea necesario costura puede considerar el uso de este método, la segunda es la sintaxis de la plantilla perfecta ES6 KO esto mediante prácticas "+" empalme, conveniente y eficiente
(5) Lazy Load Javascript (esto puede ser entendido como cargado en la demanda, tales como la carga asíncrona sintaxis Vue, webpack unión por división de código)
Con marco Javascript popular, más y más sitios se utilizan también de la estructura. Sin embargo, un marco a menudo incluyen una gran cantidad de funciones para lograr estas funciones no son necesarias todas las páginas, si se descarga el guión no requiere la pretensión de ser un desperdicio de recursos - una pérdida de ancho de banda y la ejecución tiempo perdido . La práctica actual son de dos tipos, uno es para los que el tráfico es particularmente pesadas páginas adaptadas una mini versión dedicada del marco, el otro es perezoso carga. La segunda forma es utilizar el YUI, YUI en la aplicación de, el módulo de núcleo inicialmente cargada, otros módulos se pueden usar sólo cuando sea necesario esperar hasta que la carga. El Vue es la sintaxis cargado de forma asíncrona en la configuración de enrutamiento, aplicación de una sola página SPA es muy común
(6) aumento de la utilización de código:
A ¿Cuál es la reutilización de código (cobertura de código).?
Me gustaría decir algo popular, específicamente auto Goole. la cobertura de código hace referencia al documento de la página cargada actualmente cuántos son en realidad utilizando la activación (código de activación que está en verde, y rojo está pendiente código de activación)
b. la forma de ver?
La imagen muestra el amor fantástico hogar del arte cuando se carga mediante el uso de la prueba de demostrar cobertura a cabo, se puede ver en el cuadro de color rojo, el 70% de cobertura de código después de la primera pantalla iQIYI cargado, muy nb, hay más de 55 una buena bonita;
c. cómo optimizar, ¿cómo?
Uno → página actualmente código cargado no se dopa con otras páginas irrelevantes, o la falta de atención y evitar la página por corte y empalme juntos una pluralidad de módulos, cada módulo solicita entonces el mismo recurso, el recurso hará que una solicitud de repetición;
En segundo lugar → código asíncrono, en la lógica y la interacción del usuario, el uso de código de procesamiento asíncrono, el código puede aumentar la utilización, se puede probar por la cobertura, cuando interactúan disparamos con éxito, el código asíncrono correspondiente se ponga código verde, y asíncrona puede mejorar la cobertura, la última palabra ha optimizado caché para el usuario no puede simplemente tener en cuenta este nivel, pero también preocupado por el nivel de utilización del código;
En tercer lugar → recientes pesada Vue3.0 no depurados todavía? No es un socio muy poco entendimiento debe saber Vue3.0 optimizado "sacudir el árbol árbol temblar la" función, esta función puede ser de gran alcance, no puede reconocer automáticamente la página de códigos en uso están temblando, por supuesto, no quiere decir que debido a esto por lo que todo el mundo esto no quiere actualizar el Vue de lo contrario continuar la tendencia, después de todo, el taro recién horneado está muy caliente, se necesita tiempo; webpack para configurar esto si no se utiliza el desarrollo Vue3.0, también se puede lograr mediante Árbol-sacudida de la función esto puede referirse a → documentos oficiales webpack
En tercer lugar, la fuente de la fuente de solicitud en respuesta al nivel de los más cercanos
El nombre es un lío he jugado, por lo que no les importa. Sólo tienes que saber lo que se entiende por el siguiente en la línea;
(1) CDN Aceleración: Este servicio proveedores por lo general se han especializado, sólo tienen que colocar el dinero en la línea, el principal es lograr el origen de la solicitud (por ejemplo, un usuario en el proyecto en Guangzhou, datos de la solicitud, CDN se resuelve para obtener esta ip solicitud de dirección) después de la solicitud de transmisión, en respuesta a una fuente (solicitud de recepción de acuerdo con la CDN desplegado realizó más adelante dirección IP rápidamente asignar desde el servidor más cercano, y devuelve los datos correspondientes correspondientes al cliente) devuelve los datos de respuesta;
epílogo
Este artículo de los tres aspectos de las diversas formas de optimizar el front-end para hacer un resumen, estos métodos son, básicamente, los desarrolladores de aplicaciones para usuario pueden aprender y practicar en el proceso de desarrollo, el deseo de ayudar a usted; por supuesto también es posible optimizar el método Sí, pero no he mencionado ¿o no saben, por lo que la cortesía de los más brillantes hermano mayor cifra a cabo, reabastecimiento de combustible ~
Aviso: Este artículo es un artículo blogger original, siga el CC 4.0 BY-SA acuerdo de derecho de autor, reproduce, por favor adjuntar el enlace de la fuente original y esta declaración.
Este enlace: https: //blog.csdn.net/Umbrella_Um/article/details/102546329
