Leave a Comment
Performance Checklist for the Mobile Web
Table of Contents
http://www.youtube.com/watch?v=0UNWi7FA36M
Говорится об оптимизации web-приложений под мобильные устройства.
3 составляющих.
Сеть
3G имеет теоретическую максимальную пропускную способность в 3Mbps
Радиомодуль мобильных устройств (у которого 3 состояния: Active, Pending, Idle) из спящего режима в режим нормальной работы переходит порядка 1-2 секунд. Поэтому желательно подгружать большие пачки данных сразу и потом эмулировать подгрузку по аяксу (к тому же, когда остается мало элементов, можно фоном начать грузить следующие элементы, чтобы не было ожидания).
Картинки надо сжимать. При сжатии сфотографированной телефоном PNG в JPEG размер уменьшается на 90%, при сжатии в WebP — еще на 30%.
Для сжатия скриптов надо использовать gzip и SPDY.
Скорость отрисовки
Если грузить большие картинки, а потом сжимать их атрибутом width, то задержки будут не только при передаче по сети.
Масштабирование 1680*1050 → 128*128 заняло 80 мс, а 840*525 → 128*128 заняло 22 мс.
Для того, чтобы понимать, как происходит отрисовка, можно пользоваться двумя утилитами из Chrome:
chrome://tracing и DevTools Timeline
Скорость вычислений
Нельзя мешать чтения из дома с записями (делать пачками, как, к примеру, в AngularJS).
Static-memory usage patterns:
Пул js-объектов (новые структуры не создаются, а берутся из пула, после вычислений возвращаются в него).
Кастомное увеличение массивов (js увеличивает массив в два раза относительно его текущего размера при достижении лимита; можно реализовать линейное).
Ссылки:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging — отладка мобильного Google Chrome на десктопе,
https://github.com/johnmccutchan/adb_trace — отладка и трассировка мобильного Google Chrome на десктопе.
Упомянутаая книга по сборщику мусора:
Garbage Collection: Algorithms for Automatic Dynamic Memory Management
Similar Posts
LEAVE A COMMENT
Для отправки комментария вам необходимо авторизоваться.