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

Разгони свой сайт
Лекция 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