Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

Веб-активы - Советы для лучшей организации и производительности

by
Length:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

Помните, когда нам приходилось тратить много времени на оптимизацию ресурсов нашего проекта (изображений, CSS и т. Д.)? Сегодня у пользователей гораздо более быстрое подключение к Интернету, и кажется, что мы можем позволить себе использовать большие изображения или большие флэш-файлы с большим количеством видео и изображений внутри. Однако с развитием мобильной разработки мы снова вернулись к той же ситуации. Чрезвычайно важно создавать хорошо оптимизированные сайты, чтобы у нас были более быстрые приложения, которые загружают меньше контента и немедленно отвечают.


Изображения

Подавать правильный размер

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

Итак, нам нужны три разных размера изображения, и если мы используем один и тот же файл для всех трех разных мест, то браузер загрузит полноразмерное изображение даже для страницы со списком, где на самом деле нам может понадобиться только изображение размером 200x200. Если исходный файл составляет около 1 МБ и у нас есть десять продуктов на странице, то пользователь будет загружать 10 МБ. Это не очень хорошая идея. Если вы можете, попробуйте сгенерировать разные изображения для разных частей вашего сайта, это сэкономит много КБ для ваших пользователей. Рекомендуется учитывать текущее разрешение экрана. Например, если кто-то открывает ваш сайт на своем iPhone, нет необходимости обслуживать гигантское изображение заголовка, которое вы обычно используете. С помощью медиа запросов CSS вы можете отправить изображение меньшего размера:

Сжатие

Отправка изображения только с правильными размерами не всегда достаточно. Некоторые форматы файлов могут быть сжаты без потери качества. Есть много программ, которые могут вам помочь. Например, Photoshop предоставляет полезную функцию под названием «Сохранить для Интернета и устройств»:

saveforweb

В этом диалоговом окне есть множество параметров, но одним из наиболее важных является качество. Установка его примерно на 80% может значительно уменьшить размер файла.

Конечно, вы можете использовать код для сжатия файлов, но я лично предпочитаю Photoshop и использую его всегда, когда это возможно. Вот простой пример, написанный на PHP:

Спрайты

Одна из вещей, которые Вы можете сделать, чтобы увеличить исполнение Вашего заявления, состоит в том, чтобы сократить количество запросов к серверу. Так, каждое новое изображение означает новый запрос. Это - хорошая идея объединить Ваши изображения в одно. Полученное изображение называется спрайтом, и с изменением стиля CSS для положения фона вы можете показывать только ту часть изображения, которая вам нужна. Например, Twitter Bootstrap использует спрайты для своих внутренних значков:

twittericons

Затем в CSS вы можете сделать что-то вроде этого, чтобы показать любую часть спрайта, которую вы хотите:

Кэширование

Механизм кэширования браузера - Ваш друг. Да, иногда во время развития это могло привести к некоторым очень забавным ситуациям, но это действительно помогает улучшить функционирование Вашего сайта. Каждое содержание тайников браузера как изображения, JavaScript или CSS. Есть несколько способов управлять кэшированием, и я предлагаю, чтобы Вы проверили эту большую статью для подробного обзора. В целом Вы можете управлять процессом, устанавливая заголовки, как так:

Предварительная выборка

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

Схема URI данных / встроенные изображения

Пару лет назад мне пришлось разработать простую веб-страницу, которая должна была быть всего лишь одним HTML-файлом. Конечно, было несколько изображений, которые я должен был включить. Схемы URI данных помогли мне решить проблему. Идея состоит в том, чтобы преобразовать ваши изображения в строку в кодировке base 64 и поместить ее в атрибут src img.tag Например:

Используя этот подход, ваше изображение фактически находится в HTML, и вы сохраняете один HTTP-запрос. Конечно, если у вас большое изображение, строка будет очень длинной. Вот простой скрипт PHP, который преобразует изображения в строки base 64:

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


CSS

Мне нравится думать, что написание CSS похоже на написание кода. Вы все еще должны организовать свои стили, определить различные блоки и отношения между ними. Вот почему я думаю, что управление CSS действительно важно. Каждая часть приложения должна иметь свои собственные стили, и они должны быть красиво разделены. Хранение всего в разных файлах обеспечивает хорошую организацию, но также имеет свои проблемы.

Мы все знаем, что использование оператора @import не очень хорошая идея. Это потому, что каждый новый @import означает новый запрос к серверу. И если у вас есть, например, 20 различных файлов .css, это означает, что браузер сделает 20 запросов. И браузер не рендерит / не показывает страницу до загрузки всех стилей. Если некоторые из ваших файлов .css отсутствуют или имеют очень большой размер, вы увидите большую задержку, прежде чем увидеть что-либо на экране.

