Stan Blog

學習過程中的一些記錄

[Rails] Gem Turbolink 功能與原理

Turbolink 的作用是讓每一個超連結都只用 Ajax 的方式將整個 body 內容替換掉,這樣換頁時就不需要重新載入 head 部份的標籤,包括 JavaScript 和 CSS 等,目的是可以改善換頁時的速度。

Turbolink 原理

Turbolinks 把頁面上所有 a 標籤添加了一個 click 處理函式。如果瀏覽器支援 PushState,Turbolinks 會對頁面發出 Ajax 請求,解析伺服器回過來的響應,把頁面整個 body 用響應回傳的 body 換掉。接著 Turbolinks 會利用 PushState 把 URL 換成正確的,看起來就像重新整理一樣,仍保有漂亮的 URL。

由於 Turbolink 會影響 JavaScript 的 Event Bindings 行為,所以在搭配一些 JavaScript 比較吃重的應用程式,例如使用 JavaScript Framework 如 Backbone、AngularJS、Ember 時會移除不用,以免互相影響。

Comments

comments powered by Disqus