Tại sao máy chủ bỏ qua các thay đổi trong tệp mã ngay cả khi bộ đệm bị tắt?

14

Tôi kiểm tra mã html / js trên localhost của mình (Windows 7, Chrome v79.0.3945.130 (64-bit)) và khoảng 50% thay đổi mã thời gian không được phản ánh trong trình duyệt (Tôi thấy nó với Dev Tools / Nguồn ).
Có rất nhiều lời khuyên trên internet, nhưng dường như không hoạt động:

Nhấp chuột phải vào tải lại và chọn "Bộ nhớ cache trống và Tải lại cứng" - không giúp ích trong 30% trường hợp.
Vô hiệu hóa bộ đệm trong tab Mạng của Công cụ phát triển Chrome - không giúp ích.
Thêm <meta http-equiv="Cache-control" content="no-cache">vào tiêu đề - không giúp đỡ.
Thay thế <script src="common.js"></script>bằng <script src="common.js?blabla"></script>- giúp trong 60% các trường hợp, nhưng bạn cần phải làm điều đó sau mỗi thay đổi là một việc vặt rất lớn. Ngoài ra, nó không hoạt động với các thay đổi html.
Sao chép một tệp vào một tệp mới (như index.html sang index2.html) và thay thế tên tệp trong mã - luôn hoạt động, nhưng đó là một việc vặt thậm chí còn lớn hơn.

Vấn đề chính xác tương tự hiện tại khi tôi cam kết mã với github.io

Xin hãy giúp tôi làm cho nó để trang web phản ánh các thay đổi mã ngay lập tức.

Chỉnh sửa: Tôi đã tạo một tệp index3.html và chỉ đặt "hello world" ở đó. Mở tệp trong trình duyệt. Thay đổi thành "hello world2" - trình duyệt đã cập nhật nội dung. Đã thay đổi thành "hello world3" - trình duyệt vẫn hiển thị "hello world2" ngay cả sau khi tải lại nhiều lần và "Bộ nhớ cache trống và tải lại cứng". Tôi đã đổi thành "hello world4" - trình duyệt vẫn hiển thị "hello world2". Trong 4 giờ, tôi đổi thành "hello world5" - trình duyệt vẫn hiển thị "hello world2". Tập tin này tôi chỉnh sửa bằng notepad cơ bản.

Edit2: Mọi người cứ hỏi tôi đang sử dụng máy chủ nào. Điều này có vẻ như là một phần của vấn đề. Thật không may, tôi không biết và tôi cũng không biết chính xác mình cần phải làm gì để kiểm tra nó. Đây là tất cả những gì tôi đã tìm ra cho đến nay:

Tôi có inetpub/wwwrootthư mục nơi tôi đặt các tệp html & js và sau đó mở index.html trong trình duyệt tại http://localhost/.
Bảng điều khiển Mạng của tôi trong Devs Tools trông như thế này: liên kết hình ảnh .
Thiết lập máy chủ rất nhanh và không yêu cầu bất kỳ phần mềm bổ sung nào để cài đặt. Tức là tôi không sử dụng node.js.
Có iisstart.htm tại inetpub/wwwrootvà khi tôi mở http://localhost/iisstart.htmnó nói IIS7.

— klm123
nguồn

Đôi khi tôi thấy việc vô hiệu hóa bộ đệm trong các công cụ phát triển chrome + làm mới + bật lại bộ đệm + làm mới đôi khi khắc phục sự cố? Có thể đáng để bắn ...

— Nick Parsons

2

Bạn đang sử dụng loại máy chủ nào?

— Jhecht

@ Tôi làm thế nào để kiểm tra nó?

— klm123

1

Từ những gì tôi thấy trong câu trả lời, có lẽ bạn sẽ làm việc xung quanh nó với một tham số. Và điều đó có thể sẽ làm việc. Tuy nhiên, thông thường, điều này không cần thiết khi bạn tắt bộ đệm trong các công cụ phát triển chrome. Vì vậy, linh cảm của tôi sẽ có một bộ đệm khác liên quan. Giữa bạn và máy chủ có thể là bất kỳ số lượng công nghệ bộ nhớ đệm bổ sung. Một vài ví dụ: Bộ nhớ đệm phía máy chủ (ví dụ Varnish), bộ nhớ đệm CDN (ví dụ: Cloudflare), proxy cục bộ từ bộ định tuyến / tường lửa (ví dụ: squid-cache) và những thứ tương tự. Tôi cũng sẽ kiểm tra chúng.

