¿Cómo los sitios web de noticias, por ejemplo, Forbes / Zdnet, combinan perfectamente una página web en otra?

14

Si vas a Eg:

Cuando llegas al final de la página, se carga una nueva noticia y la URL de mi navegador de Internet cambia a la URL de esta próxima noticia. Así que me preguntaba cómo una página web puede cargar casi instantáneamente la siguiente página web con un retraso casi insignificante entre las páginas. ¿Están, por ejemplo, descargando previamente la página web de la historia de Next News y luego cargando la página web muy rápido?

javascript web-development web-applications html websites zordman
fuente
1
Mantenga presionada la Endtecla y verá el retraso del proceso de carga.
MonkeyZeus
55
La pregunta más importante es por qué lo hacen.

Respuestas:

25

La respuesta breve es que el código Javascript del lado del cliente de la página detecta cuándo te acercas "demasiado" al final de la página y le pide al servidor más datos cuando eso sucede.

Sin ser demasiado técnicos, no están recargando toda la página web. En cambio, el código Javascript en esa página solicita más datos del servidor, luego, cuando recibe los nuevos datos, los agrega a la página actual. Las partes de la página que no necesitan cambiar permanecen completamente sin cambios.

La forma más moderna de hacerlo es usar las características de modificación del historial de HTML5 , que parece ser lo que están usando esos sitios.

Ixrec
fuente
44
A su descripción le falta un paso: donde realmente cambian el historial, junto con la adición de más datos a la página. Lo que hace que su "forma más moderna de hacer esto " sea algo incómoda, porque esto se refiere al proceso de modificación de la historia, que en realidad no se menciona en la respuesta. (Gramaticalmente, esto se referiría a dejar el resto de la página sin cambios, o tal vez a agregar datos a la página, lo que generalmente se hace con AJAX, y no se puede hacer con las características de modificación del historial de HTML5.)
KRyan
Entonces, ¿qué pasa con el cambio de URL, cómo sucede sin forzar una recarga? Porque en su enlace, si vuelve a cargar una 'página modificada' (por ejemplo /second), se produce un error. Eso no sucede con el sitio de noticias de OP: cambian la URL precisamente para que pueda compartirla.
OJFord
@OllieFord para eso están las cosas de la API de historia. history.pushStatey le history.replaceStatepermite cambiar la URL en la barra de direcciones sin salir de la página actual. Es el reemplazo más moderno del viejo truco de cambiar el fragmento de URL ( #something), con una gran ventaja de que la API de historial le permite insertar URL "reales" en las que el servidor puede participar, mientras que el fragmento debe ser completamente compatible del lado del cliente.
hobbs
Ah bien. Pero como dije, la demostración está rota, lo cual es confuso.
OJFord
Por alguna razón, la demostración de la historia con la que estaba familiarizado se rompió por completo cuando surgió esta pregunta, por lo que ese enlace fue el primero que pude encontrar que parecía funcionar en absoluto. Siéntase libre de sugerir un mejor enlace.
Ixrec
20

Una gran clave para comprender lo que está sucediendo: es posible, a través de Javascript, establecer la URL en la barra de direcciones sin realmente redirigir al usuario. Para ver esto en acción, pegue el siguiente código en la consola de un navegador compatible. Tenga en cuenta que cambia su barra de direcciones a http://programmers.stackexchange.com/yay.html.

history.pushState(null,null,'/yay.html')

El beneficio de este enfoque es que si los marcadores de usuario después de desplazarse a una historia, el marcador sabrá a dónde enviar al usuario. El desplazamiento infinito de los resultados de búsqueda de DeviantArt es un buen ejemplo de este comportamiento.

Brian
fuente
Espere, ¿DeviantArt ha implementado la modificación del historial en sus resultados de búsqueda, para que pueda vincular / marcar / registrar una página en particular? Eso es ... bastante. Sin embargo, ¿cuánto tiempo permanecerían resultados particulares en una página en particular para una consulta en particular? Si marca como favorito, no esperaría ver los mismos resultados en esa página en particular mañana ... Debo recordar investigar esto.
KRyan
@KRyan solo modifica el offsetparámetro que salta una cierta distancia en el conjunto de resultados. Dado que el orden de clasificación predeterminado parece ser "popular todo el tiempo", los resultados probablemente sean algo estables, pero definitivamente no si cambia el orden de clasificación a "más nuevo" y busca algo popular.
hobbs