Разгони свой сайт Лекция 7 Ненавязчивый Java Script

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

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

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

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

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

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

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

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

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

Доступ к DOM-дереву • Доверять, но проверять • Элемента или метода может не быть • DOM-методы • get. Element. By. Id • get. Elements. By. Tag. Name • get. Elements. By. Class. Name (не везде) webo. in 10 / 22

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

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

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

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

Виды размещения • Контекстная реклама • Можно загружать в «отложенном» режиме • Top. Line / Rich. Media / банеры • Можно вставлять в подготовленные блоки на странице • Pop. Under • Раздражает больше всего 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-файл – Вставляем в Java. Script-библиотеку – Вызываем при каком-то условии – И т. д. webo. in 20 / 22

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

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