Егор Львовский — «Кеширование на клиенте и сервере»

Егор Львовский разработчик интерфейсов

Кеширование на сервере и клиенте

3

Все любят скорость

Кеширование

8

Кэш (англ. cache /ˈkæʃ/) — это компонент системы, который прозрачно сохраняет данные для того, чтобы будущие запросы к этим данным обрабатывались быстрее.

Wikipedia

9

Недостатки: •  вычисление значения для больших чисел может занять продолжительное время

•  мы каждый раз заново вычисляем значение факториала для всех чисел от 1 до n

function factorial(n) { "if (n === 0) return 1 "return n * factorial( n - 1 ) }"

Факториал

11

function factorial(n) { "factorial.cache = factorial.cache || [1] "return factorial.cache[n]"" " "|| (factorial.cache[n] = n * " " " " "factorial(n - 1)) }"

Факториал с кешем

5× 10× 20× 27×

http://jsperf.com/factorial-cache

Кеширование

Способ хранения данных

Показатель эффективности

Проблемы

13

Хеш-таблица

•  хранит пары Ключ → Значение • операции добавления, поиска и удаления •  cложность O(1)

14

Требования: •  хорошая перемешиваемость данных •  быстрый алгоритм вычисления

"function hash(chars) { var hash = 0 for (var i = 0, len = chars.length; i < len; ++i){ hash += chars[i].charCodeAt(0) } return hash }"

Хеш-функция

15

Хеш-функция

• Используется не только в хеш-таблицах • Принимает что-то возвращает строку (хеш)

–  MD5 ( 1 ⁄ 264 ) –  SHA1 –  CRC

• Используется для построения соответствий данных хешам

16

Время доступа в хеш-таблице

•  среднее — О(1) • наихудший случай — О(n)

17

Время доступа

18

Кеш-попадание

• напрямую влияет на эффективность • временная локальность • пространственная локальность

19

Быстро — не всегда правильно

20

Проблемы: •  неусточива к коллизиям •  одинаковые значения от разных ключей

–  aab = aba = baa

"function hash(chars) { var hash = 0 for (var i = 0, len = chars.length; i < len; ++i){ hash += chars[i].charCodeAt(0) } return hash }"

Коллизии

21

Инвалидация

• одна из двух главных проблем программирования

• стандартные способы – по времени – по событию – по ключу

Кеш на сервере

В памяти приложения

На диске

Готовые системы

24

Кеширование в память

Преимущества • легкость использования • маленькое время доступа • большой размер кеша

Недостатки • неусточивость к перезагрузкам системы

25

Кеширование на диск

• решает проблемы памяти • используется как дополнительный способ •  сильно уступает в скорости

26

Системы кеширования

•  хеш-таблицы внутри •  удобный интерфейс снаружи •  доступ по сети

Я разработчик интерфейсов. Я не хочу ничего решать. Я хочу кешировать в браузере.

Клиентское кеширование

28

Кеш браузера

• Expires и Cache-Control: max-age. –  дают время свежести ресурса –  имеют больший вес

• Last-Modified и Etag!–  метки ресурсов –  браузер отпраляет значения на сервер, сервер решает!

Должен остаться только один

30

Память JS-приложения

•  сохраняем в объекты и переменные • получаем скорость и удобство • памяти меньше, но достаточно

31

Что кешируем?

Результаты работы функций, затрагивающих DOM-дерево

• $(‘.menu > :first-child a:first-of-type’) !

• querySelectorAll(‘.b-link’)!• $(‘.b-image’).width() • $(‘.b-menu’).offset()

32

Что кешируем?

• длинные цепочки свойств объектов –  document.forms[0].elements[0].value

•  геттеры и методы –  array.length –  Object.prototype.hasOwnProperty

•  сложные вычисляемые значения

33

jQuery

• обрабочики событий • построенные Sizzle-селекторы • результаты работы .data() DOM-нодам и хендлерам присваевается уникальный идентификатор

34

Данные, сохраненные в этих хранилищах сохраняются до того момента когда вы их удалите (local) либо до конца сессии (session). Перезагрузка страницы кеш не очищает.

length // возвращает размер хранилищаkey(index) // возвращает ключ по индексу хеш-таблицы !getItem(key) // возвращает элемент по ключу !setItem(key, value) // добавляет/обновляет removeItem(key) // удаляет элемент по ключу !clear() // очищает кэш!! !var foo = localStorage[‘bar’]; "localStorage[‘bar’] = foo; "

localStorage/sessionStorage

35


Можем кешировать •  пользовательские настройки •  введенную информацию в инпутах •  стили •  джаваскрипт

Доступны с FF 3.5, Chrome 4, Safari 4, Opera 10.5, IE 8

36


• Safari — 2× • Chrome и FF — 170× • Opera — 400× http://jsperf.com/localstorage2

37


http://www.w3.org/TR/webstorage

38

Offline Applications (AppCache)

Расширенное браузерное кеширование Контроль при помощи файла-манифеста text/cache-manifest — тип файла <html manifest=“cache.manifest”> !

39

CACHE MANIFEST"# 2012-09-25:v1"CACHE:"/favicon.ico"index.html"stylesheet.css"main.js""NETWORK:"/login"/api""FALLBACK:"/main.cgi /static.html"images/large/ images/offline.jpg"*.html /offline.html ""

AppCache Manifest

40

AppCache

Доступен c FF 3.5, Chrome 4, Safari 4, Opera 10.6, IE 10

http://www.w3.org/TR/offline-webapps

41

File API (Filesystem, Filewriter)

•  самая новая спецификация • позволяет очень гибко управлять кэшем • пока реализована только в Chrome 20+

http://www.w3.org/TR/file-system-api

42

Иногда, кеширование — зло

Нельзя просто так взять

и закешировать

44

На самом деле можно

Егор Львовский

разработчик интерфейсов

[email protected] @lvivski

Спасибо

Егор Львовский — «Кеширование на клиенте и сервере»

Technology