Клиентская оптимизация в ритме военного марша

Тимур Рахматиллаев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