Разгони свой сайт Лекция 8 Быстрый Java Script

Разгони свой сайт Лекция 8: Быстрый Java. Script Мациевский Николай webo. in 1 / 25

Содержание • • • Замыкания и утечки памяти «Тяжелые» Java. Script-вычисления Быстрый DOM Кэширование в Java. Script Элементарные операции webo. in 2 / 25

Замыкания и утечки памяти webo. in 3 / 25

Шаблоны утечек • • Циклические ссылки Замыкания Постраничные утечки Псевдо-утечки webo. in 4 / 25

Циклические ссылки • Объект из области Java. Script создает ссылка на DOM-узел • DOM-узел создает ссылку на другой объект Java. Script • Сборка мусора • Объект Java. Script ждет DOM-узел • DOM-узел ждет другой объект Java. Script webo. in 5 / 25

Замыкания • Java. Script объект создает замыкание • DOM-узел обращается к этому замыканию • Java. Script снимает ссылку с замыкания • Замыкание живет, поскольку нужно DOM-узлу • Сборщик мусора не отслеживает такие ссылки webo. in 6 / 25

Постраничные утечки • Порядок добавления элементов в DOMдерево играет значение • Промежуточные узлы создает миниутечки • Добавление узлов непосредственно к текущему дереву не «течет» webo. in 7 / 25

Псевдо-утечки • Выделение памяти для кэша DOMузлов • Выделение памяти для глобальных объектов • Выделение памяти под замыкания • Все это не утечки, а особенности функционирования Java. Script webo. in 8 / 25

«Тяжелые» Java. Scriptвычисления webo. in 9 / 25

Ограничение на выполнение • Есть предел выполнения Java. Script • Время выполнения (Mozilla) • Число элементарных операций (IE) • Выделяемая память (Firefox) • Мобильные агенты гораздо «слабее» настольных компьютеров webo. in 10 / 25

Обратная связь • Рекурсивное выполнение • arguments. callee • + set. Timeout( , 0) • Браузер останавливает поток и проверяет состояние • Получаем интерактивное выполнение webo. in 11 / 25

Улучшаем шаблон • Интерактивность и накладные расходы • Группировка итераций • В set. Timeout не строка, а вызов функции • Синхронизация глобальных переменных webo. in 12 / 25

Быстрый DOM webo. in 13 / 25

Document. Fragment • Поддерживается в IE 6+ • Позволяет создать фрагмент дерева • Быстрее для элементарных операций var div = document. get. Elements. By. Tag. Name("div"); var fragment = document. create. Document. Fragment(); for ( var e = 0; e < elems. length; e++ ) { fragment. append. Child( elems[e] ); } for ( var i = 0; i < div. length; i++ ) { div[i]. append. Child( fragment. clone. Node(true) ); } webo. in 14 / 25

inner. HTML • inner. HTML быстрее DOM-методов • Передаваемый HTML нужно фильтровать var i, j, el, idx=0, html=[]; html[idx++] = "<table>"; for (i = 0; i < 1000; i++) { html[idx++] = "<tr>"; for (j = 0; j < 5; j++) { html[idx++] = "<td></td>"; } html[idx++] = "</tr>"; } html[idx++] = "</table>"; el = document. create. Element("div"); document. body. append. Child(el); el. inner. HTML = html. join(""); webo. in 15 / 25

Кэширование в Java. Script webo. in 16 / 25

Необходимость кэширования • • Сложная клиентская логика = 50 -500 мс Серверные запросы = 50 -200 мс DOM-вызовы = 1 -10 мс Доступ к глобальные объектам = 0. 11 мс • Но! Большое число объектов замедляем обращение к каждому webo. in 17 / 25

Кэширование вызовов • В локальные переменные var arr = document. get. Elements. By. Tag. Name(‘*’); var global. Var = 0; (function () { var i, l, local. Var; l = arr. length; local. Var = global. Var; for (i = 0; i < l; i++) { local. Var++; } global. Var = local. Var; })(); webo. in 18 / 25

Кэширование DOM-узлов • В локальные переменные var arr = document. get. Elements. By. Tag. Name(‘*’); var global. Var = 0; (function () { var i, l, local. Var; l = arr. length; local. Var = global. Var; for (i = 0; i < l; i++) { local. Var++; } global. Var = local. Var; })(); webo. in 19 / 25

Кэширование цепочек • Такое пример for (i=0; i < 10000; i++) a. b. c. d(v); • будет выполняться медленнее, чем var f=a. b. c. d; for (i=0; i < 10000; i++) f(v); • или var f=a. b. c; for (i=0; i < 10000; i++) f. d(v); webo. in 20 / 25

Элементарные операции webo. in 21 / 25

Перебор массива • Классический пример for (var j=0; j<10000; j++) { for (var i=0; i<items. length; i++) { var item = items[i]; } } • в 2 -4 раза медленнее, чем for (var j=0; j<10000; j++) { var i = length - 1; while (--i) { var item = items[i]; } } webo. in 22 / 25

Регулярные выражения • Классический пример var Reg. Exp = '/script/gi'; items[i]. node. Name. search(Reg. Exp); • в полтора раза медленнее, чем /script/i. test(items[i]. node. Name); • или /script/i. exec(items[i]. node. Name); webo. in 23 / 25

В следующей лекции webo. in 24 / 25

Практическое приложение • • Инструменты для анализа Онлайн-приложения Оптимизация браузеров Разбор полетов webo. in 25 / 25