Páginas web

¿Cuál es el significado de DOM en JS? Lo vemos, casi siempre en los análisis de velocidad de un sitio web, en portales como page speed Insights o Gtmetrix por ejemplo. Personalmente como Consultor SEO me enfrento de forma recurrente a este concepto.

Bueno, entonces la idea es poner las cosas lo más sencillas posibles. JavaScript: modelo de objetos de documento o DOM. Cada página web reside dentro de una ventana del navegador que puede considerarse como un objeto.

Un objeto Document representa el documento HTML que se muestra en esa ventana. El objeto Documento tiene varias propiedades que se refieren a otros objetos que permiten el acceso y la modificación del contenido del documento. La forma en que se accede y modifica el contenido de un documento se denomina Modelo de objeto de documento , o DOM .

Los objetos están organizados en una jerarquía. Esta estructura jerárquica se aplica a la organización de objetos en un documento web.

Objeto de ventana : parte superior de la jerarquía. Es el elemento más externo de la jerarquía de objetos.

Objeto de documento : cada documento HTML que se carga en una ventana se convierte en un objeto de documento. El documento contiene el contenido de la página.

Objeto de formulario : todo lo que se incluye en las etiquetas

…

establece el objeto de formulario.

Elementos de control de formulario: el objeto de formulario contiene todos los elementos definidos para ese objeto, como campos de texto, botones, botones de opción y casillas de verificación.

Existen varios DOM en existencia.

Las siguientes secciones explican cada uno de estos DOM en detalle y describen cómo puede usarlos para acceder y modificar el contenido del documento.

El DOM heredado : este es el modelo que se introdujo en las primeras versiones del lenguaje JavaScript. Es compatible con todos los navegadores, pero permite el acceso solo a ciertas partes clave de los documentos, como formularios, elementos de formulario e imágenes.

El W3C DOM : este modelo de objeto de documento permite el acceso y la modificación de todo el contenido del documento y está estandarizado por el World Wide Web Consortium (W3C). Este modelo es compatible con casi todos los navegadores modernos.

El DOM de IE4 : este modelo de objeto de documento se introdujo en la Versión 4 del navegador Internet Explorer de Microsoft. IE 5 y versiones posteriores incluyen soporte para la mayoría de las funciones básicas de W3C DOM.

Leer también:Evite un tamaño de DOM excesivo

Cómo usar JPEG 2000 (JP2) para imágenes más rápidas en iPhone y Safari.Las imágenes ralentizan el rendimiento de carga de páginas de muchos sitios web. Las herramientas de auditoría como las de Google pueden decirle rápidamente cuántos segundos puede ahorrar optimizando sus imágenes. Cuando realiza entregas en computadoras de escritorio o dispositivos Android con el navegador Chrome, una solución rápida es convertir sus imágenes a WebP. Esto puede ahorrar hasta un 80% en la carga de su imagen.

Acelerar a los usuarios de Apple Safari

Pero, ¿qué pasa con los iPhones o iPads de Apple o cualquier computadora portátil con navegador Safari? Para muchas empresas u organizaciones, los dispositivos Apple pueden representar más del 50% de su tráfico. Desafortunadamente, Apple Safari no es compatible con WebP. Sin embargo, se admite un formato de archivo de imagen poco conocido pero potente llamado JPEG 2000 (imagen mimetype / jp2) desde Safari 5 e iOS 5 con algunas excepciones. El truco es identificar a los usuarios de Safari y servir rápidamente las imágenes en formato JPEG2000.

¿Qué es JPEG 2000?

JPEG2000 es un estándar de imagen creado en el año 2000. El Joint Photographic Experts Group (JPEG) pretendía que el nuevo formato se hiciera cargo del estándar JPEG aún más antiguo creado en 1992. Hasta la fecha, su adopción es limitada.

El estándar realmente se ha popularizado en industrias donde el archivo digital es importante. JPEG2000 es el formato preferido para almacenar imágenes satelitales, rayos X, imágenes arquitectónicas, arte, etc., gracias a su mayor profundidad de bits, compresión sin pérdidas y compresión flexible.

En el espacio web, el navegador Apple Safari es compatible con JPEG2000. Su efectividad en la optimización de la imagen es impresionante. Si observa millones de imágenes originales diferentes, si una cambia el tamaño, comprime y usa el formato de archivo JPEG 2000, puede ahorrar un promedio del 59% de la carga útil del archivo.

Cómo servir a los usuarios de Apple Safari con imágenes receptivas

Las técnicas de imagen receptiva se pueden utilizar para optimizar las imágenes para los usuarios de Safari. Si bien hay formas de identificar Safari, los desarrolladores deberán convertir de manera proactiva las imágenes al formato JPEG 2000. Esto aumenta la complejidad del flujo de trabajo, particularmente para sitios con muchas imágenes que se actualizan continuamente.

Las imágenes receptivas, tal como se definen en el Grupo de trabajo del W3C, son marcas que permiten al navegador solicitar diferentes URL de imágenes en respuesta a diferentes condiciones ambientales. Por ejemplo, una pantalla de escritorio presenta condiciones ambientales muy diferentes a las de un teléfono inteligente o tableta. Un navegador debe poder responder a estas condiciones y mostrar dinámicamente una imagen óptima.

Estas condiciones ambientales generalmente se expresan al navegador a través de las funciones de medios CSS. Algunas características comunes de los medios son la relación de píxeles del dispositivo (DPR) y el ancho máximo de la pantalla.

Para lograr sus objetivos, el grupo de trabajo introdujo varios nuevos elementos y atributos de marcado HTML para ayudar con las imágenes receptivas. Estos incluyen agregar los tamaños y atributos al elemento . El grupo de trabajo también agregó un nuevo elemento .

Para JPEG 2000, puede usar el elemento de imagen para implementar el cambio de formato de archivo de imagen. El navegador evaluará las fuentes y sus tipos en orden secuencial. Por ejemplo, si Safari encuentra un tipo de próxima generación que admite (por ejemplo, jp2), seleccionará ese srcset. De lo contrario, se establecerá de manera predeterminada en la imagen especificada en el img src. En este ejemplo, es un png.

<picture>
  <source srcset="logo.webp" type="image/webp">
  <source srcset="logo.jp2" type="image/jp2">
  <img src="logo.png" alt="logo">
</picture>

Además de este nuevo código, el desarrollador detrás de escena necesitará generar, almacenar y administrar las variantes de próxima generación de la imagen original. Y a medida que comienza a agregar funcionalidad de dirección de arte, resolución y tamaño de imagen a las imágenes receptivas, la complejidad del código comienza a crecer exponencialmente.

Leer también:

¿Por qué debemos empezar a pensar en formatos de imagen de próxima generación? El arte pasado por alto de la optimización de imágenes.

Leer más