Лучшие практики для фронтенд-разработки
javascript best-practices

Лучшие практики для фронтенд-разработки

24 декабря 2022 г.

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

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

  1. Семантические теги HTML. Использование семантических тегов HTML помогает улучшить доступность и читабельность кода. Например, вместо тега div для представления заголовка можно использовать тег header. Это придает контенту больше смысла и облегчает его интерпретацию программам чтения с экрана.
<!-- Not semantic -->
<div class="header">
  <h1>Welcome to my website</h1>
</div>

<!-- Semantic -->
<header>
  <h1>Welcome to my website</h1>
</header>

  1. Препроцессор CSS. Препроцессоры CSS, такие как SASS или LESS, позволяют использовать расширенные функции и методы CSS, недоступные в обычном CSS. Например, вы можете использовать переменные, примеси и вложенные правила, чтобы сделать стили более организованными и удобными в сопровождении.
/* Css */
.btn {
  color: #ffffff;
  background-color: #000000;
  font-size: 16px;
  border-radius: 5px;
}

/* Sass */
$primary-color: #000000;
$secondary-color: #ffffff;
$font-size: 16px;
$border-radius: 5px;

.btn {
  color: $secondary-color;
  background-color: $primary-color;
  font-size: $font-size;
  border-radius: $border-radius;
}

  1. Используйте сеть доставки контента (CDN) для js, CSS и изображений. CDN — это сеть серверов, которые доставляют контент в зависимости от географического положения пользователя. Использование CDN может повысить производительность за счет сокращения расстояния между пользователем и сервером. Кроме того, он позволяет кэшировать файлы.
<!-- Not using a CDN -->
<script src="/scripts/jquery.js"></script>

<!-- Using a CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

  1. Оптимизация изображений и других ресурсов. Оптимизация изображений и других ресурсов может помочь повысить производительность и скорость веб-сайта. Этого можно добиться с помощью таких методов, как сжатие изображений, использование соответствующих форматов файлов изображений и отложенная загрузка изображений.
<img src="compressed-image.jpg" alt="A compressed image" loading="lazy">

  1. Адаптивные изображения. Адаптивные изображения — это изображения, масштаб которых соответствует размеру экрана и устройствам. Это можно сделать с помощью атрибутов srcset и sizes в теге img.
<img
  srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
  sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 1500px"
  src="image-large.jpg"
  alt="An image"
>

  1. Векторная графика. Векторная графика — это изображения, которые определяются точками и путями, а не пикселями, и могут масштабироваться до любого размера без потери качества. Это может сделать их более эффективными в использовании, особенно для графики, которая будет отображаться в разных размерах.
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#000000" />
</svg>

  1. Использовать спрайты изображений. Спрайт изображения – это отдельное изображение, содержащее несколько изображений меньшего размера, которые можно отобразить с помощью свойства background-position в CSS. Это может уменьшить количество HTTP-запросов, необходимых для загрузки изображений, и повысить производительность.
.icon1 {
  background-image: url('icons.png');
  background-position: 0 0;
}

.icon2 {
  background-image: url('icons.png');
  background-position: -20px 0;
}

Принципы доступности

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

  1. aria-label предоставляет метку для элемента, который не имеет видимой метки. Это может быть полезно для таких элементов, как кнопки или значки, которые не имеют текстовых меток.
<button aria-label="Search"><i class="search"></i></button>

  1. Код aria-required указывает обязательные поля формы. Атрибут aria-required может использоваться для указания того, что поле формы является обязательным. Это может помочь предупредить пользователей и вспомогательные технологии о том, что для отправки формы необходимо заполнить поле.
<label for="name">Name</label>
<input type="text" id="name" name="name" required aria-required="true">

  1. Атрибут aria-hidden позволяет скрыть элемент от вспомогательных технологий. Это может быть полезно для декоративных элементов, не несущих важной информации.
<img src="decorative.jpg" alt="" aria-hidden="true">

  1. aria-expanded позволяет указать состояние сворачиваемого элемента. Атрибут aria-expanded может использоваться для указания того, развернут или свернут сворачиваемый элемент, например раскрывающееся меню. Это может помочь предупредить пользователей и вспомогательные технологии о текущем состоянии элемента.
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" aria-hidden="true">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

  1. Кнопка aria-live для оповещения об обновлениях контента. Атрибут aria-live может использоваться для указания того, что содержимое элемента может обновляться асинхронно. Это может быть полезно для оповещения об обновлениях контента, например о новых сообщениях или уведомлениях, для вспомогательных технологий.
<div id="notifications" aria-live="polite">
  <p>You have 1 new message</p>
</div>

  1. aria-describedby позволяет предоставить описание элемента. Атрибут aria-describedby можно использовать для указания элемента, предоставляющего описание текущего элемента. Это может быть полезно для предоставления дополнительного контекста или инструкций для полей формы или других интерактивных элементов.
<label for="email">Email address</label>
<input type="email" id="email" name="email" aria-describedby="email-description">
<p id="email-description">Please enter your email address</p>

Оптимизировать в JavaScript

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

Вот несколько советов по оптимизации производительности JavaScript:

* Сократите свой код: удаление ненужных пробелов, комментариев и других ненужных символов может помочь уменьшить размер ваших файлов JavaScript и сократить время загрузки.

* Компилятор JavaScript: компилятор JavaScript, такой как Babel или TypeScript, может помочь оптимизировать код, преобразовывая его в более эффективный формат.

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

* Разбиение кода позволяет разбивать код JavaScript на более мелкие фрагменты, которые можно загружать по запросу. Это может повысить производительность за счет уменьшения объема кода, который необходимо загрузить и проанализировать на начальном этапе. Для разделения кода можно использовать такие инструменты, как Webpack или Rollup.

* Отложенная загрузка позволяет откладывать загрузку контента до тех пор, пока он не понадобится. Это может повысить производительность за счет уменьшения объема данных, которые необходимо загрузить изначально. Вы можете использовать API IntersectionObserver для реализации отложенной загрузки.

// Lazy loading with IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Load content
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('[data-lazy]').forEach((element) => {
  observer.observe(element);
});

* Кэширование позволяет сохранять данные в браузере, чтобы их можно было повторно использовать без повторной загрузки с сервера. Это может повысить производительность за счет уменьшения количества сетевых запросов, которые необходимо выполнить. Вы можете использовать Cache API для реализации кэширования.

if ('caches' in window) {
  caches.open('my-cache').then((cache) => {
    cache.add('/data.json').then(() => {
      console.log('Data added to cache');
    });
  });
}

* Инструмент мониторинга производительности. Инструмент мониторинга производительности позволяет отслеживать производительность веб-сайта и выявлять потенциальные проблемы. Это может помочь оптимизировать производительность веб-сайта и улучшить взаимодействие с пользователем. Некоторые популярные инструменты включают Lighthouse и SpeedCurve.

* Инструмент Linting: как и ESLint, проверяет код на наличие ошибок и предлагает улучшения, помогая убедиться, что код непротиворечив и соответствует рекомендациям.

Заключение

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

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

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE