Co robi dołączenie „? V = 1” do adresów URL CSS i JavaScript w tagach linków i skryptów?

Patrzyłem na szablonowy szablon HTML 5 (z http://html5boilerplate.com/ ) i zauważyłem użycie "?v=1"w adresach URL w odniesieniu do plików CSS i Javascript.

1. Co robi dołączanie "?v=1"do adresów URL CSS i JavaScript w tagach linków i skryptów?
2. Nie wszystkie adresy URL JavaScript mają "?v=1"(przykład z poniższego przykładu:) js/modernizr-1.5.min.js. Czy istnieje powód, dla którego tak się dzieje?

Próbka z ich index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Zwykle mają one na celu upewnienie się, że przeglądarka otrzyma nową wersję, gdy witryna zostanie zaktualizowana o nową wersję, np. W ramach naszego procesu budowania mielibyśmy coś takiego:

/Resources/Combined.css?v=x.x.x.buildnumber

Ponieważ zmienia się to z każdym wypchnięciem nowego kodu, klient jest zmuszony pobrać nową wersję, tylko z powodu querystring. Spójrz na tę stronę (w czasie tej odpowiedzi), na przykład:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

Myślę, że zamiast numeru wersji, zespół SO poszedł z hashem pliku, co jest jeszcze lepszym podejściem, nawet w nowej wersji, przeglądarki zmuszały się do pobierania nowej wersji tylko wtedy, gdy plik faktycznie się zmienia.

Oba te podejścia pozwalają ustawić nagłówek pamięci podręcznej na coś śmiesznie długiego, powiedzmy 20 lat ... ale gdy się zmieni, nie musisz się martwić o ten nagłówek pamięci podręcznej, przeglądarka widzi inny querystring i traktuje to jako inny, nowy plik.

Daje to pewność, że pobierasz najnowszą wersję pliku css lub js z serwera.

A później możesz dołączyć, "?v=2"jeśli masz nowszą wersję "?v=3", "?v=4"i tak dalej.

Zauważ, że możesz użyć dowolnego querystring, 'v' nie jest koniecznością, na przykład:

"?blah=1„zadziała również.

I

"?xyz=1002" będzie działać.

Jest to powszechna technika, ponieważ przeglądarki teraz lepiej i dłużej buforują pliki js i css.

Rozwiązanie hashujące jest przyjemne, ale niezbyt czytelne dla człowieka, jeśli chcesz wiedzieć, jaka wersja pliku znajduje się w twoim lokalnym folderze sieciowym. Rozwiązaniem jest date/timestemplowanie wersji, aby można było łatwo porównać ją z plikiem na serwerze.

Na przykład, jeśli twój .js or .cssplik jest datowany 2011-02-08 15:55:30(ostatnia modyfikacja), to wersja powinna być równa.js?v=20110208155530

Powinny być łatwe do odczytania właściwości dowolnego pliku w dowolnym języku. W ASP.Net jest to naprawdę proste ...

".js?v=" + File.GetLastWriteTime(HttpContext.Current.Request.PhysicalApplicationPath + filename).ToString("yyMMddHHHmmss");

Oczywiście, najpierw ładnie przełożyć to na właściwości / funkcje i gotowe. Żadnych więcej wymówek.

Powodzenia, art.

Pliki Javascript są często zapisywane w pamięci podręcznej przeglądarki znacznie dłużej, niż można by się spodziewać.

Może to często powodować nieoczekiwane zachowanie po wydaniu nowej wersji pliku JS.

Dlatego powszechną praktyką jest dodawanie parametru QueryString do adresu URL pliku javascript. W ten sposób przeglądarka buforuje plik Javascript z v = 1. Kiedy udostępniasz nową wersję swojego pliku javascript, zmieniasz adres URL na v = 2, a przeglądarka będzie zmuszona pobrać nową kopię.

Aby odpowiedzieć na pytania;

„? v = 1” jest to napisane tylko w celu pobrania nowej kopii plików css i js zamiast używania ich z pamięci podręcznej przeglądarki.

Jeśli wymienisz ten parametr ciągu zapytania na końcu swojego arkusza stylów lub pliku js, zmusza to przeglądarkę do pobrania nowego pliku, dzięki czemu ostatnie zmiany w plikach .css i .js są efektywne w przeglądarce.

Jeśli nie używasz tej wersji, może być konieczne wyczyszczenie pamięci podręcznej odświeżania strony, aby wyświetlić ostatnie zmiany w tych plikach.

Oto artykuł, który wyjaśnia, jak i dlaczego tworzyć wersje plików CSS i JS

Podczas opracowywania / testowania nowych wersji pamięć podręczna może stanowić problem, ponieważ przeglądarka, serwer, a nawet czasami telco 3G (jeśli wykonujesz wdrożenie mobilne) buforują statyczną zawartość (np. JS, CSS, HTML, img). Możesz temu zaradzić, dołączając numer wersji, liczbę losową lub znacznik czasu do adresu URL, np .: JSP:<script src="js/excel.js?time=<%=new java.util.Date()%>"></script>

Jeśli używasz czystego HTML (zamiast stron serwera JSP, ASP, PHP), serwer Ci nie pomoże. W przeglądarce linki są ładowane przed uruchomieniem JS, dlatego musisz je usunąć i załadować je JS.

// front end cache bust
var cacheBust = ['js/StrUtil.js', 'js/protos.common.js', 'js/conf.js', 'bootstrap_ECP/js/init.js'];   
for (i=0; i < cacheBust.length; i++){
     var el = document.createElement('script');
     el.src = cacheBust[i]+"?v=" + Math.random();
     document.getElementsByTagName('head')[0].appendChild(el);
}

Jak można przeczytać wcześniej, ?v=1gwarantuje, że Twoja przeglądarka pobierze wersję 1 pliku. Kiedy masz nową wersję, wystarczy dodać inny numer wersji, a przeglądarka zapomni o starej wersji i załaduje nową.

Istnieje wtyczka Gulp, która dba o wersję twoich plików w fazie budowania, więc nie musisz tego robić ręcznie. Jest poręczny i można go łatwo zintegrować z procesem budowania. Oto link: gulp-annotate

Jak wspominali inni, jest to używane do pomijania pamięci podręcznej interfejsu użytkownika. Aby to zaimplementować, osobiście znalazłem przydatny pakiet grunt-cache-bust npm.