Hoy en día, cada vez más sitios web usan imágenes para mejorar la experiencia de navegación de los usuarios, y estas imágenes generalmente se almacenan y cargan en forma de Base64. Por lo tanto, todos los desarrolladores deben estar familiarizados con Base64, entonces, ¿sabe qué es Base64, por qué usar Base64 y las ventajas y desventajas de Base64?
¿Qué es Base64?
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 casos, y los primeros dos bits de cada byte en el formato de codificación solo pueden ser 0, y los 6 bits restantes se usan para representar el contenido.
Al ver esto, creo que todos también pueden darse cuenta de que este formato de codificación no puede hacer un uso completo de los recursos de almacenamiento y es menos eficiente. Entonces, ¿por qué sigue siendo un uso común en la red?
De hecho, Base64 se utilizó por primera vez en el protocolo de transferencia de correo. En ese momento, el protocolo de transferencia de correo solo admitía la transmisión de caracteres ASCII y usaba códigos ASCII para representar todos los caracteres, números y algunos símbolos en inglés. Aquí hay un problema, si solo se transmiten caracteres alfanuméricos en el correo, entonces ASCII puede admitirse directamente. Sin embargo, si desea transferir imágenes, videos y otros recursos en el archivo, habrá números que no estén en inglés cuando estos recursos se conviertan a ASCII. Y también hay muchos personajes de control en el correo, que a su vez se convierten en personajes 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 transmisión correcta del correo. Por esta razón, nació una nueva regla de codificación: el binario se agrupa por 3 bytes, y luego los 3 bytes (24 bits) de cada grupo se convierten en 4 6 bits, y cada 6 bits se basan en la tabla de búsqueda. a un símbolo ASCII, esto es Base64.
Base64 divide los datos de bytes de 8 bits en segmentos binarios de 6 bits. Cada unidad de 6 bits corresponde a un carácter en la tabla de índice Base64. Como ejemplo simple, el código ASCII de M en la figura a continuación es 77, y los primeros seis bits binarios después de la conversión a binario corresponden a 19, que es T en el diccionario Base64.
Por supuesto, aquí también habrá un problema: si los datos binarios a codificar no son múltiplos de 3, quedarán uno o dos bytes. Por esta razón, Base64 usa el valor de 000000 bytes para compensar al final, de modo que la cantidad de bytes puede ser divisible por 3, el complemento se representa por = y la cantidad de = puede indicar cuántos bytes se agregan, y se elimina automáticamente durante la decodificación. En general, los caracteres después de la codificación Base64 aumentaron alrededor de un 33 % en comparación con antes de la codificación.
Codificación Base64 de la imagen
Anteriormente también mencionamos que la codificación Base64 es la forma principal de cargar imágenes pequeñas en los sitios web Entonces, ¿cómo procesa exactamente las imágenes Base64?
Todos sabemos que el uso de imágenes en las páginas web suele tener la forma de una etiqueta img, y el atributo src de la etiqueta img especifica un recurso en un servidor remoto. Cuando la página web se carga en el navegador, el navegador envía una solicitud de extracción al servidor para cada recurso externo. Pero esto consume muchos recursos de la red, y debido a que la mayoría de los navegadores tienen un límite en la cantidad de solicitudes simultáneas, si se incrustan demasiadas solicitudes externas en su página web, es fácil que la página se cargue demasiado lentamente.
Y la codificación Base64 puede hacer que las imágenes se incrusten directamente en la página en forma de cadenas a través de la tecnología URL de datos y se conviertan en una con HTML. Esto evita solicitudes de recursos externos al cargar
Por qué elegir URL de datos
En cuanto a por qué se elige la tecnología URL de datos, tiene las siguientes ventajas en comparación con el método tradicional de referencia de recursos externos:
-
reducir las solicitudes HTTP;
-
Evite problemas entre dominios;
-
Se puede usar como una imagen separada, como la reutilización de la imagen de fondo, etc.
De esta forma, la codificación Base64 puede optimizar de manera más rápida y conveniente varios recursos de imágenes frontales. Veamos un ejemplo concreto:
Se puede ver claramente que la codificación Base64 codifica los datos de una imagen en una cadena y usa la cadena en lugar de la dirección de la imagen. Aunque a primera vista no parece tener ningún contenido relacionado con la imagen, lo que finalmente muestra es, sin duda, una imagen completa.
Por supuesto, el uso de URL de datos para la codificación de imágenes Base64 no es perfecto y tiene dos desventajas que no se pueden ignorar:
-
El volumen de datos codificados en Base64 suele ser 4/3 del volumen de datos original, es decir, la imagen en forma de URL de datos será 1/3 más grande que la imagen en formato binario.
-
Las imágenes en forma de URL de datos no serán almacenadas en caché por el navegador
Los navegadores no pueden almacenar en caché, lo que significa que los recursos deben volver a solicitarse cada vez que se accede a ellos, lo que ejerce mucha presión sobre el servidor. ¿Hay alguna manera de poner estos datos en la memoria caché del navegador también?
Consejos para acelerar la carga
De hecho, la imagen de fondo de la mayoría de los sitios web se compone de una imagen pequeña con un ancho y una altura de solo unos pocos píxeles, y está dividida en mosaicos en una imagen de fondo. Por lo general, guardamos la imagen pequeña en formato GIF o PNG, y luego nos referimos a la dirección de la imagen en la propiedad de imagen de fondo de CSS. Pero al navegador en sí mismo no le importa lo que está escrito en la URL, solo necesita obtener los datos requeridos a través de ella. Entonces, 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 carga de la página.
La imagen de arriba es un caso de uso simple. De esta manera, no solo evita que la imagen de fondo genere una solicitud HTTP por sí misma, sino que también permite que el navegador almacene en caché la imagen de fondo y el archivo CSS, evitando que se cargue cada vez que se abre la página web. está abierto La situación de la imagen de fondo hace que 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 efectivamente las solicitudes HTTP y mejorar la experiencia de acceso del usuario. En realidad, esta es una pequeña habilidad en nuestro proceso de desarrollo, y espero que pueda brindarle alguna ayuda después de leerla.
Lectura recomendada
Cómo superar estas dificultades técnicas bajo la ola de juegos en el extranjero
¿Cómo resolver los dos principales problemas técnicos del comercio electrónico transfronterizo?