El vídeo muestra el modo en que gecko procesa la información del DOM y las hojas de estilo al montar una página tal y como la vemos. Las animaciones muestran como el motor renderiza la información de la página a visualizar conforme le va llegando y como cambios en la estructura de la misma (nuevas tablas o cambios en el CSS) afectan a determinadas partes de la visualización. Además de la wikipedia en japo, existen visualizaciones para google.co.jp y la página principal de mozilla.

La visualización, además de su componente estético, tiene interés para cualquiera que trabaje en frontend. Pese a que tendemos a pensar que la velocidad de un sitio web depende del backend que usemos y de lo mucho o poco que nos hayamos currado la configuración, el resultado final y la percepción de velocidad que el usuario percibirá dependerán no poco de como le sea servida la información y cuanto tiempo se tome el browser para presentarla. Uno de los clásicos (si se me permite decirlo, pues el libro tiene poco meses) de la velocidad desde el punto de vista de la complejidad de renderizado es High Performance Web Sites de Steve Souders, el creador de YSlow. En este libro, que es finisimo y cuesta dos perras gordas, se nos comentan una serie de técnicas para facilitar el renderizado al browser (como presentar los CSS al principio de la definición del documento o agolpar los javascript al final), nada lejos del sentido común y del entender como se procesa el DOM correctamente (algo esencial si uno quiere ganarse las lentejas en Internet) pero que conviene tener a mano aunque solo sea para justificar decisiones de diseño. Generalmente recomiendo comprar muchos libros (o pillarlo en cómodos pdfs del torrent, que no esta la cosa para lujos), pero por un lado la obviedad de la información que se presenta y por otro la gran cantidad de información que Steve, que es un tio majo con el que a uno le gustaría irse de cervezas, deja en su propio blog (cuando escribió el libro era responsable de Frontend en Yahoo! y ahora se me lo han llevado a evangelizar Google), los resultados prácticos que nos da yslow (que evalua punto por punto los consejos dados en el libro y los sintetiza para un documento dado) y la propia naturaleza dinámica del campo que por un lado obliga a Steve a realizar una continuación de su libro y por otro nos puebla la red de vídeos y tutoriales con más técnicas (como este y este) hace que mas bien nos tengamos que enfocar en razonar y entender porque esas téxnicas funcionan y aplicar ese conocimiento a escenarios nuevos que en aprender las normas como si fuera el padrenuestro.

Presentación de las visualizaciones (en japo)
Inside Gecko (japo)
Steve Souders
Steve estuvo a cargo de la secci’on Yahoo! Excepcional Performance de YDN, que merece mucho la pena leer.