Разгони свой сайт Лекция 7: «Ненавязчивый» JavaScript Мациевский Николай webo.in 1 / 22 Содержание • • • • «Отложенная» загрузка «Ненавязчивый» JavaScript «Ненавязчивая» реклама «Ненавязчивые» счетчики webo.in 2 / 22 «Отложенная» загрузка webo.in 3 / 22 Событие DOMContentLoaded • Срабатывает по готовности DOM – По окончанию второй стадии загрузки • У пользователя сформированная страница – Загрузка страницы для него завершилась • Загружаем дополнительные файлы – Например, JavaScript webo.in 4 / 22 Кроссбраузерный подход • IE: атрибут defer + onreadystatechange • Дополнительный «мнимый» скрипт • Safari: document.readyState • Проверяем с заданным интервалом • «Старые» браузеры: window.onload • Для обратной совместимости webo.in 5 / 22 Неблокирующая загрузка • JavaScript-вызовы блокируют загрузку – Не дают применять параллельные потоки • Динамическая загрузка скриптов – DOM-методы по onload – лучше всего – defer / document.write – только в IE – XHR + eval – выполняется долго – XHR + script.innerText – еще сложнее – Iframe – дополнительная нагрузка webo.in 6 / 22 «Ненавязчивый» JavaScript webo.in 7 / 22 Обратная совместимость • Ссылки ведут на соответствующие страницы • Даже если с onclick • Анимация работает на CSS • Везде, где это возможно • Страница функционирует без JavaScript • JavaScript – только дополняет! webo.in 9 / 22 Очищаем код • Семантический HTML • Разметка соответствует смыслу • HTML отделен от CSS • Содержание от представления • HTML отделен от JavaScript • Содержание от взаимодействия webo.in 8 / 22 Доступ к DOM-дереву • Доверять, но проверять • Элемента или метода может не быть • DOM-методы • getElementById • getElementsByTagName • getElementsByClassName (не везде) webo.in 10 / 22 Обработчики событий • Для одного элемента • .onclick , .onload и т.д. • или attachEvent / addEventListener • Для группы • родитель отвечает за обработку • источник определяем по e.target webo.in 11 / 22 «Ненавязчивая» реклама webo.in 12 / 22 Внешняя реклама на сайте • Блокирует отрисовку страницы • iframe спасает, но не всегда возможен • Скорость загрузки зависит от скорости доступа к внешним ресурсам • Логика отображения рассчитывается через браузер webo.in 13 / 22 Добавление элементов • document.write • Блокируют загрузку • Нужно вставлять максимально близко к концу страницы • innerHTML • Требует подготовленного контейнера • Можно использовать на любой стадии загрузки webo.in 14 / 22 Виды размещения • Контекстная реклама • Можно загружать в «отложенном» режиме • TopLine / RichMedia / банеры • Можно вставлять в подготовленные блоки на странице • PopUnder • Раздражает больше всего webo.in 15 / 22 Архитектура рекламной сети • Вся логика вычисляется на сервере • Пользователь получает готовый файл / текст • Вся реклама вызывается на третьей или четвертой стадии • Через отложенную загрузку • Статистика считается через логи • Коллизии при кэшировании? webo.in 16 / 22 «Ненавязчивые» счетчики webo.in 17 / 22 Общая структура • .gif файл вызывается с сервера статистики • Все параметры передаются в GET-запросе • Внешняя библиотека загружается для дополнительной бизнес-логики webo.in 18 / 22 Вставка .gif файла • document.write – Блокируем отображение страницы – Устаревшая технология • new Image().src – Поддерживается всеми браузерами – Не блокирует загрузку страницы webo.in 19 / 22 «Отложенные» счетчики • • • • Находим document.write Анализируем параметры у .gif Преобразуем вызов в new Image() Используем в любом месте – Вставляем в сам HTML-файл – Вставляем в JavaScript-библиотеку – Вызываем при каком-то условии – И т.д. webo.in 20 / 22 Динамическая статистика • Библиотека на своем сервере – Полный контроль (максимальное сжатие) – Нет обращений к внешнему хосту – Нет контроля изменений • «Отложенный» вызов – Динамическое добавление библиотеки – Проверяем по timeout, загрузился ли файл – Вызываем функцию счетчика webo.in 21 / 22 В следующей лекции Быстрый JavaScript • • • • • Замыкания и утечки памяти «Тяжелые» JavaScript-вычисления Быстрый DOM Кэширование в JavaScript Элементарные операции webo.in 22 / 22