— Jey DWork

1

@ klm123 mà không biết máy chủ web này nói về điều gì thì không thể nói cho bạn biết, làm thế nào để thay đổi hoặc kiểm tra cấu hình bộ đệm cho nó. Nếu bạn không biết gì về máy chủ web của mình, một cách có thể để kiểm tra xem nó có trong tab mạng của devTools không: kiểm tra các tiêu đề phản hồi được tải index.htmlcho một cái gì đó như một tiêu đề X-Powered-Byhoặc Servercó thể đưa ra gợi ý trên máy chủ web. Googling cho đường dẫn tệp của bạn inetpub/wwwrootmạnh mẽ trỏ đến một máy chủ IIS.

— acran

6

Sử dụng một tham số là cách đúng đắn! Tại đây, bạn có thể thêm số phiên bản mà bạn chỉ thay đổi theo các thay đổi lớn theo cách thủ công và để gỡ lỗi, bạn có thể đặt nó thành Date.time () để trong thẻ <head> của bạn, điều này buộc tất cả các phiên bản được lưu trong bộ nhớ cache được ghi đè vì tham số luôn luôn là mới một:

< script type="text/javascript"> 
    var script = document.createElement('script'); 
    var version = Date.time();
    script.src = "common.js?v="+version; 
    document.head.appendChild(script) 
< /script>

Hi vọng điêu nay co ich!

— lehm.ro
nguồn

Tôi đoán tôi có thể làm điều đó. Nhưng nó có hiệu quả giống như lựa chọn thứ tư của tôi không? để thêm "? blabla" sau tên tệp. Nó không hoạt động khá thường xuyên - đó là cùng một tên tệp trong tab Nguồn hoặc blabla được thêm vào, nhưng nội dung của tệp vẫn giống nhau.

— klm123

Nó không giống nhau. Khi một tham số được sử dụng hai lần (trong đó sẽ không bao giờ xảy ra với Date.time () nó có thể làm cho một phiên bản cache blabla là như nhau sau khi sử dụng gấp đôi so với không sử dụng nó ở tất cả.?.

— lehm.ro

tham số không được sử dụng hai lần. Tôi chỉnh sửa mã, sau đó thay đổi tham số, sau đó kiểm tra mã nguồn trong trình duyệt và đó là mã cũ.

— klm123

Bạn đã thử cách tiếp cận của tôi?

— lehm.ro

Cách tiếp cận của bạn giúp, cảm ơn bạn. Nhưng nó không giải quyết được vấn đề của tôi. Những gì bạn viết là không đúng trong tình huống của tôi. "Buộc tất cả các phiên bản được lưu trong bộ nhớ cache bị ghi đè vì tham số luôn luôn là một phiên bản mới", việc thay đổi tham số thành một phiên bản mới không buộc bộ nhớ cache của tôi tải lại một cách đáng tin cậy. Ngoài ra, nó không thể giúp thay đổi trong index.html.

— klm123

3

Trong máy chủ IIS7 Windows chạy trên Windows 7, để ngăn bộ nhớ đệm nội dung của bạn, bạn cần thực hiện một số thay đổi đối với một trong các tệp cấu hình của bạn được gọi web.config. Các tệp cấu hình cho IIS 7 trở lên được đặt ở %WinDir%\System32\Inetsrv\Config folderđâu %WinDir%là thư mục bạn đã cài đặt Windows (thường C:/Windows).

Tạo một bản sao lưu của web.configtập tin của bạn trước khi chỉnh sửa nó để bạn có thể quay lại với nó nếu những thay đổi bạn sẽ thực hiện đối với tập tin sẽ phá vỡ nó.

Trong web.configtệp của bạn , chỉ cần thêm các mục sau để ngăn bộ đệm của bạn index.html:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

Có đường dẫn tệp cho web.configtệp từ đây: Windows Doc: Cấu hình tham chiếu

Có cấu hình cho bộ đệm ở trên từ đây: Làm cách nào để tắt bộ đệm của tệp HTML ứng dụng một trang được cung cấp qua IIS?

— AndrewL64
nguồn

Không có web.config tại đường dẫn đã đề cập. Tôi đã tạo nó và đặt mã của bạn ở đó. Nhưng tôi đã phải thay thế index.html bằng đường dẫn đầy đủ như projectName/index.htmltôi sao chép từ url trong trình duyệt của mình http:/localhost/projectName/index.html. Kết quả - không ảnh hưởng đến vấn đề bộ nhớ đệm.

— klm123

@ kim123 Bạn có thể thử thêm web.configtệp vào thư mục gốc của trang web của bạn (thư mục nơi trang web của bạn đang ở) thay vào đó và thay đổi đường dẫn trở lại chỉ index.htmlvà xem nếu nó hoạt động.

— AndrewL64

tôi đã làm. nó không giúp được gì

— klm123

1

Tôi đã có cùng một vấn đề và đây là danh sách kiểm tra của tôi:

Kiểm tra web.config (bộ nhớ đệm và clientcache, chính sách bộ đệm kernel, v.v.) hoặc .htaccess (Tiêu đề đặt Bộ điều khiển bộ đệm ).
Nếu bạn đã sử dụng các ngôn ngữ động như ASP, PHP có thể có cài đặt bộ đệm trong. Trong một trường hợp tôi đã tìm thấy <%Response.Expires=1440%>trong nhiều dòng mã ASP và nó đã vượt qua tất cả các cài đặt khác! Trong php session_cache_expirecó thể làm như vậy.
Nếu bạn đang sử dụng IIS thì hãy kiểm tra máy chủ > Tiêu đề phản hồi HTTP để đảm bảo không có gì về bộ nhớ đệm cũng tương tự đối với các trang web riêng lẻ được liệt kê dưới tên máy chủ.
kiểm tra http-equiv="Cache-control"các tiêu đề html (bạn đã vượt qua bài kiểm tra này!).

Cuối cùng tôi phải nói rằng trong tất cả các tình huống ở trên, Kiểm tra Vô hiệu hóa bộ đệm trong tab newtwork trong bảng điều khiển Chrome luôn hoạt động để tôi xem phiên bản mới của trang tuy nhiên điều này chỉ tốt cho mục đích gỡ lỗi và khách truy cập sẽ không làm điều đó!

— Ali Sheikhpour
nguồn

1. Tôi tìm thấy web.config và .htaccess ở đâu? 2. Tôi chỉ sử dụng html và js. 3. Tiêu đề phản hồi HTTP trông như thế này: imgur.com/leYpdej

— klm123

Nếu bạn đang sử dụng IIS, web.congfig nằm trong root ot wwwroot. Cũng có tệp Machine.config ở cấp máy chủ mà bạn có thể sửa đổi nó từ bảng điều khiển IIS trực tiếp từ đây: stackoverflow.com/questions/2325473/where-is-machine-config . Nếu bạn đang sử dụng máy chủ apache trên windows, vui lòng serach windows để tìm .htaccess @ klm123

— Ali Sheikhpour

0

Trong trường hợp cụ thể với việc sử dụng Google Chrome, hãy thử điều này: Mở Công cụ phát triển -> Chuyển đến tab 'Mạng'. Chọn hộp kiểm 'Vô hiệu hóa bộ đệm', sau đó làm mới trang.

LƯU Ý: Để làm việc này mỗi khi cửa sổ Dev Tools phải luôn mở.

Tuy nhiên, để tuyên truyền các thay đổi cho người dùng của bạn, mà không cần họ phải làm mới trang, v.v., bạn phải nối thêm các phiên bản tệp ở cuối mỗi tệp được tham chiếu cho các tệp thay đổi thường xuyên (như bạn đã chỉ ra). Ví dụ:

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=20b379f72a37" >

Phần v=20b379f72a37cuối được thêm vào là phần băm tệp được tạo tự động của nội dung tệp.

— Martin Shishkov
nguồn

Đó là mục 2 trong danh sách của tôi.

— klm123

Bạn có chắc chắn cửa sổ Dev Tools vẫn mở?

— Martin Shishkov

cửa sổ dev tools đang mở, hộp kiểm được chọn [nhưng tôi thường nhìn vào tab nguồn] và tôi thậm chí còn làm mới khó khăn.

— klm123

0

Đây là một cú sút xa - nhưng bạn đang sử dụng loại trình soạn thảo / IDE nào? Ngoài ra, loại chỉnh sửa nào bạn đang thực hiện cho index.html của mình?

Bạn có thể cung cấp một số ví dụ về các chỉnh sửa như vậy không được phản ánh khi bạn lưu và thử tải tệp không?

Tôi muốn thử tái tạo vấn đề của bạn. Từ những gì mọi người đang đề xuất, có vẻ như vấn đề không nằm trong chính mã. Tôi nghi ngờ đây là một vấn đề môi trường nhưng tôi cần thêm thông tin từ bạn để xác nhận sự nghi ngờ của tôi.

— dự báo
nguồn

Tôi sử dụng mã studio microsoft visual. Ví dụ: thay thế <script src = "common.js"> </ script> bằng <script src = "common.js? Blabla">. Ví dụ2: thêm nút mới, thêm div mới, thêm lệnh gọi chức năng tải. Tbh nó trông giống như bất kỳ loại chỉnh sửa.

— klm123

Xem các chỉnh sửa ở cuối bài đăng câu hỏi của tôi.

— klm123

0

Những gì bạn viết trong HTML meta là một đề xuất cho trình duyệt, không phải là một hướng dẫn nghiêm ngặt. Nếu bộ nhớ đệm nghiêm ngặt được bật trong trình duyệt, điều này sẽ không giúp ích.

Các giải pháp được mô tả tốt: https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

Tôi thích ở phía máy chủ để thêm vào tập lệnh phiên bản có ngày cập nhật cuối cùng của tập tin.

<script src="/myScript.js?v=1579780745150"></script>

Trong đó 1579780745150 là Unix Timestamp cập nhật chính tệp myScript.js . Nó chỉ hoạt động với các tệp riêng của nó, nhưng không cần thiết bên ngoài. Thông thường nhất trong tên tập tin là phiên bản.

— Alexanderr Smityukh
nguồn

Nếu bạn cần mã của phụ trợ. Hãy cho tôi biết bạn đã sử dụng nền tảng nào.

— Alexanderr Smityukh

0

Điều này có lẽ thực sự gây nản lòng và có vẻ như bạn không làm gì sai cả.

Vấn đề có thể là một cái gì đó giữa trình duyệt của bạn và tệp tập lệnh mà bạn đang gọi đang thực hiện một số bộ đệm.

Để xác định nó là gì, hãy cho tôi hỏi làm thế nào bạn duyệt đến url localhost?

Ví dụ:

file://path/to/file.html
http://localhost/file.html
http://127.0.0.1/file.html
http://[machine's-hostname]/file.html
http://[custom-domain-defined-in-hosts-file]/file.html

Nếu bạn đang chạy, file://path/to/file.htmlđiều này có nghĩa là bạn không duyệt qua máy chủ web / proxy. Nếu đó là http://[something]/file.htmlthì bạn đang chạy một số loại máy chủ web và đó có thể là thủ phạm. Tìm kiếm một số loại cài đặt nơi bạn có thể tắt bộ nhớ đệm.

Nếu bạn không sử dụng máy chủ web và đang duyệt trực tiếp tệp html cục bộ mà không có máy chủ web, thì tôi sẽ đề xuất trình duyệt là thủ phạm. Nếu đây là trường hợp, tôi khuyên bạn nên tắt bộ nhớ đệm trình duyệt như Martin Shishkov đề xuất.

— Trưởng khoa
nguồn

Đó là http://localhost/ProjectName/index.htmlnơi cài đặt này nơi bạn có thể tắt bộ nhớ đệm có thể?

— klm123

Có vẻ như từ ảnh chụp màn hình bạn đã đăng ở nơi khác, bạn đang sử dụng IIS, (còn được gọi là Dịch vụ thông tin Internet của Microsoft). Một giải pháp nhanh chóng là chỉ cần nhấp đúp vào tệp .html của bạn để tải nó trong trình duyệt, sẽ sử dụng một file://path/to/projectName/index.html. Điều đó sẽ loại bỏ máy chủ web khỏi phương trình. Để tiếp tục sử dụng IIS và chỉ cần sửa bộ nhớ cache, hãy tham khảo bài viết này: support.microsoft.com/en-us/help/247404/ chủ

— Chủ nhà Dean

0

Chrome thực hiện điều này trong đó, nếu tệp không thay đổi quá nhiều, không chắc ý nghĩa của nó, thì nó sẽ sử dụng phiên bản bộ đệm cache được biên dịch lại. Đối với html nó có nghĩa là cây don được phân tích cú pháp. Đối với mã được biên dịch trước, v.v.

Thường có nhiều cách để giải quyết vấn đề này, nhiều khung sử dụng hàm băm bên trong tên tệp, như : main.md5hash.js, vì việc thay đổi tên tệp làm mất hiệu lực bất kỳ bộ đệm.

Sau đó, bạn sẽ bị bỏ lại với khả năng html không cập nhật. Và để rõ ràng, tôi không chắc chắn, bạn luôn có thể thêm nhận xét với blob ngẫu nhiên ... như một ngày.

— Akxe
nguồn

0

Dựa trên các cập nhật câu trả lời của bạn, tôi sẽ nói rằng vấn đề của bạn là do IIS v7 gây ra rằng nó sử dụng Bộ nhớ PC của bạn để lưu vào bộ nhớ cache không phải là ổ cứng cục bộ, đó là lý do Hard reloadvà tất cả các phương pháp khác dường như không hoạt động đúng.

Tôi có thể nghĩ ra 3 giải pháp:

1. Khắc phục sự cố bộ đệm IIS của bạn: (Không được kiểm tra do thực tế là tôi không có PC với IIS)

Từ menu Bắt đầu , bấm Công cụ quản trị , rồi bấm Trình quản lý dịch vụ thông tin Internet (IIS). (xem hình ảnh )
Trong chế độ xem dạng cây ở phía bên trái , tìm ứng dụng của bạn.
Chọn mục menu Bộ đệm đầu ra .
Nhấp vào Thêm quy tắcextension bộ đệm .aspx, sau đó nhập các tệp mà bạn muốn tắt bộ đệm trên chúng , ví dụ : .css, .js, v.v ... (một tại thời điểm tôi đoán?)
Bây giờ, bạn có thể Bỏ chọn bộ đệm ẩn chế độ người dùng hoặc Kiểm tra ngăn chặn tất cả bộ đệm. Nó sẽ trông giống như thế này:

Nguồn giải pháp - Đọc thêm về IIS 7 Cache

2. Sử dụng một số lựa chọn thay thế cho IIS Có khá nhiều nhưng tôi khuyên bạn nên (dựa trên kinh nghiệm của tôi) WAMP hoặc XAMPP Cả hai sẽ cung cấp cho bạn một "môi trường" phát triển tốt hơn và cả hai đều hỗ trợ Windows 7. Ngoài ra, nếu bạn quen thuộc với Mã VS bạn chỉ có thể sử dụng tiện ích mở rộng Live Server .

3. Sử dụng chế độ Ẩn danh Chrome trong khi phát triển. (Không chắc chắn nếu nó hoạt động cho IIS7)

— awran5
nguồn

Thêm quy tắc bộ đệm / Ngăn chặn tất cả bộ nhớ đệm - không giúp đỡ [đã thử với html]. Chế độ ẩn danh - không giúp đỡ.

— klm123

Bạn đã thử với .jscác tập tin? nó phụ thuộc vào những thay đổi bạn đang thực hiện.

— awran5