Кэш. Теория кэширования. Устройство и разновидности кэша

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

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

👉 @seniorFront

Nav icons with sliding indicator

При наведении задействуются CSS трансформации. При нажатии на элемент, на него навешивается класс active через JS.

👉 @seniorFront

Smoke Cursor Effects

В этом видео создается эффект дыма, следующего за курсором на CSS и JS.

👉 @seniorFront

IT-технологии в деле

👉 @seniorFront

Crazy Fireworks

Создано и анимировано на canvas и чистом JS.

👉 @seniorFront

Check Spinner

Это SVG картинка, анимируемая в SCSS.

👉 @seniorFront

How To Create Text Typing Effect

В этом видео создается эффект ввода текста на CSS и JS.

👉 @seniorFront

Pokemon Slide Gallery

Реализовано без использования JS. Каждый покемон - это радио -кнопка, при нажатии на которую изменяется значение CSS переменной.

👉 @seniorFront

Find the odd int

В массиве целых чисел найдите то, которое встречается нечетное количество раз. Всегда найдется только одно целое число, которое встречается нечетное количество раз.

Пример:

[7]

Должно вернуть 7, потому что оно встречается 1 раз (что нечетно).

[0]

Должно вернуть 0, потому что оно встречается 1 раз (что нечетно).

[1,1,2]

Должно вернуть 2, потому что оно встречается 1 раз (что нечетно).

[0,1,0,1,0]

Должно вернуть 0, потому что оно встречается 3 раза (что нечетно).

[1,2,2,3,3,3,4,3,3,2,2,1]

Должно вернуть 4, потому что оно встречается 1 раз (что нечетно).

👉 @seniorFront

Почему перфоманс ревью это круто?

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

👉 @seniorFront

​Чего стоит и не стоит избегать в оптимизации сайта?

Оптимизация изображений
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.

Минификация и объединение файлов
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.

Использование CDN (Content Delivery Network)
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.

Кэширование
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.

Асинхронная загрузка и критический CSS
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.

Улучшение производительности сервера
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.

Использование современных технологий
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.

Мониторинг и анализ
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.

Чего стоит избегать при оптимизации сайта

Избегайте чрезмерной минимизации
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.

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

Не загружайте все ресурсы сразу
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.

Не пренебрегайте кэшированием
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.

Избегайте блокирующих ресурсов
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.

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

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

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

👉 @seniorFront

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

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

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Промокод сообщества
react_crew_2_oMGfq4 даёт скидку в 500 руб 🥳

Sparkly Stars

Реализовано на canvas и чистом JS.

👉 @seniorFront

​Избегайте эффекта якоря при оценке задач

Был ли у вас хоть раз в жизни подобный диалог с начальником или тимлидом?

Тимлид: {name}, за сколько времени сделаешь эту задачу? За неделю успеешь?
Я: Да. Может быть, чуть больше — ещё тестами надо покрыть. Дней десять, наверное.

В итоге вы делаете задачу месяц.

У меня такое случалось не раз. И я всегда восхищался людьми, которые могут сразу сказать: «Какая неделя? Здесь работы минимум на месяц».

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

Как ещё может проявляться эффект якоря?
Если вас спросят: «Больше ли 100 стран в Африке?», это число 100 повлияет вашу дальнейшую оценку. И если вас попросят назвать точное количество стран, то ваш ответ будет близок к 100.

Это искажение активно используется в маркетинге. Когда вы увидели цену на какой-то предмет, то такая цена «якорится» у вас в голове как норма. И тогда неожиданная скидка в 30% с более высокой вероятностью заставит вас купить эту вещь.

Как избежать эффекта якоря при работе?
Прежде всего, нужно знать о существовании этого когнитивного искажения и стараться не поддаваться его влиянию. Если в следующий раз вас спросят: «Хватит ли недели?», не торопитесь с ответом. Возьмите паузу, чтобы обдумать задачу. А затем не бойтесь назвать реальный срок, пусть это будет даже месяц, если это действительно так.

👉 @seniorFront

Что скрывают комментарии в тестах

Работая с автотестами на разных проектах, я часто сталкивалась с тем, что к коду тестов люди относятся не так, как к продуктовому. Причем это касается и разработчиков, и тестировщиков, и менеджеров. Коду тестов прощаются грехи, недопустимые в продуктовом коде. Хорошо это или плохо? Зависит от ситуации. В этой статье – сборник больных антипаттернов из моего опыта.

👉 @seniorFront

shop loader

Это SVG картинка, анимированная библиотекой TweenMax.

👉 @seniorFront

Magnetic Effects using Javascript

В этом видео создается магнитный эффект для блока на CSS и JS.

👉 @seniorFront

Осмысленные беседы

👉 @seniorFront

Hover Effect

Параметры анимации задаются через JS при наведении.

👉 @seniorFront

Bounce Delay Loader

Оригинальный загрузчик, реализованный с использованием препроцессоров Haml и SCSS.

👉 @seniorFront