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

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

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

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

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

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

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

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

«Тяжелые» JavaScript-вычисления webo.in 9 / 24

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

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

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

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

DocumentFragment Поддерживается в IE6+ Позволяет создать фрагмент дерева Быстрее для элементарных операций var div = document.getElementsByTagName("div"); var fragment = document.createDocumentFragment(); for ( var e = 0; e < elems.length; e++ ) { fragment.appendChild( elems[e] ); } for ( var i = 0; i < div.length; i++ ) { div[i].appendChild( fragment.cloneNode(true) ); } 14 / 24 webo.in

innerHTML 15 / 24 webo.in innerHTML быстрее DOM-методов Передаваемый HTML нужно фильтровать var i, j, el, idx=0, html=[]; html[idx++] = " "; for (i = 0; i < 1000; i++) { html[idx++] = " "; for (j = 0; j < 5; j++) { html[idx++] = " "; } html[idx++] = " "; } html[idx++] = " "; el = document.createElement("div"); document.body.appendChild(el); el.innerHTML = html.join("");

Кэширование в JavaScript webo.in 16 / 24

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

Кэширование вызовов В локальные переменные var arr = document.getElementsByTagName(*); var globalVar = 0; (function () { var i, l, localVar; l = arr.length; localVar = globalVar; for (i = 0; i < l; i++) { localVar++; } globalVar = localVar; })(); 18 / 24 webo.in

Кэширование DOM-узлов В локальные переменные var arr = document.getElementsByTagName(*); var globalVar = 0; (function () { var i, l, localVar; l = arr.length; localVar = globalVar; for (i = 0; i < l; i++) { localVar++; } globalVar = localVar; })(); 19 / 24 webo.in

Кэширование цепочек Такой пример 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); 20 / 24 webo.in

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

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

Перебор массива Классический пример for (var j=0; j

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