JavaScript-Turbo: Head.js acelera su sitio web

JavaScript-Turbo: Head.js acelera su sitio web

Los sitios web complejos no funcionarían bien sin JavaScript. A menudo, hay varios scripts que residen en el encabezado de su documento HTML. Cuanto más inserte, más lento será su sitio web, potencialmente. Head.js es una herramienta de JavaScript que se llama a sí misma el único script que necesita. Lo hemos puesto a prueba y descubrimos que Head.js realmente puede aumentar el rendimiento en sitios web con varios scripts. Cuantas más secuencias de comandos llame en la cabeza, mayor será el efecto que Head.js puede proporcionar.


cabeza.js

Cómo incrustar y usar Head.js

Evidentemente lo primero que tendrás que hacer es incrustar cabeza.js en el encabezado de su documento HTML. Configuración de la variable head_conf puede establecer varias opciones necesarias para algunas de las características especiales:

<script>
  var head_conf = { ... }
</script>

<script src="https://www.noupe.com/js/head.min.js"></script>

Cargando varios JavaScripts a la vez con Head.js

La función principal de Head.js es la capacidad de cargar varios scripts de una sola vez. En lugar de tener que buscar cada secuencia de comandos individualmente, Head.js se hace cargo de esta tarea de esta manera:

head.js("file1.js", "file2.js", "file3.js");

Mientras que los archivos a través del elemento script generalmente se cargan uno tras otro, Head.js se encarga de cargar en paralelo. Es fácil imaginar que esta estrategia conduce a una carga más rápida de hojas de estilo e imágenes, asegurando que toda la página se sienta mucho más rápida.

Navegador y detector de funciones para CSS

Especialmente el uso de CSS3 no está exento de problemas ya que no todos los navegadores soportan el próximo estándar. Head.js viene con clases especiales para la definición de estilos para navegadores individuales:

.webkit p {
  color: red;
}

El ejemplo anterior muestra el contenido de todas las etiquetas p en rojo, pero solo mientras se ven a través de los ojos de un navegador webkit. Puede definir explícitamente estilos para navegadores que admitan ciertas propiedades de CSS3 o puede definir estilos para navegadores que no admitan ciertas propiedades:

.borderimage div {
  border-image: url("border.png") 25% repeat;
}

-no-borderimage div {
  border: 1px solid green;
}

En este ejemplo equipamos elementos div con la propiedad border-image en navegadores que lo soporten (.borderimage). Todos los navegadores no compatibles (.no-borderimage) simplemente muestra un marco verde alrededor del elemento. Head.js tiene clases correspondientes para cada propiedad CSS3 que existe.

Cómo usar CSS3 en diferentes puntos de interrupción con Head.js

Otra característica de Head.js es la posibilidad de definir hojas de estilo correspondientes a diferentes resoluciones. También podría hacerlo mediante el uso de consultas de medios, pero echemos un vistazo:

.lt-1024 p {
  font-size: 10px;
}

Si la resolución es inferior a 1024 píxeles, el tamaño de fuente se establece en 10 puntos. Las resoluciones a responder se definen a través de la variable head_conf:

var head_conf = { screens: [800, 1024] };

HTML5 en el antiguo Internet Explorer

Los navegadores antiguos, sobre todo las versiones anteriores de Internet Explorer, ignoran elementos HTML5 como SECCIÓN, ARTÍCULO y similares. Head.js se asegura de que incluso los navegadores antiguos presenten estos elementos correctamente. Esto es más o menos simple ya que los elementos son contenedores habituales como divs. Por lo tanto, Head.js solo tiene que asegurarse de que los navegadores los interpreten según lo previsto.

Conclusión: Eche un vistazo a fondo cabeza.js. Vale la pena. Hay más características para explorar.

(dpe)

#JavaScriptTurbo #Headjs #acelera #sitio #web

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *