2. Кеширование
на сервере и
клиенте
Егор Львовский
разработчик интерфейсов

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

7. Кеширование

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

9. Факториал
function factorial(n) {
"if (n === 0) return 1
"return n * factorial( n - 1 )
}"
Недостатки:
• вычисление значения для больших чисел может занять
продолжительное время
• мы каждый раз заново вычисляем значение факториала для всех
чисел от 1 до n
9

11. Факториал с кешем
function factorial(n) {
"factorial.cache = factorial.cache || [1]
"return factorial.cache[n]"
" " "|| (factorial.cache[n] = n *
" " " " "factorial(n - 1))
}"
27×
20×
10×
5×
11
http://jsperf.com/factorial-cache

12. Кеширование
Способ хранения данных
Показатель эффективности
Проблемы

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

14. Хеш-функция
"
function hash(chars) {
var hash = 0
for (var i = 0, len = chars.length; i < len; ++i){
hash += chars[i].charCodeAt(0)
}
return hash
}"
Требования:
• хорошая перемешиваемость данных
• быстрый алгоритм вычисления
14

15. Хеш-функция
• Используется не только в хеш-таблицах
• Принимает что-то возвращает строку (хеш)
– MD5 ( 1 ⁄ 264 )
– SHA1
– CRC
• Используется для построения соответствий
данных хешам
15

16. Время доступа в хеш-таблице
• среднее — О(1)
• наихудший случай — О(n)
16

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

18. Кеш-попадание
• напрямую влияет на эффективность
• временная локальность
• пространственная локальность
18

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

20. Коллизии
"
function hash(chars) {
var hash = 0
for (var i = 0, len = chars.length; i < len; ++i){
hash += chars[i].charCodeAt(0)
}
return hash
}"
Проблемы:
• неусточива к коллизиям
• одинаковые значения от разных ключей
– aab
=
aba
=
baa
20

21. Инвалидация
• одна из двух главных проблем
программирования
• стандартные способы
– по времени
– по событию
– по ключу
21

23. Кеш на сервере
В памяти приложения
На диске
Готовые системы

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

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

26. Системы кеширования
• хеш-таблицы внутри
• удобный интерфейс снаружи
• доступ по сети
26

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

28. Кеш браузера
• Expires и Cache-Control: max-age.
– дают время свежести ресурса
– имеют больший вес
• Last-Modified и Etag!
– метки ресурсов
– браузер отпраляет значения на сервер, сервер решает!
28

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

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

31. Что кешируем?
Результаты работы функций,
затрагивающих DOM-дерево
• $(‘.menu > :first-child a:first-
of-type’)!
• querySelectorAll(‘.b-link’)!
• $(‘.b-image’).width()
• $(‘.b-menu’).offset()
31

32. Что кешируем?
• длинные цепочки свойств объектов
– document.forms[0].elements[0].value
• геттеры и методы
– array.length
– Object.prototype.hasOwnProperty
• сложные вычисляемые значения
32

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

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

35. localStorage/sessionStorage
Можем кешировать
• пользовательские настройки
• введенную информацию в инпутах
• стили
• джаваскрипт
Доступны с FF 3.5, Chrome 4, Safari 4, Opera
10.5, IE 8
35

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

37. localStorage/sessionStorage
http://www.w3.org/TR/webstorage
37

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

39. AppCache Manifest
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 "
"
39

40. AppCache
Доступен c FF 3.5, Chrome 4, Safari 4, Opera
10.6, IE 10
http://www.w3.org/TR/offline-webapps
40

41. File API (Filesystem, Filewriter)
• самая новая спецификация
• позволяет очень гибко управлять кэшем
• пока реализована только в Chrome 20+
http://www.w3.org/TR/file-system-api
41

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

43. Нельзя просто так взять
и закешировать

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

45. Егор Львовский
разработчик интерфейсов
lvivski@yandex-team.ru
@lvivski
Спасибо