		*Últimos Cambios*
	Blog personal: El hilo del laberinto

Compresión y generación "al vuelo" de páginas HTML en el cliente, usando JavaScript

Última Actualización: 7 de Febrero de 2.000 - Lunes

En ocasiones una página web está constituida por multitud de elementos de estructura repetitiva, similar y redundante. Por ejemplo, una tabla conteniendo enlaces (en plan bookmark) consta de varios elementos. Por ejemplo:

http://www.argo.es/: Empresa en la que trabajo

http://www.odec.es/: Empresa matriz

http://www.odec.pt/: Empresa matriz en Portugal

El fuente HTML de la tabla superior es el siguiente:

<center><table>
<tr><td bgcolor=silver><dl><dt><a href="http://www.argo.es/">http://www.argo.es/</a>
<dd>Empresa en la que trabajo</dl></td></tr>
<tr><td bgcolor=lightgreen><dl><dt><a href="http://www.odec.es/">http://www.odec.es/</a>
<dd>Empresa matriz</dl></td></tr>
<tr><td bgcolor=lightyellow><dl><dt><a href="http://www.odec.pt/">http://www.odec.pt/</a>
<dd>Empresa matriz en Portugal</dl></td></tr>
</table></center>

Como puede verse, hay muchísima información redundante en esta tabla: los URLs aparecen dos veces, y los tags se repiten constantemente.

Es perfectamente posible utilizar un pequeño script JavaScript para generar la tabla "al vuelo". Por ejemplo, el siguiente script reconstruye la tabla anterior:

<script language="JavaScript">

t=new Array();

t[0]=["http://www.argo.es/","silver","Empresa en la que trabajo"];
t[1]=["http://www.odec.es/","lightgreen","Empresa matriz"];
t[2]=["http://www.odec.pt/","lightyellow","Empresa matriz en Portugal"];

texto="<p><center><table>";

for(var i=0;i<t.length;i++) {
  texto=texto+"<tr><td bgcolor=\""+t[i][1]+"\"><dl><dt><a href=\"";
  texto=texto+t[i][0]+"\">"+t[i][0]+"</a><dd>"+t[i][2]+"</dl></td></tr>\n";
}

texto=texto+"</table></center>";
document.write(texto);
</script>

Al ejecutarse, su salida es equivalente a la tabla generada a mano:

¿La ventaja de utilizar JavaScript?. Si el número de entradas a generar es elevado, y si la redundancia entre ellas es alta (por ejemplo, estamos trabajando con frames y se emplean target's), el tamaño de los datos que tiene que recibir el cliente es mucho menor que si se le envía la página preconstruída al uso normal. Nosotros, por ejemplo, obtenemos compresiones 10:1 de forma rutinaria.

¿La desventaja?. Se requiere que el cliente tenga habilitado JavaScript. Adicionalmente, algunos navegadores tienen problemas debido a su implementación parcial de este estándar (en particular, las versiones 3.x del Microsoft Internet Explorer). La solución suele ser bastante sencilla, ya que se puede discriminar a los usuarios en función de sus capacidades cuando acceden al web a través de la página de entrada.

Historia

07/Feb/00: Primera versión de este documento.

Más información sobre los OpenBadges

Donación BitCoin: 19niBN42ac2pqDQFx6GJZxry2JQSFvwAfS