Эффективный JavaScript - IQLab Frontend Fusion 2012
•
0 gostou•825 visualizações
Эффективный JavaScript
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (9)
Destaque
Destaque (20)
Semelhante a Эффективный JavaScript - IQLab Frontend Fusion 2012
Semelhante a Эффективный JavaScript - IQLab Frontend Fusion 2012 (20)
Mais de Ecommerce Solution Provider SysIQ
Mais de Ecommerce Solution Provider SysIQ (14)
Эффективный JavaScript - IQLab Frontend Fusion 2012
- 2. Что можно оптимизировать? Время загрузки Скорость работы страницы интерфейсов Способ загрузки скриптов Взаимодействия с DOM Объединение скриптов JS сценарии Сжатие скриптов ... Оптимизация виджетов ...
- 3. Пороги оптимизации < 0.1c > 0.1c Быстрый сайт / интерфейс Нужен индикатор прогресса
- 5. Процесс отрисовки Исходный HTML DOM дерево Дерево отрисовки
- 6. Webkit Engine Main Flow Reflow
- 7. Gecko Engine Main Flow Reflow
- 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. Полезные ссылки • How browsers 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/
Notas do Editor
- Представиться! Сегодня я расскажу про то, как эффективно использовать JS на сайте. Чтобы ваши интерфейсы работали и реагировали быстро, а посетители были довольны. Веб приложение не сравнится с десктопным по скорости реакции на действия пользователя. Поэтому речь идет об максимальном увеличении скорости отклика. Сейчас все больше сложных интерфейсов и интерактива на сайтах. И эта вся нагрузка ложится на плечи браузера.
- Можно выделить 2 основные группы Мы подробнее остановимся на работе с DOM. Поскольку это одно из узких мест любого веб приложения.
- Для того чтобы оптимизировать наши сценарии Нужно понять как html и css превращается в то что мы видим в браузере. Браузер делает: 1) Анализ HTML -> DOM дерево 2) Анализ CSS -> Структура стилей 3) Построение &quot;Дерева отрисовки&quot; 4) Отрисовка Reflow только с Repaint!
- Типы Reflow Начальный - возникает при первичном отображении дерева. Инкрементный - возникает при манипуляциях с DOM. Источником этого изменения является элемент, над которым проводятся манипуляции - целевой фрейм . 1 фрейм(кадр) соответствует геометрической информации в общем для одного элемента страницы. Фрейм имеет ширину, высоту и смещение. Расчет геометрии страницы происходит одним потоком. Элементы, которые находятся позже в потоке, обычно не влияют на расположение элементов, которые раньше в потоке. Макет строится слева-направо, сверху-вниз по странице. Все HTML reflow начинается с корневого фрейма, который соответствует элементу <html> HTML документа. И рекурсивно проходит по иерархии фреймов, вычисляя геометрию каждого необходимого фрейма. В большинстве случаев возможно построить геометрию страницы в один проход. Для отрисовки таблицы браузеру нужно сделать два прохода. Это связано с тем, что рассчет ширины столбца зависит от наполнения каждой ячейки столбца. Но этого можно избежать, задав фиксированные ширины для каждого столбца. (table-layout: fixed) Операции reflow очень ресурсоемки и являются одной из причин замедления работы веб-приложений.
- При скроллинге - только Repaint!
- Браузерные движки стараются оптимизировать Reflow Браузер может создать очередь и выполнять эти изменения пачками Очередь сбрасывается по времени (100-200мс) или при достижении 10-20 изменений Несколько изменений могут быть объединены вместе и будет 1 Reflow Но! Иногда наши скрипты могут предотвратить такое поведение браузера и применить все изменения в очереди сразу. Это происходит при запросе информации о стилях, чтобы выдать актуальную информацию
- Индексируем содержимое страницы
- Подходит как для анимации так и для статического изменения контента