Làm cách nào để ngăn các trình duyệt lưu trong bộ nhớ đệm tập tin CSS?

Question

Khi tôi tạo một trang, liên kết nó vào tệp CSS và mở nó trong trình duyệt, nó hoạt động tốt. Nhưng nếu thực hiện thay đổi và làm mới trang lại giữa các khoảng thời gian rất ngắn, thay đổi sẽ không được phản ánh. Nhưng sau đó, khi tôi làm mới trang một lần nữa, những thay đổi sẽ xuất hiện.

Vì vậy, bằng cách nào đó trình duyệt giữ tệp CSS được lưu trong bộ nhớ cache và hết hạn sau một thời gian. Làm thế nào để làm cho bộ nhớ cache của trình duyệt không có tệp CSS hoặc HTML. Sẽ tốt hơn nếu tôi có thể chặn nó trên một miền cụ thể.

Tôi đang trên Ubuntu, sử dụng Chrome và Firefox, cố gắng để ngăn trình duyệt bộ nhớ đệm file CSS vào 'localhost' ... Làm thế nào để làm điều đó ...

Thanks ...

Answer 1

Bạn có thể mở Công cụ dành cho nhà phát triển bằng cách nhấn Ctrl+Shift+J và sau đó bạn sẽ tìm thấy biểu tượng bánh răng ở dưới cùng bên phải. Khi bạn nhấp vào nó, bạn sẽ thấy một tùy chọn để vô hiệu hóa bộ nhớ đệm.

Answer 2

Nó sẽ giúp biết trang web được lưu trữ như thế nào, vì bạn có thể định cấu hình trang web này trong hầu hết các máy chủ web.

Ngoài ra, bạn nên giới thiệu cơ chế chặn truy xuất bộ nhớ cache sẽ sửa đổi các liên kết đến tệp CSS được đề cập khi bạn thay đổi nội dung của tệp CSS. Sau đó, trình duyệt sẽ tải lại tệp CSS vì HTML đề cập đến một URL khác.

Một ví dụ điển hình của một bộ nhớ cache busting cơ chế là Ruby on Rails 3.1 đường ống tài sản mà cũng minifies tập tin và gzips họ nếu trình duyệt hỗ trợ họ:

Rails 3 - Asset Pipeline -- What does it mean to me?

http://2beards.net/2011/11/the-rails-3-asset-pipeline-in-about-5-minutes/

Answer 3

Something như đơn giản vì điều này sẽ hoạt động:

<link rel="stylesheet" src="/css/screen.css?v={CURRENT_TIMESTAMP}"> 

Chỉ cần thay thế {CURRENT_TIMESTAMP} wit h dấu thời gian thực trong mã phía máy chủ của bạn. Điều này làm cho trình duyệt nghĩ rằng đó là một tệp mới vì chuỗi truy vấn và nó sẽ được tải xuống lại. Bạn cũng có thể sử dụng thời gian sửa đổi thực tế của tệp (filemtime('/path/to/css/screen.css') nếu bạn đang sử dụng PHP) để tránh tải xuống không cần thiết.

Answer 4

Cách tiếp cận dường như không mang tính chất nhưng đá rắn là cung cấp cho nội dung một tên mới, khi nội dung thay đổi. Điều này giải quyết vấn đề cho tất cả người dùng của bạn, không chỉ bạn:

<link rel="stylesheet" src="/css/screen_034.css"> 
<link rel="stylesheet" src="/css/screen_035.css"> 
<link rel="stylesheet" src="/css/screen_036.css"> 

Hoặc có thể (nhưng nó còn hơn một nỗi đau để thay đổi trong một IDE, và đôi khi gây ra những vấn đề không liên quan với bộ nhớ đệm):

<link rel="stylesheet" src="/css/screen.css?pretend_version_number=034"> 

Không có gì khác hoạt động khá tốt trong môi trường sản xuất quy mô lớn, nơi hàng triệu bản sao của một tệp css cũ hơn có thể nằm trong nhiều bộ đệm trung gian hoặc trình duyệt khác nhau. Một số khách hàng bỏ qua tiêu đề kiểm soát bộ nhớ cache, và bạn không thực sự muốn bộ nhớ đệm bị đảo ngược, ít nhất là không trong sản xuất.

Trong quá trình phát triển, bạn có thể nhấn Ctrl + Shift + J (Chrome) và tắt bộ nhớ đệm.