Diccionario png
Base64 es un uso común para datos binarios almacenados y transmitidos a través de la red. Un byte de Base64 solo puede representar 64 situaciones. Los primeros dos bits de cada byte en el formato de codificación solo pueden ser 0 y los seis bits restantes se utilizan para representar el contenido.
Después de ver esto, creo que todos pueden darse cuenta de que este formato de codificación no puede aprovechar al máximo los recursos de almacenamiento y es menos eficiente. Entonces, ¿por qué se ha convertido en una frase común en Internet?
De hecho, Base64 se utilizó por primera vez en el protocolo de transferencia de correo. El protocolo de transferencia de correo en ese momento solo admitía la transmisión de caracteres ASCII y utilizaba códigos ASCII para representar todos los caracteres, números y algunos símbolos en inglés. Hay un problema aquí. Si solo se transmiten números en inglés en el correo electrónico, se puede admitir ASCII directamente. Sin embargo, si desea transferir imágenes, videos y otros recursos en el archivo, aparecerán números que no están en inglés cuando estos recursos se conviertan a ASCII. Además, hay muchos caracteres de control en los correos electrónicos que se convertirán en caracteres invisibles. Los caracteres que no están en inglés y los caracteres de control son propensos a errores durante la transmisión, lo que afecta la correcta transmisión de los correos electrónicos. Para ello, nació una nueva regla de codificación, que trata el binario como un grupo de 3 bytes y luego convierte cada grupo de 3 bytes (24 bits) en 4 de 6 bits, cada uno de 6 bits, de acuerdo con una tabla de búsqueda correspondiente. a un símbolo ASCII. Esta es Base64.
Base64 divide datos de bytes de 8 bits en fragmentos binarios de 6 bits. Cada unidad de 6 bits corresponde a un carácter en la tabla de índice Base64. Para dar un ejemplo simple, el código ASCII de M en la imagen siguiente es 77. Después de la conversión binaria, el valor correspondiente de los primeros seis dígitos binarios es 19, que es T en el diccionario Base64.
Por supuesto, aquí surgirá un problema. Si los datos binarios a codificar no son múltiplos de 3, sobrarán uno o dos bytes. Por esta razón, Base64 usa el valor de 000000 bytes al final para la complementación, de modo que el número de bytes se pueda dividir uniformemente entre 3. El complemento está representado por = El número de = puede indicar cuántos bytes se complementan, cuál. se agregará automáticamente al decodificar. En general, la cantidad de caracteres después de la codificación Base64 aumentó aproximadamente un 33% en comparación con antes de la codificación.
También mencionamos anteriormente que la codificación Base64 es la principal forma en que los sitios web cargan imágenes pequeñas. Entonces, ¿cómo procesa Base64 las imágenes?
Todos sabemos que las imágenes se usan generalmente en páginas web en forma de etiquetas img, y el atributo src de la etiqueta img especificará un recurso en el servidor remoto. Cuando se carga una página web en el navegador, el navegador envía una solicitud de extracción de recursos para cada recurso externo al servidor. Sin embargo, esto consumirá muchos recursos de la red y, dado que la mayoría de los navegadores tienen límites en la cantidad de solicitudes simultáneas, si su página web tiene demasiadas solicitudes externas integradas, es fácil experimentar una carga lenta de la página.
La codificación Base64 puede incrustar imágenes directamente en la página en forma de cadenas a través de la tecnología de URL de datos integrada con HTML. De esta forma evitas solicitudes de recursos externos al cargar.
¿Por qué elegir la URL de datos?
En cuanto a por qué se eligió la tecnología de URL de datos, en comparación con el método tradicional de referencia de recursos externos, tiene las siguientes ventajas:
De esta manera, la codificación Base64 puede optimizar el front-end Más rápido y más cómodamente. Varios recursos de imágenes. Veamos un ejemplo concreto:
Como puede ver claramente, la codificación Base64 codifica los datos de la imagen en una cadena y usa esa cadena en lugar de la dirección de la imagen. Aunque a primera vista no hay nada relacionado con la imagen, no hay duda de que lo que finalmente se presenta es un efecto de imagen completo.
Por supuesto, codificar imágenes Base64 utilizando URL de datos no es perfecto. Tiene dos deficiencias que no se pueden ignorar:
El navegador no puede almacenarlo en caché, lo que significa que el recurso es necesario. que se solicite nuevamente cada vez que se acceda, lo que ejerce mucha presión sobre el servidor. ¿Hay alguna forma de poner estos datos en la memoria caché del navegador?
Consejos para acelerar la carga
De hecho, las imágenes de fondo de la mayoría de los sitios web son imágenes pequeñas con sólo unos pocos píxeles de ancho y alto, agrupadas en imágenes de fondo.
Por lo general, guardamos imágenes pequeñas en formato GIF o PNG y luego hacemos referencia a la dirección de la imagen en el atributo de imagen de fondo de CSS. Pero al navegador en sí no le importa lo que esté escrito en la URL, solo necesita obtener los datos requeridos a través de ella.
Por lo tanto, podemos usar archivos de estilo CSS para almacenar imágenes en forma de URL de datos en hojas de estilo CSS. De esta manera, el navegador almacenará en caché los archivos e imágenes CSS, lo que puede mejorar aún más la eficiencia de la carga de la página.
La imagen de arriba es un caso de uso simple. Esto no solo evita la situación en la que la imagen de fondo genera una solicitud HTTP separada, sino que también hace que el navegador almacene en caché la imagen de fondo y los archivos CSS, evitando la situación de cargar la imagen de fondo cada vez que se abre la página web, haciendo que la imagen de fondo se cargue cada vez que se abre la página web. la experiencia de navegación del usuario sea más rápida y fluida.
La combinación de la tecnología de URL de fecha y la codificación Base64 puede reducir eficazmente las solicitudes HTTP y brindar a los usuarios una mejor experiencia de acceso. En realidad, este es un pequeño truco en nuestro proceso de desarrollo. Espero que pueda brindarle ayuda después de leerlo.