Turbolinks là một tối ưu hóa giúp tăng nhận thức hiệu suất bằng cách thông minh trong việc chuyển đổi trang và tải lại nội dung trong ứng dụng của bạn. Không giống như các yêu cầu GET có điều kiện, nó không yêu cầu bất kỳ thay đổi nào đối với mã Ruby trong chính ứng dụng Rails của bạn. Turbolinks 5 là một thư viện JavaScript hoạt động ở mọi nơi (ngay cả khi không có Rails, như trên các trang tĩnh) và giảm chất lượng một cách duyên dáng trên các trình duyệt không được hỗ trợ.
Turbolinks 5
Turbolinks đã được đóng gói với Rails và được bao gồm trong các ứng dụng mới theo mặc định kể từ Rails 4. Rails 5 đi kèm với Turbolinks 5, là bản viết lại của những gì hiện được gọi là Turbolinks Classic.
Mặc dù nó đi kèm với Rails, nhưng phiên bản mới của Turbolinks là một thư viện JavaScript thuần túy có thể được sử dụng trên bất kỳ trang HTML nào đặt nó trong một <script> trên trang hoặc đưa nó vào gói JavaScript của ứng dụng.
Khi được bao gồm, Turbolinks sẽ tự động tìm tất cả các liên kết trỏ đến cùng một miền và đính kèm một trình nghe sự kiện nhấp chuột. Mọi nhấp chuột vào các liên kết đó sẽ bị chặn. Thay vì đi theo các liên kết như bình thường, nó yêu cầu trang được liên kết ở chế độ nền thông qua JavaScript bằng cách sử dụng XMLHttpRequest . Sau đó, bốn điều xảy ra:
- Bản sao của trang hiện tại được lưu trữ trong bộ nhớ cache của Turbolinks để sử dụng sau này
- Nó thay thế
<body>của trang hiện tại với<body>từ kết quả XHR - Nó hợp nhất
<head>của trang hiện tại với<head>từ kết quả XHR - Nó thay đổi URL trong trình duyệt bằng cách sử dụng API Lịch sử
Bằng cách hợp nhất <head> , trình duyệt không phải tải lại và hiển thị các nội dung như tệp CSS và JavaScript có trên cả hai trang. Điều này có thể tăng tốc đáng kể ứng dụng của bạn, đặc biệt nếu bạn có nhiều nội dung được sử dụng lại trên hầu hết các trang của mình.
Trong ứng dụng Rails 5 mới với một số chế độ xem, bạn có thể thấy các Turbolinks đang hoạt động bằng cách điều hướng xung quanh bằng cách nhấp vào liên kết và nhấn nút quay lại. Trong tab mạng của trình duyệt, bạn sẽ thấy các yêu cầu cho các trang được tải qua các Turbolinks được đánh dấu là "xhr". Ngoài ra, nội dung của bạn sẽ không được tải lại cho mọi yêu cầu.
Lưu vào bộ nhớ đệm và xem trước trang
Để tăng tốc các yêu cầu tiếp theo đến cùng một trang, Turbolinks duy trì bộ nhớ cache của các trang đã truy cập gần đây. Điều này cho phép hiển thị trang trước ngay lập tức khi nhấn nút quay lại, chẳng hạn.
Để tăng tốc hiệu suất nhận thấy của các trang chậm, Turbolinks sẽ hiển thị bản xem trước của trang nếu nó tồn tại trong bộ nhớ cache. Sau khi nhấp vào liên kết, phiên bản đã lưu trong bộ nhớ cache sẽ được hiển thị trong khi tải phiên bản mới.
Lưu ý
Turbolinks thực hiện lại một số tính năng mặc định của trình duyệt của bạn, vì vậy một số tính năng hoạt động khác với Turbolinks được bật so với khi không có.
turbolinks:load và <script> thẻ
Vì trang không được làm mới sau mỗi lần nhấp vào liên kết, nên tải JavaScript khi tải trang bằng cách sử dụng window.onload hoặc DOMContentLoaded không hoạt động nữa. Để khắc phục điều đó, Turbolinks cung cấp turbolinks:load sự kiện mà bạn có thể sử dụng thay thế:
document.addEventListener("turbolinks:load", function() {
// ...
})
Trạng thái tải trình duyệt
Khi chuyển đổi giữa các trang, trình duyệt sẽ không hiển thị chỉ báo tải trong trình duyệt của bạn vì yêu cầu được thực thi trong nền.
Trong nỗ lực khắc phục điều đó, Turbolinks sẽ hiển thị một thanh màu xanh lam (có thể được tạo kiểu bằng CSS) ở đầu trang sau 500 mili giây để cho biết rằng trang đang tải.
$ rails new --skip-turbolinks ?
Turbolinks 5 đã đi một chặng đường dài kể từ Turbolinks Classic, khi Turbolinks dường như là thứ bạn đã bỏ qua khi tạo một ứng dụng Rails mới. Là một plugin JavaScript thuần túy giảm giá trị một cách duyên dáng, hiện không phụ thuộc vào Rails, nó hoạt động hiệu quả đối với hầu hết các ứng dụng, nếu bạn lưu ý các cảnh báo trước.
Đổi lại, Turbolinks tăng tốc độ đáng kể và ngăn nội dung tĩnh của bạn bị tải lại trên mỗi lần xem trang, giúp tiết kiệm một số yêu cầu mạng. Khi tạo một ứng dụng Rails mới, hãy thử tiếp tục sử dụng Turbolinks để xem nó hoạt động như thế nào. Trên các ứng dụng hiện có, hãy dùng thử Turbolinks!
Điều đó kết thúc tổng quan của chúng tôi về Turbolinks. Bạn có đang sử dụng Turbolinks trong bất kỳ ứng dụng nào của mình không? Chúng tôi rất muốn nghe ý kiến của bạn! Ngoài ra, chúng tôi tò mò muốn biết bạn thích bài này như thế nào và các bài viết trước trong AppSignal Academy hoặc những gì bạn muốn đọc tiếp theo tại @AppSignal.