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