Cuando me meto de lleno en un proyecto, siempre intento experimentar / aprender algo nuevo y reducir el número de chapuzas de mi programación.
Una de las pegas de GoTube, es el tiempo que tienes que esperar a que se cargue todo, para poder realizar una búsqueda, os explico el experimento que he llevado a cabo.
Antes:
HTML:
<html>
<head>
<script type="text/javascript" src="js/totjs.php"></script>
</head>
<body>
<!--contenido de la página-->
<script type="text/javascript" src="API_DE_GOOGLE_MAPS"></script>
</body>
</html>
Javascript:
La aplicación no funciona hasta que se ha cargado todo (window.onload)
Ahora:
Para reducir el tiempo de carga, he decidido separar los javascripts en 2 grupos:
- Imprescindibles para realizar la búsqueda
- Necesarios una vez terminada la búsqueda, ej. GreyBox
HTML:
<html>
<head>
<script type="text/javascript" src="js/totjs.php"></script>
</head>
<body>
<!--contenido de la página-->
<script type="text/javascript" src="js/totjs2.php"></script>
<script type="text/javascript" src="API_DE_GOOGLE_MAPS"></script>
</body>
</html>
Javascript:
Aprovechando que he separado los javascripts, los eventos que tenia en el window.onload, los he metido en el fichero totsjs2.php
De esta manera no hace falta esperar a que se cargue todo, ya que los eventos se ejecutan al cargar el fichero totsjs2.php
Experimento en PHP:
Seguramente te habrás preguntado:
¿Por qué has enlazado el javascript a un fichero .php en vez de un .js de toda la vida?
Todo empezó, cuando leí un articulo en uLoVe-TeCh, en el que habla de aumentar la rapidez del blog, reduciendo el número de llamadas HTTP, me puse a buscar y encontré este tutorial (ahora se ve mal, pero antes se podía leer sin tener que seleccionar el texto)
Estos son los motivos:
- Agrupar todos los javascripts para reducir el número de llamadas HTTP
- Comprimir el resultado en gzip
- Poder continuar teniendo los javascript en ficheros separados (para tenerlo organizado)
El código fuente: (de code font)
-
$offset = 60 * 60 * 24 * 3;
-
-
else
-
-
También se puede utilizar para cargar todas las hojas de estilo CSS, pero para eso tienes que cambiar:
Content-type: text/javascript
por:
Content-Type: text/css
Resultados en firebug y borrando la cache en cada prueba:
Sin utilizar el script PHP y llamando a los ficheros javascript y css, por separado:
37 requests - 251 KB - 10.63s
Utilizando el script PHP:
26 requests - 170 KB - 6.61s
La diferencia:
11 requests - 81 KB - 4.02s
Puede que estos números sean insignificantes, pero comprueba GoTube tu mismo y me comentas (eso si, pulsa un par de veces F5, para refrescar la cache)
La parte mala:
Como se tiene que ejecutar código PHP, la CPU del servidor tiene que trabajar un poco más
La parte buena:
Reduciendo la carga, también se disminuie el uso de ancho de banda (bandwidth)
Muy interesante. Tomo buena nota de ello y no conocía este método de carga de los javascripts. La verdad es que la diferencia de tiempo de carga es bastante significativa.
Y sigues mejorando tu buscador, excelente método para disminuir el tiempo de carga, hace no mucho vi una clase php con la que podías hacer lo que tu lograste.
Saludos
Gracias por publicar el post y poner la fuente
@uLoVe-TeCh.com: gracias a ti, por publicar posts tan interesantes
Si guradaras el javascript en fichero y usaras el mod_deflate te ahorrarias de generarlo cada vez, ahorrando cpu.