чи реально використовувати локальний сховище HTML5 для зберігання CSS та JavaScript

Ідея полягає у використанні локального сховища HTML5 для зберігання часто доступних CSS та JavaScript.

Наприклад (псевдокод):

var load_from_cdn = вірно;
if (виявити локальне сховище)  
{
  if (кеш css, js знайдено)
  {
     завантажити локальний кеш пам'яті
     load_from_cdn = помилково;
  }
}
якщо (load_from_cdn)
{
   document.write ('<script> ...');
}

Це можливо чи реально?

Я знаю кеш браузера, буде ще перевірка доступу до заголовка,
я припускаю, що HTTP-доступ не кращий (на мій погляд )

PS: Здається, що локальне зберігання підтримує лише пару ключів і цінностей , чи може хтось довести це?
(найкраще з кількома прикладами)

Цілком нормально використовувати локальний сховище для зберігання JS та CSS. Однак локальне зберігання має обмеження 5М на домен. Можливо, вам доведеться переглянути цю стратегію.

Для робочого столу в Інтернеті ви можете використовувати кеш браузера за замовчуванням, щоб зробити це. Просто встановіть відповідь JS & CSS HTTP на кешування. Це просто і легко.

Для мобільної мережі Інтернет затримка висока. Отже, зменшення HTTP-запитів є критичним. Отже, наявність JS та CSS у зовнішніх URL-адресах є оптимальним. Було б набагато краще, щоб JS та CSS були вбудованими. Це зменшує запити HTTP, але роздуває вміст HTML. Тоді що? Як ви вже сказали, використовуйте місцеві сховища!

Коли один веб-переглядач відвідує сайт вперше, JS & CSS будуть введені в дію. JS також має ще два завдання: 1) зберігати JS & CSS у локальне сховище; 2) Встановіть файл cookie, щоб позначити, що JS & CSS знаходяться в локальному сховищі.

Коли браузер вдруге заходить на сайт, сервер отримав файли cookie та знає, що браузер вже має відповідні JS & CSS. Таким чином, HTML-рендер має вбудований JS для зчитування JS & CSS з локального сховища та вставки в дерево DOM.

Це основна ідея створення мобільної версії bing.com. Можливо, вам доведеться врахувати контроль версій JS та CSS під час впровадження у виробництво.

Спасибі

Хіба браузер вже не робить це за вас, і, мабуть, краще?

У чому справа?

Вже є добре налагоджена методика, яка називається кешування на стороні клієнта. Що приносить локальному сховищу HTML5, у якому випадку кешування бракує?

У вас може бути якась дивна програма, яка повинна динамічно завантажувати шматки коду JavaScript, щоб ви не могли ефективно використовувати кеш, але це надзвичайно рідкісний випадок.

Також пам’ятайте про інше. У веб-переглядачах є спеціальна політика кешування, і більшість браузерів добре керує кешем (видаляючи лише старіший вміст тощо). Реалізуючи домашній кеш, ви перешкоджаєте браузерам правильно керувати ним. Не тільки його можна критикувати самостійно, але це також зашкодить вам рано чи пізно. Приклад: коли користувачі веб-програми повідомляють про помилки, ви часто відповідаєте, просячи їх очистити кеш. Я не впевнений, що ви запитаєте у вашому випадку, оскільки очищення кеша ніколи не вирішить проблеми з вашим веб-додатком.

У відповідь на вашу першу редакцію (друга редакція поза темою):

Я знаю кеш браузера, буде ще перевірка доступу до заголовка

Здається, вам не вистачає розуміння кешування браузера. Ось чому важливо зрозуміти, як це працює спочатку, перш ніж почати впроваджувати власний механізм кешування в домашніх умовах . Винаходьте власне колесо лише тоді, коли ви достатньо зрозумієте існуючі колеса і маєте вагомі причини не користуватися ними. Дивіться пункт 1 моєї відповіді на питання "Повторно винаходити колесо і НЕ шкодувати про це" .

Надаючи деякі дані через HTTP, ви можете вказати кілька заголовків, пов’язаних із кешем:

