Эффективный JavaScript - IQLab Frontend Fusion 2012

1,591 views

Published on

Эффективный JavaScript

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,591
On SlideShare
0
From Embeds
0
Number of Embeds
479
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Представиться! Сегодня я расскажу про то, как эффективно использовать JS на сайте. Чтобы ваши интерфейсы работали и реагировали быстро, а посетители были довольны. Веб приложение не сравнится с десктопным по скорости реакции на действия пользователя. Поэтому речь идет об максимальном увеличении скорости отклика. Сейчас все больше сложных интерфейсов и интерактива на сайтах. И эта вся нагрузка ложится на плечи браузера.
  • Можно выделить 2 основные группы Мы подробнее остановимся на работе с DOM. Поскольку это одно из узких мест любого веб приложения.
  • Для того чтобы оптимизировать наши сценарии Нужно понять как html и css превращается в то что мы видим в браузере. Браузер делает: 1) Анализ HTML -> DOM дерево 2) Анализ CSS -> Структура стилей 3) Построение "Дерева отрисовки" 4) Отрисовка Reflow только с Repaint!
  • Типы Reflow Начальный - возникает при первичном отображении дерева. Инкрементный - возникает при манипуляциях с DOM. Источником этого изменения является элемент, над которым проводятся манипуляции - целевой фрейм . 1 фрейм(кадр) соответствует геометрической информации в общем для одного элемента страницы. Фрейм имеет ширину, высоту и смещение. Расчет геометрии страницы происходит одним потоком. Элементы, которые находятся позже в потоке, обычно не влияют на расположение элементов, которые раньше в потоке. Макет строится слева-направо, сверху-вниз по странице. Все HTML reflow начинается с корневого фрейма, который соответствует элементу <html> HTML документа. И рекурсивно проходит по иерархии фреймов, вычисляя геометрию каждого необходимого фрейма. В большинстве случаев возможно построить геометрию страницы в один проход. Для отрисовки таблицы браузеру нужно сделать два прохода. Это связано с тем, что рассчет ширины столбца зависит от наполнения каждой ячейки столбца. Но этого можно избежать, задав фиксированные ширины для каждого столбца. (table-layout: fixed) Операции reflow очень ресурсоемки и являются одной из причин замедления работы веб-приложений.
  • При скроллинге - только Repaint!
  • Браузерные движки стараются оптимизировать Reflow Браузер может создать очередь и выполнять эти изменения пачками Очередь сбрасывается по времени (100-200мс) или при достижении 10-20 изменений Несколько изменений могут быть объединены вместе и будет 1 Reflow Но! Иногда наши скрипты могут предотвратить такое поведение браузера и применить все изменения в очереди сразу. Это происходит при запросе информации о стилях, чтобы выдать актуальную информацию
  • Индексируем содержимое страницы
  • Подходит как для анимации так и для статического изменения контента
  • Эффективный JavaScript - IQLab Frontend Fusion 2012

    1. 1. Эффективный JavaScriptDmitriy Yakubovskiy
    2. 2. Что можно оптимизировать?Время загрузки Скорость работыстраницы интерфейсовСпособ загрузки скриптов Взаимодействия с DOMОбъединение скриптов JS сценарииСжатие скриптов ...Оптимизация виджетов...
    3. 3. Пороги оптимизации < 0.1c > 0.1cБыстрый сайт / интерфейс Нужен индикатор прогресса
    4. 4. Процесс отрисовки
    5. 5. Процесс отрисовкиИсходный HTML DOM дерево Дерево отрисовки
    6. 6. Webkit Engine Main Flow Reflow
    7. 7. Gecko Engine Main Flow Reflow
    8. 8. Визуализация Reflow
    9. 9. Причины Reflow + RepaintДобавление, удаление или обновление DOM элементаИзменение стилевых свойств элементовСкрытие DOM элемента при помощи display: noneАнимация DOM элемента на страницеИзменения размера окна
    10. 10. Пример Reflow + Repaint
    11. 11. Очередь ReflowЛавина Reflow спускается при измерениях DOM элементов:Решение:- отделить измерения от изменений- делать кэширование значений
    12. 12. Сведение Reflow к минимуму 2000 Reflow 1 Reflow
    13. 13. Сведение Reflow к минимумуЛокальное кэширование:
    14. 14. Сведение Reflow к минимумуОбертка display:none, display:block:
    15. 15. Сведение Reflow к минимумуdocumentFragment для промежуточных результатов:
    16. 16. Сведение Reflow к минимумуОперации над копиями DOM узлов:
    17. 17. Сведение Reflow к минимумуВставка через innerHTML:
    18. 18. Сведение Reflow к минимумуАнимация:Анимируем элементы только с position: fixed или absoluteЭлемент глубоко в DOM анимируется медленнее(Лучше вынести в body + position:absolute)Заменить несколько таймаутов на один
    19. 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. 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/
    21. 21. Dmitriy Yakubovskiyd.iakubovskiy@sysiq.com

    ×