更快的頁面鏈接加載

我正在瀏覽本網站https://amaioswim.com/ 我注意到，當點擊左側的導航時，url地址立即改變。更快的頁面鏈接加載

它們還使用「淡入淡出」和「淡入淡出」窗簾來實現頁面之間的無縫切換。

我在想你會用什麼樣的方法來達到這個目的。

我知道JS你可以更改網址，但只有標籤網址...對不對？還是因爲他們有一個超低速的服務器0延遲？

你認爲他們正在加載所有ajax-ly在同一個dvi容器？

感謝

2017-08-10 Francesco

除了已經回答的問題之外，他們有無縫過渡的方式（很可能）使用前端框架（如角度或反應）。 – jdmdevdotnet

由於一些年中，你可以使用HTML5歷史API：

它可以讓你操縱URL相當自由。例如，當您滾動到新的部分時，您可以將該部分放在瀏覽器url的末尾。

2017-08-10 14:35:55 mortb

這是歷史API在行動。查找更多詳細信息here

嘗試使用pushState和replaceState方法，這應該會引起您這種行爲。要對這些進行更精確的控制，您可能還需要查看popStateevent

2017-08-10 14:38:13

這與歷史API無關。（他們正在使用該API來更新顯示的URL，但這是網站工作方式的一個小細節;本身並不會產生此行爲。）

此特定網站正在運行客戶端框架。（我在縮小的代碼中看不到任何明顯的線索）

網站內的鏈接被作爲AJAX請求處理。他們使用相同的端點進行新鮮頁面加載和XHR調用，並且正在檢查X-Requested-With標題以確定是發送完整的服務器呈現的HTML文件（包括完整網站的框架）還是僅發送該特定內容頁面（這將在已加載的網站被嵌入客戶方。）

爲證：這將返回完整的網站（如當用戶第一次訪問該網址）：

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

這僅返回「約「內容（當用戶點擊加載該站點後的」約「鏈接時）：

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

（您也可以通過在瀏覽器控制檯查看網絡面板，而瀏覽網站看到這一點。）

加載只是內容的個人頁面，當然，速度遠遠超過加載整個頁面HTML（和它的CSS和JS），並允許您在AJAX調用進行過程中添加諸如交叉漸變和動畫之類的光澤效果。

2017-08-10 15:11:36

你可以在行動中提供一個基準的例子嗎？ –

對不起，我不確定你的意思？ –

實現您在上面詳細列出的代碼。我們有網站作爲結果的例子，我們有你正在發生的事情的解釋，但沒有簡單的代碼示例，除非現在，代碼不會簡單但麻煩。 –

回答