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

Question

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

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

Answer 1

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

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

现在，当您转到另一个页面时，例如＆＃34; Me＆＃34;，Twitter尚未拥有该页面的资源。因此，它通过AJAX加载所需的资源来呈现＆＃34; Me＆＃34;像所有数据一样的页面，以及它的模板。加载后，它会渲染数据并使用模板形成＆＃34; Me＆＃34;页。

现在当你回到到时间线时，Twitter从未放弃时间轴数据但是缓存了它（最好是localstorage）。 因此，回到时间轴（或任何访问过的页面）只需要读取缓存数据，缓存模板并将视图重新呈现到页面上。根本不需要网络请求。

正如您还注意到的那样，通过从服务器查询新推文而不是将它们全部取回来逐步检索新数据。只有当页面确定它需要一组新数据时，才会查询它们。

此外，JSON数据比加载普通页面要轻一百倍（夸张）。