Архив

Posts Tagged ‘CSS’

Bundle Transformer – модульное расширение для ASP.NET Bundling and Minification

Логотип Bundle Transformer

Одним из наиболее популярных нововведений в ASP.NET MVC 4 и ASP.NET 4.5 стала библиотека, производящая минимизацию и объединение кода CSS- и JavaScript-файлов — ASP.NET Bundling and Minification (другие названия: System.Web.Optimization, Microsoft.Web.Optimization и ASP.NET Optimization — Bundling). Если вы еще не знакомы с данным продуктом, то рекомендую прочитать статью Дэвида Хайдена «ASP.NET MVC 4 Bundling and Minification of CSS and JavaScript» и посмотреть выступление Скотта Гатри «A look at ASP.NET MVC 4». Во многом ASP.NET Bundling and Minification напоминает уже присутствующие на рынке продукты для проведения клиентской оптимизации: Combres и Cassette.

Тег «Далее»

Клиентская оптимизация в ASP.NET MVC 3. Менеджеры ресурсов

Первоначально данная статья была опубликована в февральском номере журнала MSDeveloper.RU.

Содержание

  1. Сжатие JS- и CSS-файлов
  2. Менеджеры ресурсов

В предыдущей статье мы научились производить минимизацию JS- и CSS-файлов в Visual Studio.

В данной статье мы рассмотрим другие аспекты клиентской оптимизации, связанные с JS- и CSS-файлами и решаемые с помощью менеджеров ресурсов (asset managers). Перечислим рекомендации команды Exceptional Performance, которые можно реализовать с помощью менеджеров ресурсов:

  1. Выносите JavaScript и CSS во внешние файлы
  2. Размещайте таблицы стилей в начале страницы
  3. Размещайте скрипты в конце страницы
  4. Используйте CDN
  5. Уберите повторяющиеся скрипты
  6. Уменьшите количество HTTP-запросов (с помощью объединения JS- и CSS-файлов)
  7. Добавьте HTTP-заголовок Expires или Cache-Control
  8. Сжимайте содержимое с помощью GZIP
  9. Настройте ETag

На основе перечисленных выше рекомендаций сформулируем требования, которым должен соответствовать менеджер ресурсов:

  1. Регистрировать ресурсы (файлы) в шаблонах (мастер-страницах) и представлениях
  2. Предотвращать дублирование ресурсов
  3. Выбирать нужные версии ресурсов в зависимости от режима работы веб-приложения (отладка или релиз)
  4. Задавать URL ресурса, размещенного на CDN, в качестве альтернативного пути к ресурсу
  5. Объединять код ресурсов в один файл
  6. Минимизировать ресурсы «на лету» (в нашем случае необязательное требование)
  7. HTTP-хэндлер, с помощью которого выводятся обработанные ресурсы, должен добавлять HTTP-заголовок Expires или Cache-Control
  8. HTTP-хэндлер должен сжимать ресурсы с помощью GZIP/Deflate
  9. HTTP-хэндлер должен поддерживать ETag

Тег «Далее»

Клиентская оптимизация в ASP.NET MVC 3. Сжатие JS- и CSS-файлов

Первоначально данная статья была опубликована в январском номере журнала MSDeveloper.RU.

Содержание

  1. Сжатие JS- и CSS-файлов
  2. Менеджеры ресурсов

В своей предыдущей статье «Облегчаем работу с JS- и CSS-кодом в Visual Studio» я уже говорил о том, что практически в любом современном веб-приложении среднего размера содержатся десятки JavaScript- и CSS-файлов. В прошлый раз я рассказал, как облегчить работу с кодом, который расположен в этих файлах. Рассмотрим эту проблему под другим углом: большой объем кода внутри этих файлов, к которому мы еще добавили регионы, теги reference и другие документирующие комментарии, приводит к увеличению времени загрузки веб-страниц и увеличивает объем трафика, который проходит от сервера к браузеру пользователя. Если время ожидания загрузки веб-страницы будет слишком долгим, то пользователь сайта начнет себя чувствовать некомфортно и может покинуть сайт. Кроме того, проблемы могут возникнуть и у владельца сайта, если исходящий с сайта трафик превысит заранее оговоренный с хостинговой компанией объем.

