Tworzenie stron WWW: localStorage vs. buforowane HTTP

Question

Załóżmy, że mam serwer WWW, który odpowiada na GET z plikiem .json. Odpowiedź na ten GET określa, że ​​przeglądarka buforuje odpowiedź przez 5 lat.

Załóżmy też, że mam stronę WWW, która wysyła żądanie GET dla danych JSON po załadowaniu strony. Po otrzymaniu odpowiedzi dane JSON są umieszczane w localStorage.

W tym momencie, jeśli chcę chcesz ponownie pobrać te dane w formacie JSON, który będzie szybciej:

1. Pobieranie go z localStorage
2. Wykonanie kolejnego żądania Ajax GET (gdzie przeglądarka nie będzie w rzeczywistości to żądanie - zamiast tego będzie uzyskiwać dostęp do pamięci podręcznej przeglądarki)

Czy możesz to udowodnić za pomocą automatycznego testu lub przykładu?

Dlaczego twoja odpowiedź jest poprawna?

Answer 1

Różnice, jeśli którekolwiek z tych dwóch podejść nie powinny być pomijalne we współczesnych UA (przeglądarkach).

Dlaczego moja odpowiedź jest prawidłowa? Ponieważ zaimplementowałem oba te mechanizmy.

Answer 2

Myślę, że zadajesz niewłaściwe pytanie. Który jest szybszy podczas aktywnej sesji jest w zasadzie nieistotny, ponieważ oba są przechowywane lokalnie, a lokalne wyszukiwanie jest prawie natychmiastowe (w porównaniu do zdalnego wyszukiwania). (Jedna uwaga: nie wszystkie przeglądarki opierają się na nagłówkach pamięci podręcznej, ale zwykle bardziej pochylają się w kierunku nadmiernego buforowania, niż pod buforowaniem).

Jednak Twoja przykładowa sytuacja zakłada, że ​​pamięć podręczna przeglądarki nigdy nie jest wyczyszczona . Ogólnie jest to niepoprawne: nie tylko użytkownik może wyczyścić pamięć podręczną w dowolnym momencie (lub ustawić automatyczne usuwanie), ale sama przeglądarka może zdecydować o usunięciu danych przechowywanych w pamięci podręcznej witryny (zazwyczaj w zależności od miejsca).

Zamiast tego powinieneś pomyśleć o długowieczności danych i o tym, jak regularnie użytkownik będzie szukał go ponownie.

Jeśli ta informacja jest dostępna tylko okazjonalnie, powinieneś polegać na wbudowanym mechanizmie buforowania przeglądarki. Umożliwia to przeglądarce usunięcie go, gdy nie jest już potrzebny.

Jeśli jednak dane są ładowane regularnie lub wymagane przy każdej wizycie na stronie, należy użyć localStorage. Lokalna pamięć masowa to , a nie rozliczana automatycznie z pamięcią podręczną, a w rzeczywistości jest zwykle opróżniana tylko wtedy, gdy użytkownik usunie pliki cookie dla tej witryny. Dzięki temu informacje mogą być przechowywane dłużej, nawet jeśli witryna nie jest odwiedzana wystarczająco regularnie, aby zachować pamięć podręczną odświeżoną. Ale teraz nagle będziesz odpowiedzialny za utrzymywanie bazy danych informacji.

Na koniec najważniejsze pytanie: jako deweloper, czy opłaca się wypracować bardziej kompleksowe rozwiązanie oparte na localStorage? Innymi słowy, czy zauważysz wystarczającą korzyść dla użytkownika końcowego, buforując wyszukiwanie 1-2s, czy też mówisz o znacznej ilości informacji, gdy użytkownik zobaczy wzrost o 30s +.

Jako przykład, dla dużych, złożonych aplikacji internetowych opracowałem czas temu, użyłem localStorage do przechowywania dużej liczby bibliotek JS. Podczas ponownego odwiedzania strony, zostały one po prostu przeanalizowane z lokalnej kopii (po zweryfikowaniu skrótu). To rozwiązanie pozwoliło wielu przeglądarkom na znaczne zmniejszenie czasu uruchamiania, nawet jeśli pamięć podręczna została wyczyszczona. (Nie mówię, że to jest dobre wykorzystanie, ale pracował w tym czasie.)

Answer 3

Oba źródła twierdzą, że localStorage bije pamięci podręcznej przeglądarki w prędkości.

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

Oto moje zdanie na ładowanie plików JavaScript z localStorage. Kod jest mały, możesz to sprawdzić na moim projekcie Gitub https://github.com/webpgr/cached-webpgr.js lub użyć kodu z pełnego przykładu poniżej.

Cała biblioteka:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)}; 

Wywołanie biblioteki

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){ 
    requireScript('examplejs', '0.0.3', 'example.js'); 
});