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

Мациевский Николай

1 / 22webo.in

Содержание

• «Отложенная» загрузка

• «Ненавязчивый» JavaScript

• «Ненавязчивая» реклама

• «Ненавязчивые» счетчики

2 / 22webo.in

«Отложенная» загрузка

webo.in 3 / 22

Событие DOMContentLoaded

• Срабатывает по готовности DOM– По окончанию второй стадии загрузки

• У пользователя сформированная страница– Загрузка страницы для него завершилась

• Загружаем дополнительные файлы– Например, JavaScript

4 / 22webo.in

Кроссбраузерный подход

5 / 22webo.in

• IE: атрибут defer + onreadystatechange

• Дополнительный «мнимый» скрипт

• Safari: document.readyState

• Проверяем с заданным интервалом

• «Старые» браузеры: window.onload

• Для обратной совместимости

Неблокирующая загрузка

6 / 22webo.in

• JavaScript-вызовы блокируют загрузку– Не дают применять параллельные потоки

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

«Ненавязчивый» JavaScript

webo.in 7 / 22

Обратная совместимость

9 / 22webo.in

• Ссылки ведут на соответствующие страницы

• Даже если с onclick

• Анимация работает на CSS

• Везде, где это возможно

• Страница функционирует без JavaScript

• JavaScript – только дополняет!

Очищаем код

8 / 22webo.in

• Семантический HTML

• Разметка соответствует смыслу

• HTML отделен от CSS

• Содержание от представления

• HTML отделен от JavaScript

• Содержание от взаимодействия

Доступ к DOM-дереву

10 / 22webo.in

• Доверять, но проверять

• Элемента или метода может не быть

• DOM-методы

• getElementById

• getElementsByTagName

• getElementsByClassName (не везде)

Обработчики событий

11 / 22webo.in

• Для одного элемента

• .onclick , .onload и т.д.

• или attachEvent / addEventListener

• Для группы

• родитель отвечает за обработку

• источник определяем по e.target

«Ненавязчивая» реклама

webo.in 12 / 22

Внешняя реклама на сайте

• Блокирует отрисовку страницы

• iframe спасает, но не всегда возможен

• Скорость загрузки зависит от скорости доступа к внешним ресурсам

• Логика отображения рассчитывается через браузер

13 / 22webo.in

Добавление элементов

14 / 22webo.in

• document.write• Блокируют загрузку• Нужно вставлять максимально близко к

концу страницы

• innerHTML• Требует подготовленного контейнера• Можно использовать на любой стадии

загрузки

Виды размещения

15 / 22webo.in

• Контекстная реклама• Можно загружать в «отложенном» режиме

• TopLine / RichMedia / банеры• Можно вставлять в подготовленные блоки

на странице

• PopUnder• Раздражает больше всего

Архитектура рекламной сети

16 / 22webo.in

• Вся логика вычисляется на сервере• Пользователь получает

готовый файл / текст

• Вся реклама вызывается на третьей или четвертой стадии• Через отложенную загрузку

• Статистика считается через логи

• Коллизии при кэшировании?

«Ненавязчивые» счетчики

webo.in 17 / 22

Общая структура

• .gif файл вызывается с сервера статистики

• Все параметры передаются в GET-запросе

• Внешняя библиотека загружается для дополнительной бизнес-логики

18 / 22webo.in

Вставка .gif файла

• document.write– Блокируем отображение страницы– Устаревшая технология

• new Image().src– Поддерживается всеми браузерами– Не блокирует загрузку страницы

19 / 22webo.in

«Отложенные» счетчики

• Находим document.write

• Анализируем параметры у .gif

• Преобразуем вызов в new Image()

• Используем в любом месте– Вставляем в сам HTML-файл– Вставляем в JavaScript-библиотеку– Вызываем при каком-то условии– И т.д.

20 / 22webo.in

Динамическая статистика

• Библиотека на своем сервере– Полный контроль (максимальное сжатие)– Нет обращений к внешнему хосту– Нет контроля изменений

• «Отложенный» вызов– Динамическое добавление библиотеки– Проверяем по timeout, загрузился ли файл– Вызываем функцию счетчика

21 / 22webo.in

В следующей лекцииБыстрый JavaScript

• Замыкания и утечки памяти

• «Тяжелые» JavaScript-вычисления

• Быстрый DOM

• Кэширование в JavaScript

• Элементарные операции

22 / 22webo.in