¿Hay algún buen recurso front-end sobre cómo Facebook está representando su página principal (muro)?

Es una muy buena pregunta.

En primer lugar, debes tener en cuenta algunas cosas sobre Facebook:

  • 1.3B usuarios mensuales
  • Necesita ser lo más rápido posible para proporcionar una buena experiencia de usuario
  • Necesita actualizarse mucho y mantener los datos y la interfaz de usuario actualizados en tiempo real

Estas inquietudes sobre el rendimiento llevaron a Facebook a configurar una poderosa herramienta de interfaz.

Lo que llamo “contenido” son todos los datos que provienen de la base de datos (como su nombre de usuario, publicación, comentarios, mensajes de chat …)

Aquí hay un breve enfoque sobre cómo Facebook representa una página.

  1. Una vez que visite una página, primero descargará el HTLM, que contiene la plantilla global de Facebook.
  2. Luego se carga CSS, por lo que incluso si la página no está completamente cargada, comenzará a ver algo parecido a Facebook
  3. Luego, se cargarán algunas imágenes (mosaicos de UI, su imagen de perfil …)

En este punto, sentirá que la página ya está descargada, incluso si el contenido aún no se ha cargado (se hará más adelante). Por lo tanto, sentirá que el sitio es rápido y permanecerá en la página hasta que se cargue por completo. Además,
Es posible que todos estos recursos ya se hayan descargado y almacenado en la memoria caché de su navegador.

Veamos ahora que sucede a continuación:

  1. Se descarga un primer javascript: maneja las dependencias de las bibliotecas y administra en qué orden se descargará el otro javascript. (Ver I) Tal vez se pregunte por qué Facebook no descarga un solo javascript (minificado y concatenado), la razón es simple: no necesita todas las funciones para mostrar la página, puede descargar las tesis más adelante.
  2. Este script ahora descarga todos los scripts necesarios, por orden de prioridad: scripts centrales (tipo de jQuery), contenido y características ocultas (como ventanas emergentes, pestañas …).
  3. Un script descargará el contenido que necesita la página y lo inyectará en la plantilla global que descargamos primero.
  4. Del mismo modo, otro script administrará las imágenes y decidirá en qué orden se descargarán.
  5. Luego se descargarán algunos CSS adicionales (una vez más, en relación con las características “ocultas”)

En este punto, la representación de su página está completa.

Luego editaré mi artículo para hablar sobre la forma en que Facebook actualiza esa página.