В данной серии статей я хочу рассказать о клиентской оптимизации веб-приложений, написанных на ASP.NET MVC 3. Клиентская оптимизация – это комплекс мер по увеличению скорости загрузки клиентской части веб-страницы (HTML, CSS, JavaScript и графика). Понятие клиентская оптимизация известно давно, но впервые о ней серьезно заговорили в конце 2007 года после публикации статьи «13 простых правил для ускорения вашего веб-сайта» («Thirteen Simple Rules for Speeding Up Your Web Site»), написанной командой Exceptional Performance (Исключительная производительность) компании Yahoo!. За прошедшие четыре года 13 простых правил превратились в 35 практических рекомендаций, с которыми можно ознакомиться в статье «Best Practices for Speeding Up Your Web Site».

В данной статье мы рассмотрим и применим на практике только одну рекомендацию команды Exceptional Performance – минимизацию JS- и CSS-кода.

Тег «Далее»

Облегчаем работу с JS- и CSS-кодом в Visual Studio

С появлением AJAX и веб-приложений подобных Gmail значительная часть логики и пользовательского интерфейса приложения стала реализовываться на JavaScript. Популярность семантической HTML-верстки способствовала тому, что роль CSS в создании пользовательского интерфейса веб-приложений серьезно возросла. В настоящее время, практически любое веб-приложение среднего размера содержит десятки JS- и CSS-файлов, в коде которых со временем становится трудно ориентироваться.

Уже в Visual Studio 2008 были внесены кардинальные изменения в редакторы JavaScript- и CSS-кода, направленные на увеличение продуктивности работы веб-разработчика. В данной статье я расскажу о способах, с помощью которых можно сделать работу в этих редакторах еще более продуктивной.

Тег «Далее»

Сертификация по клиентским веб-технологиям от W3Schools. Будьте осторожны!

Недавно я сдал три экзамена по системе Prometric и получил статус MCPD ASP.NET Developer 3.5. Это очень авторитетная и признаваемая во всем мире система тестирования, т.к. она позволяет практически полностью исключить жульничество со стороны экзаменуемого благодаря следующим мерам:

  1. Перед экзаменом экзаменуемый сдает свои вещи на хранение в специальную ячейку
  2. Во время экзамена можно пользоваться только черновиком, выданным администратором учебного центра. По окончанию экзамена черновик сдается администратору.
  3. Экзамен проходит в виде компьютерного теста
  4. Процедура сдачи экзамена фиксируется на камеру

Т.е. любой человек, который хочет сертифицироваться по технологиям Microsoft должен сдавать их по системе Prometric.

После успешной сертификации по веб-технологиям Microsoft, мне захотелось сертифицироваться по jQuery и я начал интересоваться тем, где можно пройти такую сертификацию. Мой коллега веб-дизайнер рассказал мне, как его знакомый получил статус Certified jQuery Developer, сдав онлайн-тест на сайте W3Schools. Мой коллега также отметил, что сайт www.w3schools.com является авторитетным источником по веб-стандартам и связан с W3C (Консорциумом Всемирной паутины).

Тег «Далее»

Минимизация JS- и CSS-файлов с помощью Microsoft Ajax Minifier

Нашел на Хабрахабре хорошую статью, в которой показано как с помощью Microsoft Ajax Minifier можно минимизировать JS- и CSS-файлы не выходя из Visual Studio.
Параметры минимизации задаются в настройках проекта (ASP.Net Web Application или ASP.Net MVC Web Application). Минимизация файлов производится в процессе сборки (компиляции) проекта.