Evitar cargar Javascript .js ya cargados

[myles_ken]

Hola a todos,

Quería hacer una consulta a la comunidad (esta vez lado cliente) a ver si me podéis echar una mano.

Estoy construyendo una web bastante... "pesada" a nivel javascript. Se requiere un alto grado de representación gráfica y para ello cargo algunas librerías JQuery y algunos .js que son necesarios para esas representaciones. Además, algún .js con funciones propias (recargar página, cambio de posición imágenes...) y un .js del slider principal. En resumen, cargo aproximadamente 10 .js. He intentado minimzarlos, pero no hay forma posible de hacerlo (de hecho he reducido de 12 a 10).
Decir que todos ellos en formato min para reducir peso y aumentar agilidad.

Bueno, pues tengo dos problemas. Empezaré por el primero. Esa página, llamemosla madre, tiene 4 iframes. Esos iframes contienen 4 páginas que a su vez contienen otros archivos .js, de hecho, alguno de ellos (prácticamente todos) son los mismos que ha cargado la página madre. En concreto, cada iframe, carga 4 .js más. Tenemos algo así:

Página madre:

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
<script src="script4.js">
<script src="script5.js">
<script src="script6.js">
<script src="script7.js">
<script src="script8.js">
<script src="script9.js">
<script src="script10.js">

Iframe del 1 al 4 (cada uno de ellos):

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
<script src="script4.js">

Cuando utilizo cualquier debuggeador de carga, por ejemplo he probado "Page Speed" de Chrome, de dice que tiene que procesar casi 4 megas de Javascript, una penalización muy alta.
Y claro, pensé: ¿para qué cargar un script que ya ha cargado la madre si lo debe tener el servidor?
El problema es que no puedo "prescindir" de las declaraciones de los .js dentro de cada iframe porque de ese modo, no me funcionan la partes que tienen que funcionar (slider de imágenes por ejemplo o representaciones gráficas).

¿Existe alguna manera de evitar cargar un .js que ya tiene cargado el servidor y que se pueda utilizar en "otra página", en este caso de un iframe?


En segundo lugar... "Page Speed" me ha comentado: "Aplazar la carga del JavaScript"... Bueno, he leído bastante al respecto y parece un tema interesante y con mucha comunidad. De momento he sacado en claro que, pese a que siempre he hecho lo contrario, las declaraciones del los scripts debo hacerlos antes de cerrar el body.
En cambio, tampoco creo que pueda optimizar mucho más esa carga de subida de los .js porque los necesito todos... de modo que la pregunta es:

Creo que Firefox (no sé si Chrome y Safari también) hacen una carga en paralelo de los .js...¿además de eso hay alguna manera de ganar eficiencia SI SIEMPRE TENGO QUE CARGAR TODOS LOS .JS?

Muchas gracias y siento por la parrafada que me acabo de pegar

Un saludo,

[chuidiang]

Hola:

Si pones una URL absoluta para cada js y es la misma en todos los iFrame (o cualquier otro documento), lo normal es que el navegador guarde en caché el fichero javascript y así no lo cargue cada vez. Esa es la base por la que google developer hospeda los javascript más usados https://developers.google.com/speed/libraries/ . Si los cargas de ahí (de una URL siempre igual), lo más probable es que el navegador los tenga en caché y no los decargue varias veces. No te quiero decir que uses js de google developers, sino que uses el mismo concepto, es decir, usar una URL absoluta y fija para cada fichero js, independientemente de la url de la página que lo cargue.

Otra opción, algo más elaborada, es que cada js "marque" que está cargada y si no lo está, cargue el js correspondiente, añadiendo el tag script. Por ejemplo, para ver si está jquery puedes hacer algo como

Código javascript:

if (! window.jQuery){
     // Añadir tag <script src="...jquery"...>
}
 

De igual forma, con el resto de tus js. Esto es más elaborado y quizás te de problemas. Si el contenido del iframe tiene una url distinta de la de otro iframe o de la página principal, es posible que no puedan verse los códigos javascript de uno en otro.

Se bueno.

[emprear]

Si cacheas correctamente tus js, no se vuelve a cargar desde el server, no le hagas caso a rajatablas al Page Speed, obviamente, habría que analizar si tu aplicación requiere tanto js, pero eso ya es otra historia

Saludos

[Tecna]

Buenas,

Desde luego que el escenario que planteas es complicado y habría que verlo con detalle pero es claramente mejorable. La mayoría de los navegadores bloquean la carga del resto de recursos de la página mientras se cargan y ejecutan los scripts si se cargan de la forma habitual ya que estos pueden modificar el DOM y los estilos de la página, por eso conviene usar alguna de las técnicas para hacer una carga asíncrona y selectiva de los script. En función de si la carga se hace desde el mismo dominio o no, de si se tiene acceso al codigo y de si la carga de unos script dependen de otros puede que haya técnicas que no sean aplicables, pero hay multitud de ellas y bien combinadas pueden dar buenos resultados, desde poner un timer con setTimeout a un XHR gestionado o la técnica que comento hace poco @emprear en otro post de los script degradados.

Por otro lado el uso de iframes también es muy costoso y más si se crean dinamicamente. Además bloquean el evento onload y consumen conexiones con el servidor porque no aumenta el número de descargas paralelas aunque se trate de otro documento. Si no es posible sustituirlo por otro elemento se puede cargar el src mediante javascript retrasando su carga después de onload.

[myles_ken]

Hola a todos y muchas gracias,

No pude responder por tema de horarios nocturnos. Agradezco todas las respuestas.

@chuidiang

Efectivamente, cada iframe apunta a una web que puede cambiar. Las URL de cada iframe no son estáticas, de hecho, cuando cargo la página, no sé qué me voy a encontrar. En ese sentido, utilizar absolutas para cargar los .js SÍ que es algo que puedo hacer y sobre lo que no había caído.
Respecto a cargar los .js desde Google... pues es lo de siempre, te "enseñan" o "te enseñas" que lo ideal es almacenar los documentos en tu servidor por lo que pueda pasar pero... si se cae google ¿se acaba el mundo? Yo, normalmente cargo del servidor, de modo que probaré con la absoluta y de no ofrecer mejora, probaré cargando los JQuery de Google Developers.

@emprear

Es lo primero que traté de solucionar, el tema del uso adecuado de .js. Bajo mi punto de vista, considero que SÍ es necesario. He utilizado los mínimos posibles. Pensemos que tengo que cargar una librería de representación gráfica (2 .js), con el JQuery correspondiente, y otro más para el slider JQuery. Son 4 .js por iframe que son irreductibles. He optado por versiones MIN. Lo único que me queda por probar en este sentido es usar compresiones GZIP, pero quería atacar primero a la "eficiencia software" antes de meterle mano al server.
Respecto al cacheo... lo pensé, de hecho es algo que no me supone problemas de cara a mi web. Estudiaré el tema sobre cachear los .js.

@Tecna

Sin duda, sé que la aplicación se puede hacer de manera mucho más eficiente. Si bien es cierto que sí que quiero, y he notado, que el peso de cargar .js me penaliza de manera... innecesaria, el tema de los iframe sí lo considero necesario (por la arquitectura misma de la web) y estoy dispuesto a asumir ese impacto.
Sin duda consultaré los consejos de @emprear sobre script degradados.

En este sentido, tengo algo más de material y veré si puedo mejorar la experiencia de usuario gracias a vuestros consejos.
Cualquier ayuda extra por supuesto será bien recibida!!!

Un saludo a todos,

[emprear]

Si tu server usa apache , conseguir la compresión gzip y el cacheo es relativamente sencillo via .htaccess, de tener que meter mano en el server te paso alguna referencia si necesitás. Incluso, si es factible, e integrás varios js en uno, la compresión te va a resultar mucho más efectiva.

Saludos

[myles_ken]

Hola @emprear,

Llevo toda la mañana con el tema del server. He podido averiguar lo que comentas del .htaccess pero la pega es que uso windows en este proyecto. De todos modos, el tema del cacheo está "solucionado" (a falta de ver cúan efectivo resulta) ya que en el server he configurado "Almacenamiento en caché de resultados". Por muy iniciado que parezca, he calculado los tiempos de cacheo que considero oportunos, pero creo que voy a tener que hacer un ejercicio empirico de cacheo.

Lo que más me ha costado encontrar es el tema de la compresión GZIP, que de igual modo he visto que en un server Linux resulta "sencillo" pero en windows no lo tengo tan claro. Tampoco me ha dado tiempo a mirar mucho porque he estado con el cacheo, pero sí que he visto que existe algo parecido. Si alguien necesita el enlace me lo puede pedir.

Pese a todo, sigo con la idea de realizar una carga dinámica de los .js y ver en profundidad el tema de los scripts degradados.

De nuevo, muchas gracias,

[dontexplain]

La pregunta más importante no es si los necesitas todos sino si los necesitas completos. Normalmente las librerías tienen un núcleo y métodos y funciones adicionales de las cuales puedes escoger varias o todas. De todo ese tocho puedes elegir lo que te convenga.

¿Estás seguro de que necesitas todo?

Has dicho que necesitas algunas librerías jquery, hasta el mismo jquery puede ser afinado y más aún jquery ui y demás.

Y claro que el page speed te penaliza. Y si no lo hace lo harían tus usuarios.

[emprear]

Iniciado por myles_ken

Hola @emprear,

Llevo toda la mañana con el tema del server. He podido averiguar lo que comentas del .htaccess pero la pega es que uso windows en este proyecto. De todos modos, el tema del cacheo está "solucionado" (a falta de ver cúan efectivo resulta) ya que en el server he configurado "Almacenamiento en caché de resultados". Por muy iniciado que parezca, he calculado los tiempos de cacheo que considero oportunos, pero creo que voy a tener que hacer un ejercicio empirico de cacheo.

Lo que más me ha costado encontrar es el tema de la compresión GZIP, que de igual modo he visto que en un server Linux resulta "sencillo" pero en windows no lo tengo tan claro. Tampoco me ha dado tiempo a mirar mucho porque he estado con el cacheo, pero sí que he visto que existe algo parecido. Si alguien necesita el enlace me lo puede pedir.

Pese a todo, sigo con la idea de realizar una carga dinámica de los .js y ver en profundidad el tema de los scripts degradados.

De nuevo, muchas gracias,

El servidor windows al que hacés referencia usará IIS supongo. si tenés php no es dificil, aún bajo windows

Saludos