Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
1
Разгони свой сайт Лекция 4: Объединение файлов Мациевский Николай 1 / 22 webo.in
2
Содержание Объединение CSS-файлов Объединение JavaScript-файлов Объединение картинок: CSS Sprites Объединение картинок: data:URI data:URI и CSS Sprites Методы экстремальной оптимизации 2 / 22 webo.in
3
Объединение CSS-файлов webo.in 3 / 22
4
Загрузка CSS-файлов Белый экран в браузере до получения всех файлов Текущее устройство вывода на экран не имеет значения Все CSS-файлы в увеличивает число файлов и откладывает их загрузку 4 / 22 webo.in
5
Объединение стилей 5 / 22 webo.in Ускоряет предзагрузку страницы all { … handheld { … } Нужно использовать уникальное имя для результирующего файла
6
Условные комментарии 6 / 22 webo.in Плюсы –Позволяют загружать таблицу стилей для конкретного браузера –Уменьшают размер общего файла Минусы –Увеличивают число запросов к серверу Нужен компромисс
7
Объединение JavaScript- файлов webo.in 7 / 22
8
Загрузка JavaScript 8 / 22 webo.in Расположение в head увеличивает время предзагрузки Располагаем перед Или на стадии пост-загрузки Части страницы блокируются незагруженным JavaScript-файлом Может содержать цепочки вызовов файлов с других серверов
9
Модульное построение 9 / 22 webo.in Цепочки зависимостей для компонентов Облегчает разработку Уменьшает размер используемого кода Уменьшает время инициализации
10
Все-в-одном 10 / 22 webo.in Всего один запрос к серверу Хорошо, когда мало кода Можно автоматически объединять Можно использовать ядро и набор модулей, загружаемых по необходимости
11
CSS Sprites webo.in 11 / 22
12
Разнообразие эффектов Смена изображения при наведении Динамическое изменение фона Индикатор загрузки (полоска) Подсветка областей на карте И многое другое 12 / 22 webo.in
13
Плюсы внедрения Одно основное изображение Позиционирование при помощи CSS- правил Значительное уменьшение числа запросов Вынесение анимации из JavaScript в HTML/CSS 13 / 22 webo.in
14
Проблемы при использовании 14 / 22 webo.in Нельзя объединить изображения для разных осей повторения Наложение фоновых изображений Несемантические HTML-элементы Либо расположение «лесенкой» Сложно комбинировать разные области
15
data:URI webo.in 15 / 22
16
Несколько фактов Позволяет записать бинарную информацию в текстовом (base64) формате Не нужно дополнительных файлов Нет проблем с повторение фона Нет поддерживается в IE ниже 8 версии 16 / 22 webo.in
17
data:URI и mhtml mhtml поддерживается в IE data:URI во всех остальных браузерах Комбинация стилевых правил через условные комментарии или хаки Позволяет использовать base64- кодирование для всех изображений 17 / 22 webo.in
18
Балансировка объединения файлов webo.in 18 / 22
19
Важные моменты Время запроса примерно равно получению Кб информации Предзагрузка важнее всего –Нужно максимально ее ускорить Последовательное изменение страницы –Пользователи лояльны к интерактивной загрузке 19 / 22 webo.in
20
Выбираем метод CSS Sprites ускоряют основную стадию загрузки data:URI в CSS замедляют предзагрузку –Размер фоновых изображений в CSS- файле должен быть небольшим Можно вынести data:URI в пост-загрузку –Или в основную стадию загрузки 20 / 22 webo.in
21
Экстремальная оптимизация Включить все ресурсы в один файл –Для единственной загрузки страницы Или только HTML+CSS+JavaScript –При небольшом количестве кода Или все закэшировать –Для постоянно загружаемых ресурсов –Для балансировки загрузки между разными страницами одного сайта 21 / 22 webo.in
22
В следующей лекции Параллельные загрузки Ограничение браузеров CDN и DNS Балансировка на стороне клиента Редиректы, 404-ошибки и повторы Асинхронные HTTP-запросы Уплотнение потока загрузки 22/ 22 webo.in
Еще похожие презентации в нашем архиве:
