Có thực tế không khi sử dụng bộ nhớ cục bộ HTML5 để lưu trữ CSS và JavaScript

Ý tưởng là sử dụng bộ nhớ cục bộ HTML5 để lưu trữ CSS và JavaScript được truy cập thường xuyên.

Ví dụ: mã giả):

var load_from_cdn = true;
if (phát hiện lưu trữ cục bộ)  
{
  if (bộ nhớ cache của css, tìm thấy js)
  {
     tải bộ nhớ cache cục bộ
     load_from_cdn = false;
  }
}
if (load_from_cdn)
{
   document.write ('<script> ...');
}

Điều này có thể hay thực tế?

Tôi biết bộ nhớ cache của trình duyệt, vẫn sẽ có một số kiểm tra truy cập tiêu đề,
tôi cho rằng không có quyền truy cập HTTP nào tốt hơn (theo suy nghĩ của tôi )

PS: Có vẻ như bộ nhớ cục bộ chỉ hỗ trợ cặp khóa-giá trị , ai đó có thể chứng minh điều đó không?
(tốt nhất với một số ví dụ)

Hoàn toàn ổn khi sử dụng bộ nhớ cục bộ để lưu trữ JS và CSS. Tuy nhiên, lưu trữ cục bộ có 5M cho mỗi giới hạn tên miền. Bạn có thể phải xem xét lại chiến lược này.

Đối với web trên máy tính để bàn, bạn có thể tận dụng bộ đệm của trình duyệt mặc định để thực hiện thủ thuật. Chỉ cần đặt phản hồi HTTP JS & CSS thành bộ nhớ cache. Nó rất đơn giản và dễ dàng.

Đối với web di động, độ trễ là cao. Vì vậy, giảm yêu cầu HTTP là rất quan trọng. Vì vậy, có JS & CSS trong URL bên ngoài là tối ưu. Sẽ tốt hơn nhiều nếu có nội tuyến JS & CSS. Điều này làm giảm các yêu cầu HTTP, nhưng làm mờ nội dung HTML. Rồi sao? Như bạn đã nói, sử dụng lưu trữ cục bộ!

Khi một trình duyệt truy cập trang web lần đầu tiên, JS & CSS sẽ được đặt nội tuyến. JS cũng có thêm hai công việc: 1) Lưu trữ JS & CSS vào bộ nhớ cục bộ; 2) Đặt cookie để gắn cờ rằng JS & CSS đang lưu trữ cục bộ.

Khi trình duyệt truy cập trang web lần thứ hai, máy chủ đã nhận được cookie và biết rằng trình duyệt đã có JS & CSS liên quan. Vì vậy, HTML kết xuất có JS nội tuyến để đọc JS & CSS từ bộ nhớ cục bộ và chèn vào cây DOM.

Đây là ý tưởng cơ bản về cách tạo ra phiên bản di động bing.com. Bạn có thể cần phải xem xét kiểm soát phiên bản JS & CSS khi triển khai nó trong sản xuất.

Cảm ơn

Không phải trình duyệt đã làm điều này cho bạn, và có lẽ tốt hơn?

Vấn đề ở đây là gì?

Đã có một kỹ thuật được thiết lập tốt được gọi là bộ nhớ đệm phía máy khách. Bộ nhớ cục bộ HTML5 mang lại điều gì trong trường hợp này bộ nhớ đệm bị thiếu?

Bạn có thể có một số loại ứng dụng lạ phải tự động tải các đoạn mã JavaScript để bạn không thể sử dụng bộ đệm một cách hiệu quả, nhưng đó là một trường hợp cực kỳ hiếm.

Ngoài ra, hãy chú ý đến một điều khác. Các trình duyệt có chính sách cụ thể cho bộ đệm và hầu hết các trình duyệt khá tốt trong việc quản lý tốt bộ đệm (chỉ xóa nội dung cũ hơn, v.v.). Bằng cách triển khai bộ đệm tự tạo tại nhà, bạn ngăn các trình duyệt quản lý nó một cách chính xác. Nó không chỉ có thể bị chỉ trích mà còn có thể làm tổn thương bạn sớm hay muộn. Ví dụ: khi người dùng ứng dụng web báo cáo lỗi, bạn thường trả lời bằng cách yêu cầu họ xóa bộ nhớ cache. Tôi không chắc chắn những gì bạn sẽ hỏi trong trường hợp của bạn, vì xóa bộ nhớ cache sẽ không bao giờ giải quyết vấn đề với ứng dụng web của bạn.

Đáp lại lần chỉnh sửa đầu tiên của bạn (lần chỉnh sửa thứ hai của bạn không có chủ đề):

Tôi biết bộ nhớ cache của trình duyệt, vẫn sẽ có một số kiểm tra truy cập tiêu đề

Bạn dường như thiếu một số hiểu biết về bộ nhớ đệm trình duyệt. Đó là lý do tại sao cần phải hiểu cách thức hoạt động của nó trước tiên, trước khi bắt đầu thực hiện cơ chế bộ nhớ đệm tự làm tại nhà . Chỉ phát minh lại bánh xe của riêng bạn khi bạn hiểu đủ các bánh xe hiện có và có lý do chính đáng để không sử dụng chúng. Xem điểm 1 trong câu trả lời của tôi cho câu hỏi "Phát minh lại bánh xe và KHÔNG hối tiếc" .

