Phát triển web: localStorage so với bộ nhớ cache HTTP

Question

Giả sử tôi có máy chủ web phản hồi GET bằng tệp .json. Phản hồi cho GET đó chỉ định rằng bộ nhớ cache của trình duyệt phản hồi trong 5 năm.

Giả sử tôi có trang web yêu cầu GET cho dữ liệu JSON khi trang tải. Khi phản hồi quay lại, dữ liệu JSON được đặt trong localStorage.

Tại thời điểm này, nếu tôi muốn muốn lấy dữ liệu JSON một lần nữa, mà sẽ được nhanh hơn:

1. lấy nó từ localStorage
2. Thi công khác Ajax GET yêu cầu (trong đó trình duyệt sẽ không thực sự đưa ra yêu cầu - nó sẽ truy cập bộ nhớ cache của trình duyệt thay thế)

Bạn có thể chứng minh điều đó bằng thử nghiệm hoặc ví dụ tự động không?

Tại sao câu trả lời của bạn chính xác?

Answer 1

Sự khác biệt nếu bất kỳ phương pháp nào trong hai phương pháp này đều không đáng kể trong các UA hiện đại (trình duyệt).

Tại sao câu trả lời của tôi đúng là bạn hỏi? Bởi vì tôi đã triển khai cả hai cơ chế này.

Answer 2

Tôi nghĩ bạn đang đặt câu hỏi sai. Đó là nhanh hơn trong một phiên hoạt động về cơ bản là không thích hợp, bởi vì cả hai được lưu trữ cục bộ, và tra cứu địa phương là gần như tức thời (vs tra cứu từ xa). (Một lưu ý: không phải tất cả các trình duyệt đều dựa vào các tiêu đề bộ nhớ đệm, nhưng thường nó nghiêng về phía bộ đệm ẩn hơn là bộ đệm ẩn.)

Tuy nhiên, tình huống ví dụ của bạn là giả định bộ nhớ cache của trình duyệt không bao giờ bị xóa . Điều này là sai nói chung: không chỉ người dùng có thể xóa bộ nhớ cache bất cứ khi nào (hoặc cài đặt tự động xóa), nhưng chính trình duyệt có thể quyết định xóa dữ liệu được lưu trong bộ nhớ cache của trang web theo ý muốn (tùy thuộc vào không gian, thường).

Thay vào đó, bạn nên suy nghĩ về tuổi thọ của dữ liệu và tần suất người dùng sẽ tìm kiếm lại dữ liệu đó.

Nếu thông tin này là thông tin mà đôi khi họ chỉ có thể truy cập, thì bạn nên dựa vào cơ chế lưu trong bộ nhớ cache của trình duyệt. Điều này cho phép trình duyệt loại bỏ nó khi nó không còn cần thiết nữa.

Tuy nhiên, nếu dữ liệu là thứ được tải thường xuyên hoặc cần mỗi lượt truy cập vào trang web, thì bạn nên sử dụng localStorage. Bộ nhớ cục bộ là không phải được xóa tự động với bộ nhớ cache và trên thực tế thường chỉ bị làm trống nếu người dùng xóa cookie cho trang web đó. Điều này cho phép thông tin được giữ lại lâu hơn nữa, ngay cả khi trang web không được truy cập đủ thường xuyên để giữ cho bộ nhớ cache được làm mới. Nhưng bạn sẽ đột nhiên chịu trách nhiệm duy trì cơ sở dữ liệu thông tin đó.

Cuối cùng, câu hỏi quan trọng nhất: với tư cách là nhà phát triển, là thương mại có lợi cho chi phí phát triển một giải pháp dựa trên phức tạp hơn localStorage có đáng giá không? Nói cách khác, bạn sẽ thấy đủ lợi ích cho người dùng cuối trong bộ nhớ đệm tra cứu 1-2s hay bạn đang nói về một lượng thông tin đáng kể, nơi người dùng sẽ thấy mức tăng 30 giây.

Ví dụ, đối với một ứng dụng web phức tạp, lớn, tôi đã phát triển một thời gian, tôi đã sử dụng localStorage để lưu trữ số lượng lớn thư viện JS. Khi truy cập lại trang web, chúng được phân tích cú pháp đơn giản từ bản sao cục bộ (sau khi xác minh hàm băm). Giải pháp này cho phép một loạt các trình duyệt để giảm đáng kể thời gian khởi động, ngay cả khi bộ nhớ cache đã bị xóa. (Tôi không nói đây là cách sử dụng tốt, nhưng nó hoạt động vào thời điểm đó.)

Answer 3

Cả hai nguồn đều cho rằng localStorage đánh bại bộ nhớ cache của trình duyệt với tốc độ nhanh.

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

Đây là quan điểm của tôi về cách tải tệp JavaScript từ localStorage. Mã này rất nhỏ, bạn có thể kiểm tra tại dự án Github https://github.com/webpgr/cached-webpgr.js hoặc sử dụng mã của mình từ ví dụ đầy đủ bên dưới.

Thư viện hoàn chỉnh:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)}; 

Gọi thư viện

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){ 
    requireScript('examplejs', '0.0.3', 'example.js'); 
});