caching các tệp JavaScript

Question

Phương pháp nào tốt nhất để làm cho trình duyệt sử dụng các phiên bản tệp js được lưu trong bộ nhớ cache (từ máy chủ)?

Answer 1

Có một cái nhìn tại Yahoo! mẹo: http://developer.yahoo.com/performance/rules.html#expires.

Ngoài ra còn có lời khuyên của Google: https://developers.google.com/speed/docs/best-practices/caching

Answer 2

Từ PHP:

function OutputJs($Content) 
{ 
    ob_start(); 
    echo $Content; 
    $expires = DAY_IN_S; // 60 * 60 * 24 ... defined elsewhere 
    header("Content-type: x-javascript"); 
    header('Content-Length: ' . ob_get_length()); 
    header('Cache-Control: max-age='.$expires.', must-revalidate'); 
    header('Pragma: public'); 
    header('Expires: '. gmdate('D, d M Y H:i:s', time()+$expires).'GMT'); 
    ob_end_flush(); 
    return; 
} 

công trình đối với tôi.

Là một nhà phát triển có thể bạn sẽ nhanh chóng chạy vào tình hình mà bạn không muốn tập tin lưu trữ, trong đó trường hợp thấy Help with aggressive JavaScript caching

Answer 3

hoặc trong tập tin .htaccess

AddOutputFilter DEFLATE css js 
ExpiresActive On 
ExpiresByType application/x-javascript A2592000 

Answer 4

tôi bị cám dỗ rất nhiều để đóng này như là một bản sao; Câu hỏi này dường như được trả lời bằng nhiều cách khác nhau trên khắp các trang web:

• will a script in html's script tag with extension php be cached?
• When does browser automatically clear cache of external JavaScript file?
• Help with aggressive JavaScript caching
• How to control web page caching, across all browsers?
• How can I make the browser see CSS and Javascript changes?

Answer 5

Trong file Apache .htaccess của bạn :

#Create filter to match files you want to cache 
<Files *.js> 
Header add "Cache-Control" "max-age=604800" 
</Files> 

tôi đã viết về nó ở đây cũng:

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Answer 6

tốt nhất (và duy nhất) phương pháp là để thiết lập tiêu đề HTTP đúng, đặc biệt là những người thân: "Hết hạn", "Last-Modified", và "Cache-Control" . Làm thế nào để làm điều đó phụ thuộc vào phần mềm máy chủ bạn sử dụng.

Trong Improving performance… tìm "Tối ưu hóa ở phía máy chủ" để xem xét chung và liên kết có liên quan và cho "Bộ nhớ cache phía máy khách" cho lời khuyên cụ thể của Apache.

Nếu bạn là một fan hâm mộ của nginx (hoặc nginx in plain English) như tôi, bạn có thể dễ dàng cấu hình nó quá:

location /images { 
    ... 
    expires 4h; 
} 

Trong ví dụ trên bất kỳ tập tin từ/images/sẽ được lưu trữ trên máy khách cho 4 tiếng.

Bây giờ khi bạn biết đúng từ cần tìm (tiêu đề HTTP "Hết hạn", "Sửa đổi lần cuối" và "Kiểm soát bộ nhớ cache"), chỉ xem xét tài liệu của máy chủ web bạn sử dụng.

Answer 7

Tôi vừa hoàn thành dự án cuối tuần của mình cached-webpgr.js sử dụng lưu trữ cục bộ/lưu trữ web để lưu các tệp JavaScript. Cách tiếp cận này rất nhanh.thử nghiệm nhỏ của tôi cho thấy

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

Mã để đạt được điều đó rất nhỏ, bạn có thể kiểm tra nó tại dự án Github của tôi https://github.com/webpgr/cached-webpgr.js

Đây là một ví dụ đầy đủ về cách sử dụng nó.

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'); 
}); 

Answer 8

tôi có một hệ thống đơn giản đó là tinh khiết JavaScript. Nó kiểm tra những thay đổi trong một tập tin văn bản đơn giản mà không bao giờ được lưu trữ. Khi bạn tải lên phiên bản mới, tệp này sẽ bị thay đổi. Chỉ cần đặt JS sau ở đầu trang.

 (function(url, storageName) { 
 
      var fromStorage = localStorage.getItem(storageName); 
 
      var fullUrl = url + "?rand=" + (Math.floor(Math.random() * 100000000)); 
 
      getUrl(function(fromUrl) { 
 
//     first load 
 
       if (!fromStorage) { 
 
        localStorage.setItem(storageName, fromUrl); 
 
        return; 
 
       } 
 
//     old file 
 
       if (fromStorage === fromUrl) { 
 
        return; 
 
       } 
 
       // files updated 
 
       localStorage.setItem(storageName, fromUrl); 
 
       location.reload(true); 
 
      }); 
 
      function getUrl(fn) { 
 
       var xmlhttp = new XMLHttpRequest(); 
 
       xmlhttp.open("GET", fullUrl, true); 
 
       xmlhttp.send(); 
 
       xmlhttp.onreadystatechange = function() { 
 
        if (xmlhttp.readyState === XMLHttpRequest.DONE) { 
 
         if (xmlhttp.status === 200 || xmlhttp.status === 2) { 
 
          fn(xmlhttp.responseText); 
 
         } 
 
         else if (xmlhttp.status === 400) { 
 
          throw 'unable to load file for cache check ' + url; 
 
         } 
 
         else { 
 
          throw 'unable to load file for cache check ' + url; 
 
         } 
 
        } 
 
       }; 
 
      } 
 
      ; 
 
     })("version.txt", "version");

chỉ cần thay thế "version.txt" với tập tin của bạn mà luôn chạy và "phiên bản" có tên mà bạn muốn sử dụng để lưu trữ địa phương của bạn.