GPU vs CPU: Как они влияют на производительность веб-страниц? 🚀

Веб-разработка не обходится без тонкостей в плане производительности, и два процессора — CPU (центральный процессор) и GPU (графический процессор) — играют значимую роль в работе вашего сайта на различных устройствах.

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

🧠 CPU (Central Processing Unit) — центральный процессор

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

Условно, именно он исполняет весь написанный вами JavaScript-код, обрабатывает пользовательские события, выполняет различные вычисления, исключительно из которых состоит 95% всех сайтов.

Когда работает CPU? ⏺️ Выполнение JavaScript (логика, обработка событий); ⏺️ Обработка сетевых запросов и данных (например, AJAX или Fetch); ⏺️ Работа с файлами (загрузка изображений или других ресурсов); ⏺️ Практически вообще всё, что есть на веб-странице обрабатывает центральный процессор, но и тут не обошлось без исключений..

CPU работает в основном потоке браузера, и если он перегружен, веб-страница в браузере начинает "подвисать", особенно когда нужно выполнять сложные математические операции. 🫤

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

Только представьте: в картинке с расширением 1980х1080 пикселей целых 2 073 600 пикселя! Если каждый пиксель обрабатывать в цикле последовательно, будь-то для изменения масштаба картинки или её анимации, то процессору понадобиться огромное количество времени для полной обработки, и это помимо того, что он уже был занят всем остальным. А теперь представьте, что это анимация, и всё это нужно делать 60 раз каждую секунду (для получения 60ти FPS, то есть плавной анимации), причём для каждого подобного элемента. 😱

Звучит безумно, и да, так оно и есть. Это слишком большое количество работы для одного потока процессора, что, как правило, вызывает "подвисания" при рендере страницы.

Для решения подобных задач процессору на помощь приходит GPU.

🎮 GPU (Graphics Processing Unit)

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

Если на странице есть сложные анимации или визуальные эффекты, такие как трансформации, фильтры или 3D-графика, именно GPU берет на себя ответственность за их обработку, ведь он устроен так, что за один такт он может выполнять математические операции сразу для больших наборов чисел, хоть и уступает по количеству исполняемых тактов в секунду (частоте).

Когда работает GPU? ⏺️ Обработка 2D и 3D графики с использованием WebGL или Canvas; ⏺️ Анимации CSS (например, трансформации и изменения прозрачности); ⏺️ Видеоэффекты или фильтры, такие как размытие, контрастность и другие.

Когда браузер использует GPU для рендеринга - это позволяет значительно разгрузить CPU для других задач, а также значительно ускорить обработку визуальных эффектов.

Понимание различий между CPU и GPU в контексте фронтенд-разработки — это один из "ключей" к оптимизации производительности вашего сайта.

✅ CPU прекрасно справляется с последовательными вычислениями, обработкой данных и управлением потоком исполнения кода,

✅ в то время как GPU помогает ускорить рендеринг графики и анимаций, тем самым разгружая основной поток.

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

Около года назад осознание этих тонкостей позволило мне в одном из своих пет-проектов увеличить FPS всех анимаций более, чем в 4 раза! 🤩

Хотите пост про то, как заставить браузер отображать анимацию более плавно? 👇