是什么让 Twitter 页面之间的导航如此之快？

Question

前几天我在 Twitter 上，我打开 chrome devtools 并进入网络控制台，然后单击 Twitter 上的一个链接（特别是菜单栏上显示“我”的链接），然后，一如既往，页面并没有真正再次加载，它似乎是 AJAX 化的，但后来我查看了网络内容，我看到的只是一些图像和一些 javascript 文件。

除非 Twitter 在加载主页时从“我”页面加载内容（我非常怀疑，因为 Twitter 的加载速度也很快），是什么让 Twitter 页面之间的导航如此之快？

Answer 1

像所有 JS 应用程序一样，您看到的页面只是“视图”。您在同一页面上，通过 AJAX 加载内容，然后 JS 使用模板呈现数据以形成该视图。

这是一个场景：当您打开一个干净的浏览器并转到 Twitter 的时间线时，所有内容都会加载。这还包括呈现后续页面所需的所有脚本。

现在，当您转到另一个页面时，例如“我”，Twitter 还没有该页面的资源。因此，它通过 AJAX 加载所需的资源，以像所有数据一样呈现“我”页面，以及它的模板。加载完成后，渲染数据并与模板一起形成“我”页面。

现在，当您返回时间线时，Twitter 从未丢弃时间线数据，而是将其缓存（最好是本地存储）。 因此回到时间线（或任何访问过的页面）只是读取缓存数据、缓存模板并将视图重新呈现到页面上的问题。根本不需要网络请求。

您还注意到，新数据是增量检索的，只需从服务器查询新推文，而不是全部取回。只有当页面确定它需要一组新数据时，它才会查询一堆数据。

此外，JSON 数据比加载普通页面轻一百万倍（夸大其词）。