Tăng tốc website bằng cache với basket.js
Tăng tốc website bằng cách tăng tốc độ cache cà file javascript. Giúp giảm thời gian load trang. Hướng dẫn sử dụng thư viện basketJs
» 5 công cụ đo tốc độ website miễn phí» Tăng tốc và giảm băng thông bằng kỹ thuật nén cho website
» Các yếu tố ảnh hưởng đến điểm Google PageSpeed Insights
Trong một trang web động, có rất nhiều thành phần tĩnh như js, css, image, video … Để tăng tốc độ đáp ứng của một website động thì bên cạnh việc nâng cấp đường truyền, tăng sức mạnh của server và tối ưu code, thì một việc quan trọng cần phải làm là giảm thiểu việc truyền tải các file tĩnh qua lại giữa server và browser, vì các file này ít khi thay đổi, dung lượng lại lớn, nếu cứ bắt browser tải đi tải lại hoài, thì rất phí mà lại khiến tốc độ đáp ứng của website chậm đi.
Cache là một giải pháp tốt. Đa số các trình duyệt đều hỗ trợ cache các file tĩnh. Tuy nhiên, tham vọng của chúng ta không có điểm dừng, vì vậy hôm nay, chúng ta sẽ tìm đến một giải pháp cache hiệu quả hơn, với thời gian truy cập các file cache nhanh hơn, từ đó giúp tăng tốc độ đáp ứng của website.
BasketJs là gì ?
A simple (proof-of-concept) script loader that caches scripts with localStorage.
BasketJs là một script loader nhỏ gọn, nó sử dụng localStorage để làm cache lưu các file js của bạn và load ra khi bạn gọi đến các file này giống như RequireJs, Giúp giảm số lượng request, tăng tốc độ load trang.
Cache bằng browser cache thì rất thông dụng rồi, nhưng thư viện này khác biệt ở chỗ nó không sử dụng browser cache mà nó chủ động lưu các file này vào localStorage của trình duyệt, và load ra khi cần tới, theo như bài test Bing và Google, thì tốc độ của localStorage nhanh hơn tốc độ browser cache và IndexDB. Vì vậy sử dụng localStorage để làm cache thì sẽ có tốt độ nhanh nhất.
Cách BasketJs hoạt động
Trong lần đầu tiên visitor truy cập website, BasketJs sẽ kiểm tra xem các file này có được lưu vào localStorage hay chưa, nếu lưu rồi thì nó sẽ lấy ra sử dụng, nếu chưa lưu thì nó vẫn sẽ tải về và lưu vào.
Nếu bạn mở Developer Tool của chrome lên, thì sẽ thấy như sau :
Các file được tổ chức vào localStorage với key và value, phần value có định dạng json, có chứa nội dung của file js được cache. Và khi website cần các file này, thì basketJs sẽ insert nó vào trang như trong hình sau :
Đó là sơ lượt về cơ chế hoạt động của nó, bạn có thể xem kỹ hơn trong code, Thư viện này rất nhỏ, với code khá ít.
Cách sử dụng BasketJs
Trước tiên bạn cần thêm file basket.js vào head của trang :
| 1 | <script src="basket.js"></script> |
Giờ để load một file js ví dụ như jquery, bạn sử dụng phương thức require như sau :
| 1 | basket.require({ url: 'http://lab.senviet.org/js/jquery.js' }); |
Từ sau dòng code này, bạn có thể suwre dụng jquery được. Nếu muốn load nhiều file, bạn add thêm tham số vào phương thức require :
| 1 2 3 4 5 | basket.require( { url: 'jquery.js' }, { url: 'underscore.js' }, { url: 'backbone.js' } ); |
Đây là thuộc tính của các tham số :
| Tham số | Mô tả |
|---|---|
| url | url của file script |
| Key | Giống như ID của file, cái này dùng làm key khi lưu vào localStorage |
| expire | Thời hạn lưu cache, đơn vị là giờ |
| unique | Giống như ID thứ hai, nếu hai file khác nhau unique, thì basket sẽ tải mới file có id này |
| execute | Có exec nội dung trong file khi nó được tải về hay không |
| skipCache | Đặt giá trị là true nếu bạn không muốn cache file này |
trong trường hợp các file phục thuộc vào nhau, bạn muốn jquery load trước rồi tới các file khác, bạn có thể dùng như sau
| 1 2 3 4 5 6 7 8 | basket .require({ url: 'missing.js' }) .then(function () { // Success }, function (error) { // There was an error fetching the script console.log(error); }); |
Các phương thức khác
Ngoài ra thì còn nhiều phương thức khác nữa :
| Phương thức | Sử dụng | Mô tả |
|---|---|---|
| basket.get | basket.get(key) | Lấy mã nguồn của một file được lưu trong cache |
| basket.remove | basket.remove(key) | Xóa một file ra khỏi cache |
| basket.clear | basket.clear(expired) | Xóa hết các file cache, nếu expired là true, thì chỉ xóa các file đã hết hạn. |
Plugin cho WordPress
Nếu bạn đang sử dụng WordPress, thì mình có đã code một plugin để sử dụng thư viện này cho WordPress. bạn tải theo link dưới đây :
Lời kết
Như các bạn thấy, thư viện này khá hữu ích, trong lần chạy thư hai của website, nó giúp site của bạn load nhanh hơn, Sô lượng request giảm đi đáng kể. Về cơ bản thì thư viện cũng dễ sử dụng, khá dễ tích hợp vào các project trước đây.
» Hướng dẫn tăng tốc website từ A đến Z