Khi cung cấp một số dữ liệu qua HTTP, bạn có thể chỉ định một vài tiêu đề liên quan đến bộ đệm:

• Last-Modified Chỉ định khi nội dung được thay đổi,
• ExpiresChỉ định khi trình duyệt phải yêu cầu máy chủ nếu nội dung thay đổi .

Hai tiêu đề này cho phép trình duyệt:

• Tránh tải xuống nội dung nhiều lần. Nếu Last-Modifiedđược đặt thành tháng trước và nội dung đã được tải xuống hôm nay một vài giờ trước đó, thì không cần phải tải lại.
• Tránh truy vấn cho ngày mà tệp được sửa đổi lần cuối. Nếu Expiresmột thực thể bộ nhớ cache là ngày 05 tháng 5 ^ngày , năm 2014, bạn không cần phải đưa ra bất cứ yêu cầu GET không phải trong năm 2011, cũng không phải trong năm 2012 hoặc năm 2013, kể từ khi bạn biết rằng bộ nhớ cache là up-to-date.

Cái thứ hai là cần thiết cho CDN. Khi Google phục vụ JQuery cho khách truy cập Stack Overflow hoặc cdn.sstatic.netphục vụ hình ảnh hoặc bảng định kiểu được sử dụng bởi Stack Overflow, họ không muốn trình duyệt truy vấn phiên bản mới mỗi lần. Thay vào đó, họ đang phục vụ các tệp đó một lần, đặt ngày hết hạn thành một cái gì đó đủ lâu và đó là tất cả.

Ví dụ, đây là ảnh chụp màn hình về những gì đang xảy ra khi tôi đến trang chủ Stack Overflow:

Có 15 tập tin để phục vụ. Nhưng tất cả những 304 Not Modifiedphản ứng đó ở đâu? Bạn chỉ có ba yêu cầu nội dung đã thay đổi. Đối với mọi thứ khác, trình duyệt sử dụng phiên bản được lưu trong bộ nhớ cache mà không yêu cầu bất kỳ máy chủ nào .

Để kết luận, bạn thực sự cần phải suy nghĩ kỹ trước khi thực hiện cơ chế bộ đệm của riêng mình và đặc biệt là tìm một kịch bản tốt trong đó điều này có thể hữu ích . Như tôi đã nói ở đầu câu trả lời của mình, tôi chỉ có thể tìm thấy một: nơi bạn đang phục vụ các đoạn JavaScript để sử dụng chúng thông qua, OMG eval(),. Nhưng trong trường hợp này, tôi khá chắc chắn rằng có những cách tiếp cận tốt hơn:

• Hiệu quả hơn bằng cách sử dụng các kỹ thuật bộ đệm tiêu chuẩn, hoặc
• Dễ bảo trì hơn.

Bộ nhớ đệm cục bộ phía máy khách nên được tối ưu hóa nhiều hơn so với sử dụng bộ nhớ cục bộ HTML5. Chỉ cần đảm bảo javascript và CSS của bạn nằm trong các tệp có thể lưu trong bộ nhớ cache bên ngoài và trang của bạn sẽ tải nhanh hơn nhiều qua bộ đệm của trình duyệt hơn là cố gắng trích xuất chúng từ bộ nhớ cục bộ và tự thực hiện chúng.

Ngoài ra, trình duyệt có thể bắt đầu tải tài nguyên bên ngoài khi trang bắt đầu tải, trước khi bạn thực sự có thể bắt đầu chạy javascript trong trang đó để lấy tài nguyên của mình từ bộ nhớ cục bộ HTML5.

Ngoài ra, dù sao bạn cũng cần mã trong trang để tải từ bộ nhớ cục bộ HTML5, vì vậy chỉ cần đặt tất cả mã JS của bạn vào một tệp JS có thể lưu trữ bên ngoài.

Thay vì phát minh lại bánh xe, chỉ cần sử dụng chức năng ngoại tuyến HTML5: http://www.whatwg.org/specs/web-apps/civerse-work/multipage/offline.html

Bạn sẽ có hiệu suất tốt hơn nhiều bằng cách sử dụng mạng phân phối nội dung (CDN) như thư viện mã của Google . Được lên kế hoạch chu đáo, phần lớn JS và CSS của bạn phải có trong bộ nhớ cache của mọi khách truy cập trước khi họ truy cập trang web của bạn lần đầu tiên. Giảm thiểu phần còn lại.

Bạn luôn có thể điểm chuẩn bộ nhớ đệm trình duyệt so với giải pháp HTML5 cuộn bằng tay của bạn. Nhưng đặt cược của tôi là bộ nhớ đệm bản địa sẽ đánh bại nó.

Sử dụng localStorage rất nhanh (er)! Thử nghiệm của tôi cho thấy

• Đang tải jQuery từ CDN: Chrome 268ms , FireFox: 200ms
• Đang tải jQuery từ localStorage: Chrome 47ms , FireFox 14ms

Tôi đoán việc lưu yêu cầu HTTP đã mang lại lợi thế tốc độ lớn. Mọi người ở đây dường như bị kết án ngược lại, vì vậy hãy chứng minh tôi sai.

Nếu bạn muốn kiểm tra kết quả của tôi, tôi đã chọn một thư viện nhỏ lưu trữ các tập lệnh trong localStorage. Hãy xem thử trên Github https://github.com/webpgr/cached-webpgr.js hoặc chỉ sao chép nó từ ví dụ 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');
});