Михаил Корепанов "Инкрементальные обновления на клиенте. Ловкость рук и никакой магии"
0 likes772 views
Документ описывает инкрементальные обновления для оптимизации загрузки интерфейсов в Яндекс.Почте. Предлагается передавать только изменения между версиями программного обеспечения, используя патчи и библиотеки для создания диффов. Также рассматриваются методы сжатия, такие как SDCH и delta encoding, для повышения эффективности передачи данных.
![При сборке
Генерим патчи для каждого ресурса для предыдущих 3-х версий.
В index.html инлайн скриптом вставляем список версий, для
которых у нас есть патчи:
01. oldVersions = {
02. "jane": ["6.19.4", "6.18.7", "6.17.5"],
03. "mail": ["6.19.7", "6.18.8", "6.17.6"]
04. }
16](https://image.slidesharecdn.com/rigaaprkorepanov-130410140933-phpapp02/85/-16-320.jpg)
![Формат файла с патчами
01. [
02. {
03. "k": "jane.css",
04. "p": [patch],
05. "s": 4554
06. }
07. ]
17](https://image.slidesharecdn.com/rigaaprkorepanov-130410140933-phpapp02/85/-17-320.jpg)
Михаил Корепанов "Инкрементальные обновления на клиенте. Ловкость рук и никакой магии"
- 1. Инкрементальные обновления на клиенте Михаил Корепанов, разработчик интерфейсов Я.Субботник, Рига, 6 апреля 2013
- 2. Обо мне panyakor@yandex-team.ru @panyakor ● Разработчик интерфейсов в команде Яндекс.Почты ● Нравится разбираться в новых технологиях, особенно если они позволяют что-то автоматизирвать или ускорить ● Можете спрашивать про JS, CSS, клиентскую оптимизацию 02
- 3. Яндекс.Почта ● Больше 1 МБ статики 03
- 4. Яндекс.Почта ● Больше 1 МБ статики ● Обновляется 2 раза в неделю 04
- 5. Яндекс.Почта ● Больше 1 МБ статики ● Обновляется 2 раза в неделю ● От версии к версии меняется не так много кода (особенно в случае хотфиксов) 05
- 6. Что уже сделано для ускорения загрузки? ● gzip ● Кэширование ● CDN ● Фриз JS/CSS/картинок ● Параллельная загрузка ресурсов через XHR 06
- 7. Этого не достаточно! Даже при фризе JS/CSS, если от релиза к релизу меняется только пара строк, кэш для ресурса инвалидируется полностью. 07
- 8. Инкрементальные обновления От версии к версии меняется не так много кода (около 10%, а в случае хотфиксов еще меньше). А что если при выходе новой версии передавать только изменения? 08
- 9. Инкрементальные обновления Что если хранить где-то старую версию (например в localStorage), а при выходе новой передавать только diff между новой и той, которая уже сохранена у пользователя? А дальше просто накладывать патч на клиенте. 09
- 10. Библиотеки diff на JS ● Vcdiff (https://github.com/plotnikoff/vcdiff.js) ● google diff patch match (http://code.google.com/p/google-diff-match- patch/) ● jsdiff (https://github.com/kpdecker/jsdiff) ● pretty diff (https://github.com/austincheney/Pretty-Diff) ● jsdifflib (https://github.com/cemerick/jsdifflib) 10
- 11. Библиотеки diff на JS ● Vcdiff (https://github.com/plotnikoff/vcdiff.js) ● google diff patch match (http://code.google.com/p/google-diff-match- patch/) ● jsdiff (https://github.com/kpdecker/jsdiff) (в 5 раз медленнее, чем google diff patch match) ● pretty diff (https://github.com/austincheney/Pretty-Diff) (не умеет патчить) ● jsdifflib (https://github.com/cemerick/jsdifflib) (не умеет патчить) 11
- 12. Размер патча (в байтах) Vcdiff (размер Vcdiff (размер Vcdiff (размер google diff patch блока 3) блока 10) блока 20) match 13957 3586 3431 9297 865 367 309 910 4615 1854 1736 6740 12
- 13. Время наложения патча на клиенте (в миллисекундах) IE 9 Opera 12 Firefox 19 Chrome vcdiff (размер блока 10) 8 5 5 3 google diff patch match 1363 76 43 35 13
- 14. Vcdiff ● RFC3284 (2002) ● Используется Google в SDCH ● Используется в "Delta encoding in HTTP" (RFC3229) Сравнивает строки поблочно. Размер блока по умолчанию — 20 байт 14
- 15. Храним JS/CSS на клиенте Храним в localStorage. Каждый ресурс — отдельный ключ. jane.js — 6.18.7@... jane.version — 6.18.7 15
- 16. При сборке Генерим патчи для каждого ресурса для предыдущих 3-х версий. В index.html инлайн скриптом вставляем список версий, для которых у нас есть патчи: 01. oldVersions = { 02. "jane": ["6.19.4", "6.18.7", "6.17.5"], 03. "mail": ["6.19.7", "6.18.8", "6.17.6"] 04. } 16
- 17. Формат файла с патчами 01. [ 02. { 03. "k": "jane.css", 04. "p": [patch], 05. "s": 4554 06. } 07. ] 17
- 18. Формат файла с патчами "k" — ключ ресурса в LS. "p" — патч для ресурса, который сгенерировал Vcdiff. "s" — чексумма для ресурса актуальной версии по алгоритму Флетчера. 18
- 19. Почему алгоритм Флетчера? ● Быстрый ● Компактный ● Легок в реализации 19
- 20. При выходе новой версии ● Смотрим, что у пользователя в LS 20
- 21. При выходе новой версии ● Смотрим, что у пользователя в LS ● Если для нужного проекта есть версия в LS — смотрим есть ли эта версия в oldVersions 21
- 22. При выходе новой версии ● Смотрим, что у пользователя в LS ● Если для нужного проекта есть версия в LS — смотрим есть ли эта версия в oldVersions ● Если есть, посылаем запрос за патчем для этой версии 22
- 23. При выходе новой версии ● Смотрим, что у пользователя в LS ● Если для нужного проекта есть версия в LS — смотрим есть ли эта версия в oldVersions ● Если есть, посылаем запрос за патчем для этой версии ● Патчим все ресурсы в LS и проверяем чексумму 23
- 24. При выходе новой версии ● Смотрим, что у пользователя в LS ● Если для нужного проекта есть версия в LS — смотрим есть ли эта версия в oldVersions ● Если есть, посылаем запрос за патчем для этой версии ● Патчим все ресурсы в LS и проверяем чексумму ● Если все ок — обновляем значение с версией в LS на актуальную 24
- 25. Что получили? Появится в продакшене в ближайшее время, поэтому точных цифр пока нет Знаем, что средний размер патча составляет 10 - 15 Кб 25
- 26. А что еще есть? ● Shared Dictionary Compression over HTTP (SDCH) ● Delta encoding in HTTP 26
- 27. SDCH ● Изобрел Google в 2008 году 27
- 28. SDCH ● Изобрел Google в 2008 году ● Хорошо подходит для сжатия часто обновляемых страниц 28
- 29. SDCH ● Изобрел Google в 2008 году ● Хорошо подходит для сжатия часто обновляемых страниц ● Поддерживается только в Chrome 29
- 30. SDCH ● Изобрел Google в 2008 году ● Хорошо подходит для сжатия часто обновляемых страниц ● Поддерживается только в Chrome ● Нет реализации для популярных веб-серверов 30
- 31. SDCH ● Изобрел Google в 2008 году ● Хорошо подходит для сжатия часто обновляемых страниц ● Поддерживается только в Chrome ● Нет реализации для популярных веб-серверов ● Словарь генерируется медленно 31
- 32. SDCH Заголовки запроса: 01. Accept-Encoding: gzip, deflate, sdch 32
- 33. SDCH Заголовки ответа: 01. Content-type: text/html 02. Content-Encoding: gzip 03. Get-Dictionary: {путь к словарю} 33
- 34. SDCH Запрос за словарем: 01. GET {путь к словарю} HTTP/1.1 02. Accept-Encoding: sdch, gzip 03. 04. {контент словаря} 34
- 35. SDCH Следующий запрос: 01. Accept-Encoding: gzip, deflate, sdch 02. Avail-Dictionary: TWFuIGlz 35
- 36. SDCH Заголовки ответа: 01. Content-type: text/html 02. Content-Encoding: sdch, gzip 03. ... 04. 05. JOWk0d2N...VCDIFFed {контент} 36
- 37. Delta encoding in HTTP ● RFC3229 был представлен в 2002 году 37
- 38. Delta encoding in HTTP ● RFC3229 был представлен в 2002 году ● Разные методы diff/сжатия 38
- 39. Delta encoding in HTTP ● RFC3229 был представлен в 2002 году ● Разные методы diff/сжатия ● Никем не поддерживается 39
- 40. Delta encoding in HTTP Заголовки запроса: 01. GET /foo.css HTTP/1.1 02. If-None-Match: "123xyz" 03. A-IM: vcdiff, diffe, gzip 40
- 41. Delta encoding in HTTP Заголовки ответа: 01. HTTP/1.1 226 IM Used 02. ETag: "489uhw" 03. IM: vcdiff 04. 05. {контент патча} 41
- 42. Михаил Корепанов Разработчик интерфейсов panyakor@yandex-team.ru @panyakor