Uploaded byEcommerce Solution Provider SysIQ
Эффективный JavaScript - IQLab Frontend Fusion 2012
Документ обсуждает методы оптимизации производительности JavaScript, акцентируя внимание на времени загрузки, скорости работы страниц и взаимодействии с DOM. Приведены рекомендации по сведению к минимуму reflow и repaint, а также представлены инструменты для анализа производительности. Рассматриваются стратегии кэширования и оптимизации анимации элементов на странице.
More Related Content
Similar to Эффективный JavaScript - IQLab Frontend Fusion 2012
Эффективный JavaScript - IQLab Frontend Fusion 2012
- 1.
- 2. Что можно оптимизировать? Времязагрузки Скорость работы страницы интерфейсов Способ загрузки скриптов Взаимодействия с DOM Объединение скриптов JS сценарии Сжатие скриптов ... Оптимизация виджетов ...
- 3. Пороги оптимизации < 0.1c > 0.1c Быстрый сайт / интерфейс Нужен индикатор прогресса
- 4.
- 5. Процесс отрисовки Исходный HTML DOM дерево Дерево отрисовки
- 6. Webkit Engine MainFlow Reflow
- 7. Gecko Engine MainFlow Reflow
- 8.
- 9. Причины Reflow +Repaint Добавление, удаление или обновление DOM элемента Изменение стилевых свойств элементов Скрытие DOM элемента при помощи display: none Анимация DOM элемента на странице Изменения размера окна
- 10. Пример Reflow +Repaint
- 11. Очередь Reflow Лавина Reflowспускается при измерениях DOM элементов: Решение: - отделить измерения от изменений - делать кэширование значений
- 12. Сведение Reflow кминимуму 2000 Reflow 1 Reflow
- 13. Сведение Reflow кминимуму Локальное кэширование:
- 14. Сведение Reflow кминимуму Обертка display:none, display:block:
- 15. Сведение Reflow кминимуму documentFragment для промежуточных результатов:
- 16. Сведение Reflow кминимуму Операции над копиями DOM узлов:
- 17. Сведение Reflow кминимуму Вставка через innerHTML:
- 18. Сведение Reflow кминимуму Анимация: Анимируем элементы только с position: fixed или absolute Элемент глубоко в DOM анимируется медленнее (Лучше вынести в body + position:absolute) Заменить несколько таймаутов на один
- 19. Инструменты • DynaTrace Ajax(IE) http://ajax.dynatrace.com/ajax/en/download/download.aspx • SpeedTracer (Webkit) http://code.google.com/webtoolkit/speedtracer/ • Webkit Developer Toolbar (Timeline Tab)
- 20. Полезные ссылки • Howbrowsers work (Tali Garsiel) http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ • История одной оптимизации (Сергей Чикуёнок) http://chikuyonok.ru/2010/11/optimization-story/ • Rendering: repaint, reflow/relayout, restyle (Stoyan Stefanov) http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
- 21.
Editor's Notes
- #2 Представиться! Сегодня я расскажу про то, как эффективно использовать JS на сайте. Чтобы ваши интерфейсы работали и реагировали быстро, а посетители были довольны. Веб приложение не сравнится с десктопным по скорости реакции на действия пользователя. Поэтому речь идет об максимальном увеличении скорости отклика. Сейчас все больше сложных интерфейсов и интерактива на сайтах. И эта вся нагрузка ложится на плечи браузера.
- #3 Можно выделить 2 основные группы Мы подробнее остановимся на работе с DOM. Поскольку это одно из узких мест любого веб приложения.
- #5 Для того чтобы оптимизировать наши сценарии Нужно понять как html и css превращается в то что мы видим в браузере. Браузер делает: 1) Анализ HTML -> DOM дерево 2) Анализ CSS -> Структура стилей 3) Построение &quot;Дерева отрисовки&quot; 4) Отрисовка Reflow только с Repaint!
- #9 Типы Reflow Начальный - возникает при первичном отображении дерева. Инкрементный - возникает при манипуляциях с DOM. Источником этого изменения является элемент, над которым проводятся манипуляции - целевой фрейм . 1 фрейм(кадр) соответствует геометрической информации в общем для одного элемента страницы. Фрейм имеет ширину, высоту и смещение. Расчет геометрии страницы происходит одним потоком. Элементы, которые находятся позже в потоке, обычно не влияют на расположение элементов, которые раньше в потоке. Макет строится слева-направо, сверху-вниз по странице. Все HTML reflow начинается с корневого фрейма, который соответствует элементу <html> HTML документа. И рекурсивно проходит по иерархии фреймов, вычисляя геометрию каждого необходимого фрейма. В большинстве случаев возможно построить геометрию страницы в один проход. Для отрисовки таблицы браузеру нужно сделать два прохода. Это связано с тем, что рассчет ширины столбца зависит от наполнения каждой ячейки столбца. Но этого можно избежать, задав фиксированные ширины для каждого столбца. (table-layout: fixed) Операции reflow очень ресурсоемки и являются одной из причин замедления работы веб-приложений.
- #10 При скроллинге - только Repaint!
- #12 Браузерные движки стараются оптимизировать Reflow Браузер может создать очередь и выполнять эти изменения пачками Очередь сбрасывается по времени (100-200мс) или при достижении 10-20 изменений Несколько изменений могут быть объединены вместе и будет 1 Reflow Но! Иногда наши скрипты могут предотвратить такое поведение браузера и применить все изменения в очереди сразу. Это происходит при запросе информации о стилях, чтобы выдать актуальную информацию
- #14 Индексируем содержимое страницы
- #15 Подходит как для анимации так и для статического изменения контента