Используйте CSS препроцессоры

CSS препроцессоры решают все проблемы, описанные выше. Вы по-прежнему делите свои стили на разные файлы, но в конце препроцессор компилирует все в один файл .css. На самом деле они предлагают кучу интересных функций, таких как переменные, вложенные блоки, миксины и наследование. Код по-прежнему выглядит как CSS, но он хорошо отформатирован / структурирован. Есть несколько популярных препроцессоров, которые стоит проверить - Sass, LESS и Stylus. Вот простой пример, написанный на LESS:

будет производить

Или, например, если у вас есть стиль для кнопки и вы хотите создать такую ​​же кнопку, но с другим цветом для текста, вы можете сделать это:

Эффективное CSS

Обычно большинство разработчиков не думают об эффективном CSS. Эффективность CSS отражается на визуализации страницы, и если ваши стили неэффективны, ваше приложение будет медленно отображаться браузерами. Интересным фактом является то, что браузеры анализируют селекторы CSS справа налево. Что означает, что следующий код:

... неэффективен вообще. Это потому, что движок получит все теги и должен будет оценить каждый из родительских элементов, чтобы, наконец, собрать необходимый стиль. Вы также должны знать, что с точки зрения эффективности, селекторы ранжируются в следующем порядке: ID, класс, тег и универсальный. Это означает, что элемент с установленным идентификатором будет отображаться быстрее, чем элемент, имеющий только селектор тега. Конечно, нет смысла добавлять идентификаторы для всех элементов дерева DOM, но вы должны обязательно проверить свой код и улучшить его, где это возможно. Например, если у вас есть что-то вроде этого:

Вы должны удалить часть ul, потому что у вас есть только один элемент #navigation на странице. Или в следующем селекторе:

Понятно, что элемент .content является дочерним элементом тега body. Все элементы на самом деле являются потомками этого элемента.

Вот две полезные ссылки на эту тему: developers.google.com и css-tricks.com

Размер файла

Как мы упоминали выше, хорошо иметь как можно меньше кода, потому что браузер не отображает страницу перед загрузкой CSS. Вот несколько советов, чтобы уменьшить размер файла.

Объединить одинаковые стили:

... преобразований:

Используйте стенографию. Вместо:

Напишите его таким образом:

Уменьшите свой код CSS. Вы можете сделать это пользуясь инструментом, который в общем перемещает все интервалы и новые линии. Например CSSOptimiser или Minifycss. Это - общая практика, чтобы пользоваться такими инструментами на серверной стороне приложения, т.е. что-нибудь написано на языке внутреннего. Нормально эти компоненты уменьшают ваш код и обслуживают это к пользователю.

Поместите файлы CSS в<head>Тег</head>

Это - хорошая практика, чтобы включать вас .css файлы в главном признаке head tag, что путь браузер загрузит это first.


JavaScript

Уменьшить количество запросов HTTP

Такое же, как с вашим CSS - это хорошо, чтобы сократить число запросов, подходящих отправленному серверу. В большинстве случаев, погрузка файлов JavaScript не остановит предоставление страницы, но оно сделает некоторые порции атрофированной страницы.

Уменьшать свой код

- вязка библиотек, которые делают JavaScript minification. Она - что-нибудь это сократит размер файлов', но имеет в виду, что в среде разработки это хорошо, чтобы держать вашу кодовую чистку. Большинство из этих инструментов изменяет имя ваших переменных и превращает все в короткую строку, которая делает делающий отладку процесс почти невозможный.

Commonjs, AMD, RequireJS - Дают Этому Попытку

JavaScript прирожденно не имеет механизма для руководящих модулей. Так, все те вещи изобретены, чтобы разрешить эту проблему. Они обеспечивают API, которыми вы можете пользоваться, чтобы определить и пользоваться модулями. Например, здесь есть пример, взятый из http://requirejs.org/:

Внутренняя часть main.js, вы можете использовать требуют (), чтобы загрузить любые другие подлинники, которые вам нужны:

Использование пространств имен

Если мы говорим о кодовой организации затем мы не можем пропустить часть о пространствах имен. Прирожденно, нет никакой такой особенности в JavaScript, но вы можете все еще достигать той же вещи с маленьким кодом. Например, если вы хотите построить вашу собственную структуру MVC, вы будете вероятно иметь следующие классы:

Если вы оставляете вещи, так как они находятся выше в коде, то они становятся общественными и есть большая возможность создания конфликтов с другими библиотеками в вашем проекте. Так, группируя их в независимом объекте (пространство имен) делает структуру защищенной:

