Chrome không lưu hình ảnh trong SVG

Question

Tôi vừa phát hiện thấy Chrome không lưu trữ hình ảnh được đặt bên trong SVG nếu tiêu đề cache-control được đặt thành no-cache. Firefox & IE10 dường như bỏ qua cài đặt này.

tôi đã tạo ra một trang thử nghiệm nhỏ với một SVG tĩnh:

HTML:

<div style="width: 500px; text-align: center;"> 
    <input id="move-left-btn" type="button" value="&lt;&lt;"> 
    <input id="move-right-btn" type="button" value="&gt;&gt;"> 
</div> 

<div class="svgwrapper" style="width: 500px; height: 250px; background-color: lightgrey;"> 
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="250"> 
     <g id="svggroup" class="transition-on" transform="matrix(0.2,0,0,0.2,80,35)"> 
      <image width="1672" height="887" opacity="1" xlink:href="https://dl.dropboxusercontent.com/sh/q7htlj5h8qqfhjf/SVDuynM7R3/car.png"></image> 
     </g> 
    </svg> 
</div> 

Javascript:

$(document).ready(function() { 
    var curXPos = 80; 

    // Local test function which represent some server calls in my "real life" scenario 
    // Just updates the x-position in the transform matrix in this test case 
    function updateSvgText(svgText, posXDelta) { 
     curXPos += posXDelta; 
     if (curXPos < 0) { 
      curXPos = 160; 
     } else if (curXPos > 160) { 
      curXPos = 0; 
     } 

     return svgText.replace(/matrix\(.*\)/, 'matrix(0.2,0,0,0.2,' + curXPos + ',35)'); 
    } 

    // Fetch the new SVG (in real life from server) and rerender it 
    function moveSvg(posXDelta) { 
     var svg = $('#svg'), 
      svgText = updateSvgText($('.svgwrapper').html(), posXDelta); 

     svg.empty(); 
     svg.append($(svgText).children()); 
    } 

    $('#move-left-btn').click($.proxy(moveSvg, this, -20)); 
    $('#move-right-btn').click($.proxy(moveSvg, this, 20)); 
}); 

• dụ Làm việc với cache-control tiêu đề của hình ảnh nguồn đặt thành no-cache (nhấp nháy trong chrome sau mỗi lần nhấn vào nút "di chuyển") :
  http://jsfiddle.net/zF6NF/4/

• Cùng ví dụ với hình ảnh nguồn khác nhau với cache-control tiêu đề thiết lập để max-age=315360000,public (không nhấp nháy):
  http://jsfiddle.net/zF6NF/5/

Trong Chrome bạn sẽ nhìn thấy tải lại các hình ảnh trên mỗi nút nhấp chuột trong ví dụ đầu tiên ("nhấp nháy" của hình ảnh & hiển thị trong tab mạng của các công cụ dev) trong khi Firefox hiển thị SVG trong cả hai ví dụ một cách trơn tru mà không cần tải lại.

Một số thông tin bổ sung:

1. Đây chỉ là một ví dụ. Trong "kịch bản thực tế" của tôi, tôi nhận được SVG mới từ máy chủ (thay vì gọi phương thức updateSvgText) có nghĩa là tôi không thể thực hiện cập nhật từng phần của SVG bằng cách thay đổi giá trị của thuộc tính ma trận biến đổi nhưng có để tái đầu tư toàn bộ SVG mỗi lần (ít nhất là bây giờ ...).

2. tôi không thể kiểm soát nơi những hình ảnh xuất phát từ điều này có nghĩa 2 điều:

   • tôi không thể thay đổi tiêu đề cache-control
   • tôi không thể tạo Base64 mã hóa dữ liệu URI, lưu chúng địa phương và chỉ cần thay thế những hình ảnh bên trong SVG với những dữ liệu URI trước khi render (không thể tạo Base64 mã hóa dữ liệu uri vì chính sách "Cùng nguồn gốc tài nguyên" ...)

Có cách nào để một trong hai ...

• Overwrite/bác bỏ các cache-control tiêu đề tại địa phương ngay cả khi hình ảnh là từ một địa điểm từ xa không kiểm soát được?
• Tạo dữ liệu mã hóa Base-uri từ một hình ảnh được tải từ một miền khác mà tôi không có quyền kiểm soát đối với phía máy khách?
• Bằng cách nào đó, hãy bảo Chrome luôn lưu vào bộ nhớ cache hình ảnh bên trong SVG của tôi?

Không cần phải nói rằng các giải pháp khác cũng rất được hoan nghênh!

Cảm ơn

Answer 1

Thật không may, khi nói đến bộ nhớ đệm, đó là 99% công việc của máy chủ.

In-dept dẫn: here

trình duyệt sẽ luôn luôn tìm kiếm thêm các phiên bản gần đây của tập tin dựa trên một số điều kiện:

• Mục lưu trữ không có ngày hết hạn và nội dung được truy cập cho lần đầu tiên trong phiên trình duyệt
• Mục nhập được lưu trong bộ nhớ cache có ngày hết hạn nhưng đã hết hạn
• Cache-Control/Pragma yêu cầu trình duyệt không lưu vào bộ nhớ cache
• Khắc phục trong tiêu đề là một cơn đau.

Về giải pháp mà bạn có:

• Hãy rất van lơn để kẻ máy chủ của bạn mà bạn cần nhớ đệm (loại bỏ etag, Cache-Control: public, max-age = 31.536.000, pragma: public)
• Tạo proxy trên miền của bạn yêu cầu hình ảnh từ trang web, (tùy chọn chuyển đổi thành base64) rồi gửi cho khách hàng của bạn (với tiêu đề phù hợp). Dưới đây là ví dụ về PHP: here