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