Другие статьи по теме:
Inline-изображения и SVG вместо PNG
JS-библиотеки безусловно удобны, но если говорить о скорости — чем меньше скриптов, тем выше производительность сайта. Более того, HTML5 способен справиться со многими задачами, которые традиционно решаются с помощью JavaScript.
Выпадающий список с поиском
Распространенный элемент в интерфейсе.
Одна из самых популярных библиотек, позволяющих реализовать такой блок — Select2, она основана на JQuery и использует CSS, то есть для довольно простого элемента в интерфейсе нужно подгрузить:
- JQuery — 101 Кб.
- Select2 JavaScript – 24 Кб.
- Select2 CSS — 3 Кб.
Но этот функционал есть в HTML из коробки и пригоден для небольших списков. Добавляется с помощью тега <datalist>:
<input type="text" list="животное" placeholder="Введите название животного" />
<datalist id="animals">
<option>Аллигатор</option>
<option>Альботрос</option>
</datalist>
Выглядеть может так:
Рабочий шаблон можете посмотреть и скопировать с CodePen.
Кнопка «Подробнее»
Типичный пример реализации с помощью JS, кнопка «read more», скрывающая часть текста:
В HTML также есть альтернатива, позволяющая сэкономить время загрузки страницы: теги <details> и <summary>. В разметке будет выглядеть так (для стрелочки на кнопке используется Inline-SVG иконка):
<details><p>Скрытая часть текста.</p>
<summary>Далее
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z"></path>
</svg>
</summary>
</details>
Рабочий шаблон на CodePen.
Если хотите углубиться и попробовать сократить количество JS-кода на своих сайтах, вот целый ресурс с альтернативами на чистом HTML и CSS (слайдеры, модальные окна, формы и прочее): http://youmightnotneedjs.com/.
Помните, что проблема чрезмерного использования JS не только в размере файлов, но в количестве сетевых запросов и скорости рендеринга ваших сайтов краулерами поисковых систем (ожидание загрузки скрипта, разбор и выполнение), что замедляет индексацию.
Другие статьи по теме:
