Categories Tối ưu JavaScript

Chi tiết kỹ thuật của instant.page

Phần này giúp bạn tùy chỉnh sâu hơn instant.page: công cụ giúp tăng tốc website dù các tùy chọn mặc định của nó cũng đủ tốt rồi.


Quá trình tải trước được thực hiện với <link rel="prefetch" href="url">.

Bạn có thể tìm hiểu thêm prefetch là gì ở đây.

Mã nguồn là 200 dòng có thể đọc được.


Trình duyệt hỗ trợ

Instant.page được tôi (Alexandre Dieulot) liên tục cải tiến – không có tác động nào đối với các trình duyệt không hỗ trợ nó.

Các trình duyệt dựa trên Chrome và Chromium có hỗ trợ đầy đủ kể từ phiên bản 61 (phát hành vào tháng 9 năm 2017).

Firefox hỗ trợ <link rel="prefetch"> (kể từ năm 2006, wow!), nhưng sẽ tải lại trang nếu nó không được lưu trong bộ nhớ cache.

Các trình duyệt không tương thích

Safari 13.0 có hỗ trợ cho <link rel="prefetch"> nhưng nó bị tắt theo mặc định. Tôi hy vọng rằng nó sẽ được kích hoạt vào tháng 9 năm 2020 trong Safari phiên bản 14.0.

UC Browser không hỗ trợ các mô-đun vì nó dựa trên Chromium 57. Một phiên bản mới dựa trên Chromium 69 hỗ trợ các mô-đun đã được công bố vào tháng 10 năm 2018, nhưng nó vẫn chưa được phát hành!

Bạn có thể xem chi tiết các trình duyệt hiện hỗ trợ đến đâu cho prefetch ở đây.


CDN an toàn

Tập lệnh của Instant.page được tôi lưu trữ (không cần máy chủ của bạn) với Cloudflare worker để có thể phục vụ lượng người dùng rất lớn.

Ngoài ra, nó sử dụng tính toàn vẹn của nguồn phụ để cho phép các trình duyệt hiện đại xác minh rằng tệp không bị giả mạo. 

Nó được tải dưới dạng một mô-đun để đảm bảo hầu hết các trình duyệt cũ sẽ không thực thi nó (tỷ lệ chỉ 0,4%).


Tự lưu trữ

Bạn cũng có thể tự lưu trữ mã của công cụ này (tức là không cần thông qua CDN). Tải xuống phiên bản mới nhất, sau đó thêm thẻ tập lệnh mô-đun ngay trước thẻ đóng </body>:

<script src="instantpage-5.1.0.js" type="module" defer></script>

Bạn cũng có thể cài đặt nó thông qua npm, câu lệnh: npm i instant.page


Lịch sử

Ý tưởng tải trước các trang web khi hover và touchstart đến từ một thư viện cũ của tôi là InstantClick, được phát hành vào tháng 1 năm 2014, sử dụng Ajax và history.pushState thay vì <link rel="prefetch">, điều này biến một trang web thành ứng dụng một trang (single-page application). Nó làm cho một trang web thậm chí còn mượt mà hơn nhưng yêu cầu bạn cần phải làm thêm một số việc mới ổn được.

Không may là InstantClick hầu như chỉ là một bằng chứng về khái niệm vì nó không có tài liệu đủ tốt.

Google phát hành Quicklink vào tháng 12 năm 2018, công cụ này preload các liên kết với <link rel="prefetch"> sớm nhất có thể khi nó đi vào khung nhìn trình duyệt, điều đó thôi thúc tôi nên tập trung vào việc xây dựng phiên bản nhỏ nhắn, dễ dùng hơn của InstantClick, và thế là tôi phát hành instant.page vào tháng 2, năm 2019.


Dự án liên quan trong tương lai

InstantClick cung cấp trải nghiệm mượt mà nhất có thể, trong khi vẫn không yêu cầu nhiều công việc như dạng framework (cái cho kết quả thấp hơn), vì vậy tôi đang xem xét làm lại nó vào cuối năm 2020. Nó sẽ được đổi tên thành “Instant.page extra”.

(Biên tập từ bài giới thiệu chính thức trên trang instant.page)

Back to Top