Разгони свой сайт Лекция 7: «Ненавязчивый» JavaScript Мациевский Николай 1 / 22 webo.in

Содержание «Отложенная» загрузка «Ненавязчивый» JavaScript «Ненавязчивая» реклама «Ненавязчивые» счетчики 2 / 22 webo.in

«Отложенная» загрузка webo.in 3 / 22

Событие DOMContentLoaded Срабатывает по готовности DOM –По окончанию второй стадии загрузки У пользователя сформированная страница –Загрузка страницы для него завершилась Загружаем дополнительные файлы –Например, JavaScript 4 / 22 webo.in

Кроссбраузерный подход 5 / 22 webo.in IE: атрибут defer + onreadystatechange Дополнительный «мнимый» скрипт Safari: document.readyState Проверяем с заданным интервалом «Старые» браузеры: window.onload Для обратной совместимости

Неблокирующая загрузка 6 / 22 webo.in JavaScript-вызовы блокируют загрузку –Не дают применять параллельные потоки Динамическая загрузка скриптов –DOM-методы по onload – лучше всего –defer / document.write – только в IE –XHR + eval – выполняется долго –XHR + script.innerText – еще сложнее –Iframe – дополнительная нагрузка

«Ненавязчивый» JavaScript webo.in 7 / 22

Обратная совместимость 9 / 22 webo.in Ссылки ведут на соответствующие страницы Даже если с onclick Анимация работает на CSS Везде, где это возможно Страница функционирует без JavaScript JavaScript – только дополняет!

Очищаем код 8 / 22 webo.in Семантический HTML Разметка соответствует смыслу HTML отделен от CSS Содержание от представления HTML отделен от JavaScript Содержание от взаимодействия

Доступ к DOM-дереву 10 / 22 webo.in Доверять, но проверять Элемента или метода может не быть DOM-методы getElementById getElementsByTagName getElementsByClassName (не везде)

Обработчики событий 11 / 22 webo.in Для одного элемента.onclick,.onload и т.д. или attachEvent / addEventListener Для группы родитель отвечает за обработку источник определяем по e.target

«Ненавязчивая» реклама webo.in 12 / 22

Внешняя реклама на сайте Блокирует отрисовку страницы iframe спасает, но не всегда возможен Скорость загрузки зависит от скорости доступа к внешним ресурсам Логика отображения рассчитывается через браузер 13 / 22 webo.in

Добавление элементов 14 / 22 webo.in document.write Блокируют загрузку Нужно вставлять максимально близко к концу страницы innerHTML Требует подготовленного контейнера Можно использовать на любой стадии загрузки

Виды размещения 15 / 22 webo.in Контекстная реклама Можно загружать в «отложенном» режиме TopLine / RichMedia / банеры Можно вставлять в подготовленные блоки на странице PopUnder Раздражает больше всего

Архитектура рекламной сети 16 / 22 webo.in Вся логика вычисляется на сервере Пользователь получает готовый файл / текст Вся реклама вызывается на третьей или четвертой стадии Через отложенную загрузку Статистика считается через логи Коллизии при кэшировании?

«Ненавязчивые» счетчики webo.in 17 / 22

Общая структура.gif файл вызывается с сервера статистики Все параметры передаются в GET-запросе Внешняя библиотека загружается для дополнительной бизнес-логики 18 / 22 webo.in

Вставка.gif файла document.write –Блокируем отображение страницы –Устаревшая технология new Image().src –Поддерживается всеми браузерами –Не блокирует загрузку страницы 19 / 22 webo.in

«Отложенные» счетчики Находим document.write Анализируем параметры у.gif Преобразуем вызов в new Image() Используем в любом месте –Вставляем в сам HTML-файл –Вставляем в JavaScript-библиотеку –Вызываем при каком-то условии –И т.д. 20 / 22 webo.in

Динамическая статистика Библиотека на своем сервере –Полный контроль (максимальное сжатие) –Нет обращений к внешнему хосту –Нет контроля изменений «Отложенный» вызов –Динамическое добавление библиотеки –Проверяем по timeout, загрузился ли файл –Вызываем функцию счетчика 21 / 22 webo.in

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