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