页面链接加载速度更快



我正在浏览这个网站 https://amaioswim.com/我确实注意到,当单击左侧的导航时,url 地址会立即更改。

他们还使用"淡出"和"淡入"窗帘使页面之间的无缝过渡。

我想知道你会使用什么样的方法来实现这一目标。

我知道使用 JS 您可以更改网址,但只能更改主题标签网址...右? 还是因为他们有一个延迟为 0 的超快服务器?

你认为他们把所有的东西都加载到同一个DVI容器中吗?

谢谢

这与历史 API 关系不大。 (他们使用该 API 来更新显示的 URL,但这只是网站工作方式中的一个小细节;它本身不会创建此行为。

此特定站点正在运行客户端框架。(我在缩小的代码中没有看到任何关于哪一个的明显线索。

站点内的链接作为 AJAX 请求进行处理。他们使用相同的端点进行新页面加载和 XHR 调用,并检查X-Requested-With标头以确定是发送完整的服务器呈现的 HTML 文件(包括整个站点的框架(还是仅发送该特定页面的内容(将嵌入到已加载站点中的客户端(。

作为证据:这将返回完整的网站(如用户首次访问该 URL 时(:

curl 'https://amaioswim.com/about'

这只返回"关于"内容(就像用户在加载网站后单击"关于"链接一样(:

curl 'https://amaioswim.com/about' -H 'X-Requested-With: XMLHttpRequest'

(您也可以通过在浏览站点时在浏览器控制台中查看"网络"面板来查看此信息。

当然,仅加载单个页面的内容比加载整个页面 HTML(及其 CSS 和 JS(要快得多,并且允许您在 AJAX 调用进行时添加光泽效果,如交叉淡入淡出和动画。

从几年开始,您可以使用html5历史API:

https://css-tricks.com/using-the-html5-history-api/

它将允许您非常自由地操作 url。 例如,当您滚动到新部分时,您可以将该部分放在浏览器 URL 的末尾。

这就是运行中的历史记录 API。 在此处查找更多详细信息

尝试pushStatereplaceState方法,这应该会让你产生这种行为。为了更精确地控制这些,您可能还需要查看popState事件

最新更新