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


138

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 -->

Odpowiedzi:


175

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.


3
@Free - wysłany wczoraj nagłówek kontroli pamięci podręcznej nie może powiedzieć klientowi, że plik został dziś zmieniony (klient nawet nie sprawdzi), adres URL może. Czy możesz wyjaśnić, czego tam brakuje?
Nick Craver

8
@Free - sposób, w jaki te pliki są buforowane, jest wieczny , co oznacza, że ​​klient w żaden sposób nie sprawdza, czy plik został zmodyfikowany. Oznacza to, że nigdy nie otrzymają zaktualizowanego pliku ... chyba że zmieni się adres URL, co dzieje się w przypadku powyższej techniki. Otrzymujesz maksymalny czas życia pamięci podręcznej na kliencie (najmniej żądań HTTP), ale klient jest natychmiast aktualizowany, gdy plik faktycznie się zmienia . Jak dokładnie można to wszystko osiągnąć, używając tylko nagłówków kontroli pamięci podręcznej?
Nick Craver

4
@Free - Stack Overflow ma 5 milionów odwiedzających miesięcznie, Twoje podejście miałoby 2 skutki: a) o wiele więcej żądań i danych wysyłanych do / z naszych serwerów oraz b) użytkownicy nie otrzymaliby od razu nowego JavaScript / CSS (na przykład kiedy mieliśmy błąd lub zmiany HTML wymagające nowego JS / CSS). Naturalne wygaśnięcie naprawdę nie wchodzi w grę. Metoda, którą proponujesz, byłaby technicznie znacznie mniej wydajna, a jej wynikiem byłyby regularne błędy użytkowników ... to nie jest akceptowalne w żadnej większej witrynie (ani nie powinno być tak naprawdę w żadnej witrynie).
Nick Craver

2
@Free - 5 milionów to 5 milionów odwiedzających miesięcznie , ponieważ wdrażamy wiele razy dziennie , żądania są wielokrotnie większe. Jeśli chodzi o ładowanie stron HTML, mówimy o nieco ponad 110 milionach miesięcznie (i rośnie ... znowu to tylko ładowanie stron HTML). A) tak, o wiele więcej lub więcej przerw, jest to kompromis między czasem pamięci podręcznej a klientami posiadającymi poprawną zawartość. Ponadto twoja logika dla b) jest błędna, html nie jest buforowany, więc używany z buforowanym JS, który już nie działa, oznacza to, że dotyczy to tylko użytkowników buforowanych, a nie że są odporni.
Nick Craver

5
@GMsoF v reprezentuje dla nas tylko „wersję”, jest to całkowicie dowolny wybór. Dowolny ciąg zapytania o wartość zadziałałby, np. Równie łatwo mógłby być? Jejdutogjesudo =
Nick Craver

23

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.


13

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.


2
A co jeśli budujesz swoją stronę internetową tylko z html js i css. W takim razie jak możemy automatycznie wstrzyknąć nazwę wersji do zasobów statycznych?
Nishanth Nair

@ Whizkid747 późna odpowiedź, ale dla nowicjuszy każdy program do tworzenia witryn / budowania witryn, z którego korzystasz, powinien mieć sposób na uzyskanie daty w milisekundach, której możesz użyć jako wersji, w przeciwnym razie, jeśli nie używasz kreatora // systemu budowania musiałbyś sam to napisać.
AntK

7

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ę.


które przeglądarki dokładnie? nawet najbardziej dziwaczne IE 5 i 6 przestrzegały nagłówków kontroli pamięci podręcznej.
bezpłatne konsultacje w

7

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


2

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);
}

0

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


-2

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.


1
Chociaż ten link może odpowiedzieć na pytanie, w przypadku przepełnienia stosu odradza się udzielanie tylko odpowiedzi, możesz ulepszyć tę odpowiedź, biorąc istotne części łącza i umieszczając je w swojej odpowiedzi, dzięki czemu Twoja odpowiedź będzie nadal odpowiedzią, jeśli link zostanie zmieniony lub usunięte :)
WhatsThePoint
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.