• Last-Modified визначає, коли зміст змінено,
• Expiresвказує, коли браузер повинен запитати сервер, чи змінено вміст .

Ці два заголовки дозволяють веб-переглядачу:

• Уникайте завантаження вмісту знову і знову. Якщо Last-Modifiedвстановлено останній місяць, а вміст уже було завантажено сьогодні за кілька годин, завантажувати його знову не потрібно.
• Уникайте запитів щодо дати останнього змінення файлу. Якщо Expiresз об'єкта кешу є 5 травня - ^й , 2014 року, ви не повинні видавати будь-який запит GET ні в 2011, ні в 2012 або 2013 році, так як ви знаєте , що кеш уточнений.

Другий важливий для CDN. Коли Google обслуговує JQuery відвідувачу Stack Overflow або cdn.sstatic.netподає зображення чи таблиці стилів, використовувані Stack Overflow, вони не хочуть, щоб браузери кожен раз запитували нову версію. Натомість вони подають ці файли один раз, встановлюють термін придатності щось досить довго, і це все.

Ось, наприклад, скріншот того, що відбувається, коли я заходжу на домашню сторінку Stack Overflow:

Є 15 файлів для обслуговування. Але де всі ці 304 Not Modifiedвідповіді? У вас є лише три запити вмісту, які змінилися. Для всього іншого браузер використовує кешовану версію, не запитуючи жодного сервера .

На закінчення, вам дійсно потрібно подумати двічі, перш ніж реалізувати власний механізм кешування, і особливо знайти хороший сценарій, де це може бути корисним . Як я вже говорив на початку моєї відповіді, я можу знайти тільки один: де ви служите шматки JavaScript , щоб використовувати їх через, OMG, eval(). Але в цьому випадку я впевнений, що є кращі підходи, які є:

• Більш ефективно, використовуючи стандартні методи кешування, або
• Простіше в обслуговуванні.

Локальне кешування на стороні клієнта має бути значно оптимізованіше, ніж використання локальної пам’яті HTML5. Просто переконайтеся, що ваш JavaScript і CSS знаходяться у зовнішніх керованих файлах, і ваша сторінка повинна завантажуватися набагато швидше через кеш браузера, ніж намагатися витягнути їх з локального сховища та виконати їх самостійно.

Крім того, веб-переглядач може почати завантажувати зовнішні ресурси, коли сторінка починає завантажуватися, перш ніж ви зможете фактично запустити JavaScript на цій сторінці, щоб потім отримати свої ресурси з локальної пам’яті HTML5.

Крім того, вам потрібен код на сторінці для того, щоб завантажити з локальної пам’яті HTML5, тому просто покладіть всі свої JS в один зовнішній, кешований JS-файл.

Замість того, щоб винаходити колесо, просто використовуйте функцію офлайн HTML5: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

Ви отримаєте набагато кращу ефективність, використовуючи мережу доставки вмісту (CDN), наприклад , бібліотеку кодів Google . Продумано продумано, більшість ваших JS та CSS повинні бути в кеші кожного відвідувача, перш ніж вони вперше потраплять на ваш сайт. Мінімізуйте решту.

Ви завжди можете орієнтувати кешування веб-переглядача та ручне прокатене рішення HTML5. Але я думаю, що рідне кешування збирається збити штани.

Використання localStorage - це швидко (er)! Мій тест показав

• Завантаження jQuery з CDN: Chrome 268ms , FireFox: 200ms
• Завантаження jQuery з localStorage: Chrome 47ms , FireFox 14ms

Я думаю, що збереження HTTP-запиту вже приносить велику перевагу швидкості. Тут, здається, всі винні в протилежному, тому, будь ласка, доведіть мене неправильно.

Якщо ви хочете перевірити мої результати, я створив крихітну бібліотеку, яка кешує сценарії в localStorage. Перевірте це на https://github.com/webpgr/cached-webpgr.js або просто скопіюйте його із наведеного нижче прикладу.

Повна бібліотека:

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

Виклик бібліотеки

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