Следуйте за Образцами Дизайна

Нет никакой необходимости повторно изобрести колесо. Javasscript стал действительно популярным и есть много хороших практик там. Образцы дизайна - повторно используемые решения для общих проблем в программировании. Следование некоторым из них поможет вам, чтобы построить хорошее приложение. Однако, если я пробую покрыть их целиком здесь, мне пришлось бы написать книгу, так здесь есть только немногие из них :

Шаблон конструктора

Пользуйтесь этим образцом, чтобы создать образец специфического типа объекта. Вот - пример:

Или вы, возможно, пробуете это:

Шаблон модуля

Module образец предоставляет нам возможность создать частные и общественные методы. Например, в коде ниже, изменчивые _index и метод privateMethod частные. приращение и getindex общественны.

Шаблон Observer

Где бы вы ни видели подписку или отсылая событий, вы будете вероятно видеть этот образец. Есть наблюдатели, которые заинтересованы в чем-нибудь, имел отношение к специфическому объекту. Как только действие происходит, объект уведомляет наблюдателей. Пример ниже показов, как мы можем добавить наблюдателя к объекту Пользователи :

Функция сцепления шаблон

Этот образец - хороший путь организовать открытый интерфейс вашего модуля. Он экономит время и улучшает читабельность:

Я определенно рекомендую проверку этой книга Адди Osmani. Это - один из лучших ресурсов, которые вы смогли найти об образцах дизайна в JavaScript.


Активы Пакета

Теперь, когда мы приближаемся к концу этой статьи, я хочу разделить несколько мыслей на CSS и JavaScript управлении кода на сервере. Это - очень общая техника, чтобы добавить слияния, minification, и компилируясь в логике приложения. Часто есть некоторый вид кэширования механизма, но все вещи хеппенинги в течение времени выполнения. Так вы вероятно имеете некоторую кодовую логику, для которой управляет запрос .js или .css файлы и обслуживает надлежащее содержимое. Сзади этого процесса есть компиляция, minification или чем бы вы ни пользовались, чтобы упаковать ваши активы.

В моих последних проектах я использовал инструмент под названием assets-pack. Это действительно полезно, и я подробно объясню, что именно он делает, но более интересная часть - как я это использовал. Эта библиотека предназначена для использования только в режиме разработки, это не то, что остается в вашей кодовой базе, и это не то, что вы должны развернуть на своем рабочем сервере.

Идея состоит в том, чтобы использовать упаковщик только во время работы с ресурсами (CSS, JS). Он фактически следит за изменениями в определенных каталогах и компилирует / упаковывает код в один файл. Используя этот подход, вам не нужно думать о минификации или компиляции. Все, что вам нужно сделать, это просто отправить скомпилированный статический файл пользователю. Это повышает производительность вашего приложения, поскольку оно обслуживает только статические файлы и, конечно, упрощает работу. Вам не нужно ничего устанавливать на своем сервере или реализовывать ненужную логику.

Вот как вы можете настроить и использовать пакет ресурсов.

Установка

Этот инструмент является модулем Nodejs, поэтому у вас должен быть уже установлен Node. Если вы этого не сделаете, просто перейдите на nodejs.org/download и получите пакет для вашей операционной системы. После этого:

Использование

Модуль работает с конфигурацией .json Когда он используется через командную строку, вы должны поместить свои настройки в файл .json.

Через командную строку

Создайте файл assets.json и выполните следующую команду в том же каталоге:

Если ваш файл конфигурации использует другое имя или находится в другом каталоге, используйте:

В коде

Форма

Конфигурация  (форма) должна быть допустимым файлом / объектом JSON. Это просто массив объектов:

Актив Объект

Базовая структура объекта актива выглядит так:

Свойство пакета не является обязательным. Если вы пропустили его, то его значение равно часам. по умолчанию minify имеет значение ложное.

Вот несколько примеров:

Упаковка CSS

Упаковка JavaScript

Упаковка .less файлов

Упаковка файлов .less немного отличается. Свойство pack является обязательным, и это в основном ваша точка входа. Вы должны импортировать все остальные файлы .less там. Свойство exclude здесь недоступно.

Если вы обнаружите какие-либо проблемы, пожалуйста, проверьте tests / packaging-less.spec.js репозитория в GitHub.

Упаковка других форматов файлов

Assets-Pack работает с любым форматом файла. Например, мы можем объединить шаблоны HTML в один файл, выполнив что-то вроде этого:

Единственное, что вы должны знать, это то, что здесь нет минификации.


Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.