Post on 15-Jun-2015
description
Клиентская оптимизация в ритме военного марша
Тимур РахматиллаевByndyuSoft
twitter.com/eskat0n
5-я конференция .NET разработчиков21 октября 2012www.dotnetconf.ru
2Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Клиентская оптимизация
Цель:Ускорение работы web-
приложения
Способы достижения:Ускорение работы JavaScriptУменьшение объема траффика
между сервером и клиентовУменьшение нагрузки на сервер
3Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Виды оптимизации
• Минимификация содержимого файлов
• Объединение файлов• Управление порядком загрузки js
и css файлов• Оптимизация JavaScript
4Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Минификация содержимого файлов
• Уменьшение размера файла• Уменьшение объема траффика
между сервером и клиентом• Небольшое ускорение парсинга
файла
5Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Минификация содержимого файлов
«На лету»:• SquishIt (JS, CSS)• Microsoft.Web.Infrastructure• LESS (CSS)
Предварительно:• Yahoo UI Compressor (JS, CSS)• Closure Compiler (JS)
6Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Объединение файлов
«На лету»:• SquishIt (JS, CSS)
Предварительно:• Yahoo UI Compressor (JS, CSS)• Closure Compiler (JS)
7Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Управление порядком загрузки js и css файлов
• SquishIt• head.js• Web.Require• Аттрибут async• FF 3.6+• IE 10+ • Chrome 12+• Safari 5.0+• Android Browser 3.0 и 4.0
8Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Оптимизация JavaScript
Google Closure Compiler• Мощный инструмент основанный
на аннотациях комментариями• Позволяет минимифицировать
JavaScript• Позволяет выполнять логические
оптимизации на основе метаданных
9Клиентская оптимизация в ритме военного маршаТимур Рахматиллаев
Спасибо за внимание
Тимур РахматиллаевByndyuSoft
eskat0n@soft.byndyu.rutwitter.com/eskat0n