¡Conocimiento de codificación Base64, una vez que lo obtengas!
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 6 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 un uso 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 recursos como imágenes y videos en un archivo, estos recursos tendrán números que no están en inglés cuando se conviertan a códigos ASCII. Además, hay muchos caracteres de control en el correo electrónico 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. Por esta razón nació una nueva regla de codificación, que utiliza el binario como un grupo de 3 bytes, y luego convierte cada grupo de 3 bytes (24 bits) en cuatro de 6 bits. Cada 6 bits corresponde a un ASCII. el símbolo de la tabla de búsqueda. 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 complementarlo, de modo que el número de bytes se pueda dividir uniformemente entre 3. El complemento está representado por =, y el número de = puede indicar cuántos bytes se complementan. , que se eliminan automáticamente durante la decodificación. En general, la cantidad de caracteres aumentó en aproximadamente 33 después de la codificación Base64 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 utilizan normalmente en páginas web en forma de etiquetas img. El atributo src de la etiqueta img especifica un recurso en un servidor remoto. Cuando se carga una página web en el navegador, el navegador envía una solicitud de extracción de recursos al servidor para cada recurso externo. 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 incrustadas, es fácil que la página se cargue lentamente.
La codificación Base64 puede incrustar imágenes directamente en la página en forma de cadenas a través de tecnología de URL de datos, integrándolas 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, tiene las siguientes ventajas en comparación con los métodos tradicionales de referencia de recursos externos:
De esta manera, la codificación Base64 puede optimizar varios recursos de imágenes en el frente finalizar de forma más rápida y cómoda. Veamos un ejemplo específico:
Se puede ver claramente que la codificación Base64 codifica los datos de una imagen en una cadena y usa esta cadena en lugar de la dirección de la imagen. Aunque a primera vista no hay contenido relacionado con la imagen, no hay duda de que lo que genera al final 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 es necesario. volver a codificarse cada vez que se accede a él. La solicitud de recursos ejerce mucha presión sobre el servidor. ¿Existe alguna forma de colocar 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 largo, 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 CSS y las imágenes, 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 proporcionar 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.