頁面鏈接加載速度更快

Question

我正在瀏覽該網站https://amaioswim.com/ ，但我確實注意到，單擊左側導航按鈕時，URL地址會立即更改。

他們還使用“淡出”和“淡入”窗簾來使頁面之間的過渡無縫。

我想知道您將使用哪種方法來實現這一目標。

我知道使用JS可以更改url，但只能更改標簽url ...對嗎？ 還是因為他們有一台延遲為0的超快速服務器？

您是否認為他們將所有文件都以同一個ajax方式加載到同一dvi容器中？

謝謝

Answer 1

這與歷史記錄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調用時添加諸如交叉漸變和動畫之類的光澤效果。

Answer 2

幾年以來，您可以使用html5歷史記錄api：

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

它將允許您相當自由地操作url。 例如，當您滾動到一個新的部分時，可以將該部分放在瀏覽器URL的末尾。

Answer 3

這就是歷史API的作用。 在這里找到更多詳細信息

嘗試使用pushState和replaceState方法，應該可以使您獲得此行為。 為了更精確地控制這些事件，您可能還想看看popState 事件