Рубрика «Клиентская оптимизация» - 23

в 7:56, , рубрики: css, Google Closure Compiler, javascript, YUI Compressor, Клиентская оптимизация, минимизация, метки: , , , ,

Про минимизацию javascript и css знают все. Ну если кто не знает, то, вкратце, это уменьшение объема файлов за счет удаления комментариев, разметки, переносов строк и прочего. Особенно актуально оно для интернет сайтов, которые при первом же визите пользователя должны порадовать его своей производительностью. Но наш проект, во-первых, работает в локальной сети, а во-вторых, используется на одних и тех же компьютерах изо дня в день, поэтому мы долгое время совсем не задумывались об оптимизации скриптов и стилей. Пока не стали плотно работать с ExtJS.

Созданная страничка со всеми подключенными скриптами и стилями весит больше 5 Мб (около 200 файлов). Одно только сгенерированное DOM-дерево в коде HTML содержит более 500 000 байт. Работать с системой пользователь может начать не раньше, чем через 5 секунд после загрузки страницы (инициализация скриптов, ExtJS и т.п.).

Как оказалось, несмотря на наличие локальной сети у заказчика и частую работу с одними и теми же страницами (должно же быть встроенное кэширование в браузере), иногда с загрузкой страниц возникают проблемы. Поэтому было решено уменьшить количество запросов к серверу и поработать над общей производительностью ExtJS в IE8.Читать полностью »

в 5:56, , рубрики: Блог компании Caspowa.com, высокая производительность, исследование, Клиентская оптимизация, компании, рейтинги, стартапы, метки: , , , ,

Терпеливо ждать пока загрузится медленный, но очень нужный сайт в эпоху широкополосного доступа получается с трудом, и если раньше 5-6 секунд ожидания не особо смущали, то теперь такой промежуток времени — вполне себе повод для раздражения. Тенденция для нас любопытная, в связи с чем мы и решили проверить какие результаты демонстрируют сегодня компании.Читать полностью »

в 19:23, , рубрики: html, Visual Studio, visual studio 2013, Веб-разработка, Клиентская оптимизация, минимизация, минификация, метки: , , , ,

Логотипы Web Essentials и WebMarkupMin
Одним из наиболее существенных нововведений для веб-разработчиков в Visual Studio 2013 стал новый HTML-редактор. В отличие от старого редактора, который представлял из себя смесь из управляемого и неуправляемого кода (и даже использовал некоторые компоненты FrontPage), новый редактор был полностью переписан на управляемом коде (в качестве основы использовался HTML-редактор из WebMatrix).

Стоит отметить, что для ASP.NET Web Forms (файлы с расширениями .aspx, .ascx и .master) по-прежнему используется старый редактор.

Помимо улучшенных средств для работы с HTML-кодом, в новом редакторе также реализована поддержка синтаксиса представлений KnockoutJS, AngularJS и Handlebars, и IntelliSense для специальных префиксов и META-тегов (Facebook, Twitter, Open Graph, Windows Phone, iOS и др.).

К сожалению, не каждая новинка из мира веб-разработки может попасть в Visual Studio в силу следующих причин:

  1. Многие современные веб-технологии и библиотеки являются Open Source-проектами (например, компиляторы LESS и CoffeeScript, верификатор JSHint и т.д.), и некоторые из этих проектов имеют лицензии, которые не позволяют включать их в состав коммерческих продуктов.
  2. Сейчас веб-технологии развиваются настолько быстро, что их поддержка средствами разработки может стать неактуальной в течение одной недели. Поэтому ни частые релизы Visual Studio (сейчас период между релизами сократился с двух лет до одного года), ни периодические обновления не позволяют поддерживать Visual Studio в полностью актуальном состоянии.

Для того, чтобы решить перечисленные выше проблемы сотрудником компании Microsoft Мэдсом Кристенсеном было создано VS-расширение Web Essentials. Исходный код Web Essentials опубликован на GitHub (доступны 2 версии: 2012 и 2013).

Ниже перечислены дополнительные возможности HTML-редактора из Visual Studio 2013, которые становятся доступными после установки Web Essentials 2013:

  1. Поддержка Zen Coding (более подробную информацию об использовании Zen Coding в Web Essentials можно прочитать в статье Джона Папа «Zen Coding in Visual Studio 2012») и генератор текста-«рыбы» Lorem Ipsum (например, если ввести lorem10 и нажать клавишу TAB, то в код будут вставлены 10 слов из трактата Цицерона «О пределах добра и зла»).
  2. Команда Go To Definition для тегов <a>, <style> и <script>.
  3. HTML-минимизация выделенного фрагмента кода.
  4. Поддержка HTML-регионов (например, <!--#region main--> Какой-то код… <!--#endregion-->).

Поскольку HTML-минимизация в Web Essentials 2013 была реализована средствами библиотеки WebMarkupMin, автором которой я являюсь, то в этой статье мы рассмотрим данную возможность более подробно.
Читать полностью »

в 12:08, , рубрики: javascript, jquery, optimization, selectors, Клиентская оптимизация, оптимизация, селекторы, метки: , , , , ,

Доброго времени суток, читатели. Хочу поделиться неким опытом (советами) при работе с JavaScript + jQuery (по сути, вместо jQuery можете подставить любой другой JS фреймворк). Статья будет интересна новичкам JS и jQuery, но и динозаврам опытным проходить мимо не стоит, в ней вполне можно найти полезную информацию. В основном, в статье я привожу не однозначные случаи, но и место для «стоТыщРазПовтор» я счёл уместным.

image

Инициализация

Сплошь и рядом встречаю загрузку JS файлов в теге <head>. В большинстве случаев — это не корректно! Почему? В этом случае JS начинает загружаться до загрузки HTML, и как следствие клиент дольше ждёт загрузки информации за которой он пришёл. Размещение скриптов в <head> оправдано только в тех случаях, когда JS используется в качестве контроллера (к примеру, всё содержимое на странице мы достаём поблочно через AJAX запросы, в зависимости от URL или Hash). Если не используем, то гораздо лучше вставлять скрипты перед зыкрытием тэга </body>. JS начнёт загружаться только после того, как посетитель увидит страницу.Читать полностью »

в 14:04, , рубрики: адаптивный дизайн, браузеры, веб-дизайн, дальтонизм, Клиентская оптимизация, цвета, метки: , , ,

Привет.

Уже не первый раз вижу здесь посты о цветовой слепоте, но методов более-менее подходящей борьбы (кроме как здесь) я не видел.
Собственно, хочу и рассказать о своих методах решения проблемы.

Оговорюсь: я «слепой» на жёлтый и красный цвета (голубой и синий являются заменой соответственно), а людей с похожим отклонением не встречал (к сожалению).
Читать полностью »

в 12:44, , рубрики: big data, анализ данных, Блог компании КРОК, дистрибуция, Клиентская оптимизация, облако, отчетность, прогнозирование спроса, продажи, СУБД, управление проектами, метки: , , , , , , ,

Аналитика в рознице: сегодня вы не купили презервативы, а магазин уже знает, когда вам пригодится скидка на детское питание
Вот как-то так это хитро работает

Про вашего будущего ребёнка – это, конечно, утрировано, но все может быть. На практике мы помогаем рознице бороться за каждый рубль с помощью математического аппарата. Вот, например, у вас в бумажнике есть карта лояльности, либо вы расплачиваетесь кредиткой. Это значит, что в целом магазин знает, сколько и каких продуктов вам надо. Дальше можно построить оптимальную модель вашего путешествия по магазину и понять, в какой ситуации вы купите больше. Что где должно стоять, какое молоко вы предпочитаете (вдруг вы готовы брать дорогое и натуральное без колебаний?) и так далее. Смоделировать вас по совокупности данных легко.

Такую же аналитику можно применять ко всем аспектам работы розницы.

Из смешного — один раз система просчитала, что будет выгодно уничтожить примерно полтонны бумаги. Сначала думали, что баг — но начали копать и выяснили, что поставщик даёт скидку за определённый порог закупки. А сеть может не успевать продавать нужное количество бумаги. С учётом стоимости склада, поставки и уровня скидки начиная с порога — проще взять и уничтожить кучу товара, чтобы получать его по цене ниже. Скидка минимум вдвое компенсирует убытки от его потери. Читать полностью »

в 21:37, , рубрики: Bundle Transformer, Closure Compiler, css, CSSO, javascript, JSMin, less, Microsoft Ajax Minifier, sass, UglifyJS, WebGrease Semantic CSS Minifier, YUI Compressor, Веб-разработка, Клиентская оптимизация, минимизация, метки: , , , , , , , , , , , , ,

Логотипы модулей-минимизаторов из Bundle Transformer

За прошедшие, с момента публикации предыдущего обзора, 3 месяца уже успели обновиться почти все рассмотренные алгоритмы минимизации (кроме, Packer`а). Кроме того в Bundle Transformer появился новый модуль-минимизатор на базе Clean-css — BundleTransformer.CleanCss.

При подготовке данного сравнительного обзора были учтены следующие пожелания читателей:

  1. В предыдущем обзоре в качестве исходных файлов использовались: bootstrap.css и bootstrap.js из Twitter Bootstrap 2.3.2, из-за чего достоверность результатов была низкой. В новом же обзоре размер выборки был увеличен: для сравнения были отобраны 7 JS-файлов и 5 CSS-файлов из 10 популярных Open Source-проектов.
  2. Теперь в сравнении минимизаторов CSS-кода также участвуют встроенные средства минимизации препроцессоров LESS и Sass.
  3. Как известно, Bundle Transformer минимизирует каждый файл по отдельности и затем производит объединение минимизированного кода в один файл. Данный механизм сделан для того, чтобы предотвратить повторную минимизацию предварительно минимизированных файлов. Другие аналогичные библиотеки сначала объединяют код файлов, а затем минимизируют этот объединенный файл. Поэтому для полноты картины мы произведем 2 сравнения: сначала сравним эффективность минимизаторов на файлах, полученных путем объединения минимизированного кода, а затем на файлах, полученных путем минимизации объединенного кода файлов.

Как и в предыдущем обзоре, для минимизации файлов мы будем использовать модули Bundle Transformer, а для измерения размеров полученных файлов – расширение YSlow.
Читать полностью »

в 8:16, , рубрики: B2B, maxifier, Блог компании «Maxifier Development», Интернет-реклама, Клиентская оптимизация, медийная реклама, управление проектами, метки: , , ,

Сегодня нам, компании Maxifier Development, исполняется 6 лет… Ну ладно, соврал, не сегодня. На самом деле случилось это недели две назад, но только сейчас, когда я возвращаюсь из нашего нью-йоркского офиса обратно в родную Самару, наконец-то дошли руки что-то написать по этому поводу.

За шесть лет мы прошли путь от идеи на бумажке до международной компании стоимостью в десятки миллионов долларов. Создали сложный программный продукт в области оптимизации Интернет-рекламы, которым ежедневно пользуются крупные медиа-компании в Европе и Америке и уже подтягивается Россия. Открыли офисы в США, Японии и Англии.

И совершили 1001 ошибку на этом пути, делая многие вещи медленнее и хуже, чем могли и должны были делать. Но только сейчас у нас накопилось достаточно мужества и сил, чтобы признать это публично, поделиться нашими успехами и неудачами, научить на своем опыте других и, получив отзывы, лучше научиться самим.

Я надеюсь, что теперь мы будем регулярно публиковать статьи, связанные как с нашей предметной областью, так и просто посвященные вопросам разработки, менеджмента, взаимодействия с клиентами и прочим «интересностям» в ИТ. Но в этой, начальной статье хочется просто оглянуться назад, на основные вехи развития нашей компании.
наши скромные завоевания
Читать полностью »

в 16:37, , рубрики: svg, Клиентская оптимизация, метки:

Здарствуй Хабр!
Статья посвящена оптимизации изображений формата SVG.

Оптимизация / сжатие SVG изображений

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.
Читать полностью »

в 20:04, , рубрики: Bundle Transformer, Closure Compiler, css, CSSO, javascript, JSMin, Microsoft Ajax Minifier, Packer, UglifyJS, WebGrease Semantic CSS Minifier, YUI Compressor, Веб-разработка, Клиентская оптимизация, минимизация, метки: , , , , , , , , , , , ,

Логотипы модулей-минимизаторов из Bundle Transformer

Разработчики, использующие Bundle Transformer, часто спрашивают у меня: «Какой минимизатор обладает самой высокой степенью сжатия?». В принципе, в сентябре прошлого года в своей статье «Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?» я уже проводил сравнение минимизаторов по степени сжатия кода, но это сравнение было поверхностным и не было подкреплено цифрами.

В этой краткой статье мы проведем сравнение наиболее популярных алгоритмов минимизации CSS- и JS-кода на примере адаптеров-минимизаторов из Bundle Transformer. В качестве исходных файлов будут использоваться файлы bootstrap.css и bootstrap.js из Twitter Bootstrap версии 2.3.2. Измерять размеры файлов мы будем с помощью YSlow.
Читать полностью »

1...1020...222324...26
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js