Tôi đang phát triển một trang web dựa trên mã nguồn Wordpress thông qua XAMPP. Đôi khi tôi thay đổi mã CSS, tập lệnh hoặc thứ gì đó khác và tôi nhận thấy trình duyệt của mình cần thời gian để áp dụng các sửa đổi. Điều này dẫn đến việc tôi phải sử dụng nhiều trình duyệt để làm mới một trình duyệt và nếu không áp dụng các kiểu mới, tôi sẽ thử trình duyệt thứ hai và nó luôn như vậy.
Có một số cách để tránh vấn đề này? Đôi khi tôi đang thay đổi mã mà không nhận thấy các sửa đổi trước đó.
Câu trả lời:
Nhấn Ctrl+ F5(hoặc Ctrl+ Shift+ R) để buộc tải lại bộ nhớ cache. Tôi tin rằng máy Mac sử dụng Cmd+ Shift+ R.
Trong PHP, bạn có thể tắt bộ nhớ cache bằng cách đặt ngày hết hạn thành một thời điểm trong quá khứ với tiêu đề:
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
Bạn có thể tắt bộ nhớ cache của Chrome bằng cách mở công cụ dành cho nhà phát triển F12, nhấp vào biểu tượng bánh răng ở góc dưới bên phải và chọn Tắt bộ nhớ cache trong hộp thoại cài đặt, như sau:
Hình ảnh lấy từ câu trả lời này .
Gõ about:configvào thanh URL sau đó tìm mục tiêu đề network.http.use-cache. Đặt cái này thành false.
Nếu bạn muốn tránh điều đó ở phía máy khách, bạn có thể thêm một cái gì đó như ?v=1.xliên kết tệp css khi nội dung tệp bị thay đổi. Ví dụ: nếu có, <link rel="stylesheet" type="text/css" href="css-file-name.css">bạn có thể thay đổi nó thành <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">điều này sẽ bỏ qua bộ nhớ đệm.
Nếu bạn có thể viết php, bạn có thể viết:
<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />
Nó sẽ luôn làm mới!
CHỈNH SỬA: Tất nhiên, nó không thực sự thiết thực cho toàn bộ trang web, vì bạn sẽ không thêm nó theo cách thủ công cho mọi thứ.
Kiểm tra cái này: Làm cách nào để buộc trình duyệt sử dụng phiên bản mới nhất của biểu định kiểu?
Giả sử tệp css của bạn là foo.css, bạn có thể buộc khách hàng sử dụng phiên bản mới nhất bằng cách thêm một chuỗi truy vấn như hình dưới đây.
<link rel="stylesheet" href="foo.css?v=1.1">
Quan điểm của nhà phát triển
Nếu bạn đang ở chế độ phát triển (như trong câu hỏi ban đầu), cách tốt nhất là tắt bộ nhớ đệm trong trình duyệt thông qua thẻ meta HTML. Để làm cho cách tiếp cận này trở nên phổ biến, bạn phải chèn ít nhất ba thẻ meta như hình dưới đây.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Theo cách này, bạn với tư cách là nhà phát triển, chỉ cần làm mới trang để xem các thay đổi. Nhưng đừng quên nhận xét rằng mã khi đang được sản xuất, sau tất cả, bộ nhớ đệm là một điều tốt cho khách hàng của bạn.
Chế độ Sản xuất
Vì trong quá trình sản xuất, bạn sẽ cho phép lưu vào bộ nhớ đệm và khách hàng của bạn không cần biết cách buộc tải lại toàn bộ hoặc bất kỳ thủ thuật nào khác, bạn phải bảo đảm trình duyệt sẽ tải tệp mới. Và vâng, trong trường hợp này, cách tốt nhất mà tôi biết là thay đổi tên của tệp.
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
Nó sẽ làm mới nếu sửa đổi.
Đảm bảo rằng điều này không xảy ra từ DNS của bạn. Ví dụ: Cloudflare có nó, nơi bạn có thể bật chế độ phát triển, nơi nó buộc thanh lọc các bảng định kiểu và hình ảnh của bạn vì Cloudflare cung cấp bộ nhớ đệm tăng tốc. Điều này sẽ vô hiệu hóa nó và buộc nó phải cập nhật mỗi khi ai đó truy cập trang web của bạn.
Phần mở rộng Firefox này là giải pháp duy nhất mà tôi có thể làm việc: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
Câu trả lời được chấp nhận ở trên là đúng. Tuy nhiên, nếu bạn chỉ muốn tải lại bộ nhớ cache định kỳ và bạn đang sử dụng Firefox, các công cụ Web Developer (trong mục menu Tools kể từ tháng 11 năm 2015) sẽ cung cấp tùy chọn Network. Điều này bao gồm một nút Tải lại. Chọn Tải lại để đặt lại bộ nhớ cache một lần.
Nếu bạn muốn chắc chắn rằng các tệp này được Chrome làm mới đúng cách cho tất cả người dùng, thì bạn cần phải có must-revalidatetrong Cache-Controltiêu đề. Điều này sẽ khiến Chrome kiểm tra lại các tệp để xem liệu chúng có cần được tìm nạp lại hay không.
Đề xuất tiêu đề phản hồi sau:
Cache-Control: must-validate
Điều này yêu cầu Chrome kiểm tra với máy chủ và xem có tệp mới hơn không. Nếu có một tệp mới hơn, nó sẽ nhận nó trong phản hồi. Nếu không, nó sẽ nhận được phản hồi 304 và đảm bảo rằng phản hồi trong bộ nhớ cache được cập nhật.
Nếu bạn KHÔNG đặt tiêu đề này, thì trong trường hợp không có bất kỳ cài đặt nào khác làm mất hiệu lực tệp, Chrome sẽ không bao giờ kiểm tra với máy chủ để xem có phiên bản mới hơn hay không.
Đây là một bài đăng trên blog thảo luận thêm về vấn đề này.
Thay vì thẻ liên kết trong html-head sang tệp css bên ngoài, hãy sử dụng php-include:
<style>
<?php
include("style.css");
?>
</style>
Loại hack, nhưng hiệu quả với tôi :)
Tôi đã quyết định rằng vì trình duyệt không kiểm tra các phiên bản mới của tệp css và js, nên tôi đổi tên các thư mục css và js của mình bất cứ khi nào tôi thực hiện thay đổi. Tôi sử dụng css1 đến css9 và js1 đến js9 làm tên thư mục. Khi tôi lên 9, lần tiếp theo tôi bắt đầu lại từ 1. Đó là một nỗi đau, nhưng lần nào nó cũng hoạt động hoàn hảo. Thật nực cười khi phải bảo người dùng gõ.
Tôi có một trường hợp, trong đó tôi cần có thể tạo và thay đổi bảng định kiểu của mình từ xa ảnh hưởng đến hàng nghìn khách hàng, nhưng do rủi ro tải mạng nặng, tôi không tắt bộ nhớ cache.
Vì tôi có thể thay đổi nội dung HTML từ xa, sau đó tôi liên kết biểu định kiểu với một mã băm phù hợp với nội dung của biểu định kiểu.
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
Điều đó nói rằng, tôi cũng sử dụng hàm javascript phía máy khách để thay thế cẩn thận các nút và thuộc tính khi nội dung HTML thay đổi, nghĩa là thẻ liên kết biểu định kiểu sẽ không bị thay thế, chỉ thuộc tính href thay đổi.
Tình huống này hoạt động tốt trong Chrome, Firefox và Edge trên Windows, cũng như Chrome trên Android, nhưng không phải lúc nào cũng hoạt động trong webclients trên Android. Vì vậy, ít nhiều tôi đang tìm kiếm thứ gì đó để buộc / kích hoạt cập nhật bằng javascript - một cách tối ưu mà không cần tải lại trang.
Thử đi:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
Nếu bạn cần thứ gì đó sau dấu '?' điều đó khác nhau mỗi khi trang được truy cập thì ý time()muốn thực hiện. Để điều này vĩnh viễn trong mã của bạn không thực sự là một ý tưởng hay vì nó sẽ chỉ làm chậm quá trình tải trang và có lẽ không cần thiết.
Tôi nhận thấy rằng việc buộc làm mới biểu định kiểu sẽ hữu ích nếu bạn đã thực hiện các thay đổi sâu rộng đối với bố cục của trang và truy cập biểu định kiểu mới là điều quan trọng để có một cái gì đó hợp lý xuất hiện trên màn hình.