CourseHunter
  • Категории
    • Frontend logo Frontend
      • Angular logo Angular
      • HTML logo HTML
      • CSS logo CSS
      • JavaScript logo JavaScript
      • Vue logo Vue
      • jQuery logo jQuery
      • React logo React
      • AngularJS logo AngularJS
      • Backbone logo Backbone
      • TypeScript logo TypeScript
      • Ember logo Ember
      • Next.js logo Next.js
      • Elm logo Elm
      • Svelte logo Svelte
      • Single SPA logo Single SPA
      • Three.js logo Three.js
      • D3.js logo D3.js
      • RxJS logo RxJS
      • WebGL logo WebGL
      • barba.js logo barba.js
    • Backend logo Backend
      • PHP logo PHP
      • Python logo Python
      • Ruby on Rails logo Ruby on Rails
      • Yii logo Yii
      • Laravel logo Laravel
      • SQL logo SQL
      • Ruby logo Ruby
      • Symfony logo Symfony
      • Java logo Java
      • Scala logo Scala
      • Node.js logo Node.js
      • MongoDB logo MongoDB
      • Golang (Google Go) logo Golang (Google Go)
      • Slim logo Slim
      • Silex logo Silex
      • Firebase logo Firebase
      • C Sharp (C#) logo C Sharp (C#)
      • Deno logo Deno
      • Redis logo Redis
      • Django logo Django
      • NestJS logo NestJS
      • Spring logo Spring
      • Spring Boot logo Spring Boot
      • Spring Data logo Spring Data
      • Spring Cloud logo Spring Cloud
      • Spring Security logo Spring Security
      • Spring Integration logo Spring Integration
      • Spring HATEOAS logo Spring HATEOAS
      • Spring MVC logo Spring MVC
      • Elixir logo Elixir
      • Phoenix logo Phoenix
    • System programming logo System programming
      • Rust logo Rust
      • WebAssembly logo WebAssembly
      • C++ logo C++
    • Marketing logo Marketing
      • SEO logo SEO
    • Video and 3D logo Video and 3D
      • Blender logo Blender
      • Cinema 4D logo Cinema 4D
      • ZBrush logo ZBrush
    • Graphic logo Graphic
      • Figma logo Figma
      • Sketch logo Sketch
      • Photoshop logo Photoshop
      • After Effects logo After Effects
      • Illustrator  logo Illustrator
      • Adobe XD logo Adobe XD
      • Lightroom logo Lightroom
      • CorelDRAW logo CorelDRAW
    • DevOps logo DevOps
      • AWS logo AWS
      • Azure logo Azure
      • Docker logo Docker
      • Git logo Git
      • GitHub logo GitHub
      • Gitlab logo Gitlab
      • Google Cloud logo Google Cloud
      • Grafana logo Grafana
      • Kubernetes logo Kubernetes
      • Jenkins logo Jenkins
      • Terraform logo Terraform
      • Другое logo Другое
    • Tools logo Tools
      • GraphQL logo GraphQL
      • Flux logo Flux
      • Webpack logo Webpack
      • Ansible logo Ansible
      • Gulp logo Gulp
      • Grunt logo Grunt
      • Visual Studio Code logo Visual Studio Code
      • VIM logo VIM
      • OpenCV logo OpenCV
      • Salt logo Salt
      • SVN logo SVN
      • Atom logo Atom
      • Elasticsearch logo Elasticsearch
      • Сборки, готовые решения logo Сборки, готовые решения
      • Electron logo Electron
      • Chrome DevTools logo Chrome DevTools
      • Yarn logo Yarn
      • Babel logo Babel
      • Grep logo Grep
      • npm logo npm
      • Vite logo Vite
      • Gatsby logo Gatsby
      • PhpStorm logo PhpStorm
      • Webflow logo Webflow
      • Hibernate logo Hibernate
      • Socket.io logo Socket.io
      • Bash logo Bash
    • Разработка мобильных приложений logo Разработка мобильных приложений
      • React Native logo React Native
      • Ionic logo Ionic
      • Swift logo Swift
      • Progressive Web App (PWA) logo Progressive Web App (PWA)
      • Core Data logo Core Data
      • Xamarin logo Xamarin
      • NativeScript logo NativeScript
      • Dart и Flutter logo Dart и Flutter
    • Gamedev logo Gamedev
      • Unreal Engine logo Unreal Engine
      • Unity logo Unity
    • CMS logo CMS
      • Wordpress logo Wordpress
      • OpenCart logo OpenCart
      • Drupal logo Drupal
      • Joomla logo Joomla
      • 1C-Bitrix logo 1C-Bitrix
      • MODX logo MODX
      • Magento logo Magento
      • Shopify logo Shopify
    • Blockchain logo Blockchain
      • Криптовалюты logo Криптовалюты
      •  Decentralized Applications (dApps) (Web 3) logo Decentralized Applications (dApps) (Web 3)
    • Тестирование logo Тестирование
      • Postman logo Postman
      • Selenium logo Selenium
      • Appium logo Appium
      • Protractor logo Protractor
      • WebdriverIO logo WebdriverIO
      • Cypress logo Cypress
      • Playwright logo Playwright
    • Другое logo Другое
      • Linux logo Linux
      • WebRTC logo WebRTC
      • OpenGL Shading Language (GLSL) logo OpenGL Shading Language (GLSL)
    • Подготовка к собеседованию logo Подготовка к собеседованию
    • Обработка и анализ данных logo Обработка и анализ данных
    • Информационная безопасность logo Информационная безопасность
      • Этический взлом / Тестирование на проникновение logo Этический взлом / Тестирование на проникновение
    • Английский язык logo Английский язык
    • Конференции logo Конференции
  • Источники
  • Все курсы
    • Популярные
    • Бесплатные (100+ Курсов)
  • Разделы
  • Книги
    • Бесплатные
    • Популярные
  • Краудфандинг logo Краудфандинг
🇺🇸 English
🇷🇺 Русский
🇺🇦 Українська
Голубая
Фиолетовая
Cветлая
Терминал
Norton
Войти
Используй промокод SUMMERUP - экономь на горячем, трать на холодное! 🍧 🍸 🍋 🍉 🍹
Главная страница Категория react.js Основы веб-производительности

Основы веб-производительности

Web Performance Fundamentals

Nadia Makarevich logo Nadia Makarevich
Основы веб-производительности logo Начать Сейчас
Категория
React.js
Дата добавления
7 июл. 2025 г., 23:36
Язык
Английский

«Основы веб-производительности» посвящена ключевым аспектам повышения скорости и отзывчивости веб-приложений в контексте React-разработки - но при этом это вовсе не книга о самом React-коде. Напротив, она рассматривает всё, что окружает React-приложение и влияет на его производительность:


Метрики и инструменты: вы узнаете, зачем вообще замерять скорость, как работать с отчётами CrUX, Chrome DevTools (панели Performance и Lighthouse), а также что значат такие показатели, как FCP, LCP и INP.

Первичная загрузка: разберёте влияние сетевых условий, CDN и управления кэшем (Cache-Control) на время первой отрисовки страницы.

Флэйм-графы и CSR: научитесь записывать и правильно интерпретировать цветные “монстры“ производительности, поймёте клиентский рендеринг (CSR) и переход к SPA.

Серверный рендеринг (SSR): реализуете собственную стратегию предварительного рендеринга, оцените его издержки и преимущества, узнаете про гидрацию и её влияние на метрики.

Размер бандла: исследуете, насколько объём JavaScript-файлов влияет на загрузку, освоите анализ бандлов, сжатие, отличия HTTP/1, HTTP/2 и HTTP/3, предзагрузку, tree-shaking, code splitting и управление зависимостями.

Lazy Loading и Suspense: шаг за шагом разберёте методы «ленивой» загрузки модулей, поймёте нюансы реализации в разных фреймворках (Next.js, React Router, Tanstack).

Работа с данными: сравните клиентские и серверные стратегии Получения данных, познакомитесь с React Server Components и стримингом, протестируете практические примеры на Next.js и Tanstack.

Интерактивность: изучите Long Tasks, оптимизацию работы основного потока, инструменты React DevTools для борьбы с лишними повторными рендерами, а также экспериментальный React Compiler.

Пошаговые примеры, наглядные исследования производительности и «погружение» в инструменты помогут вам глубоко понять, как всё «за кулисами» влияет на скорость приложения - и научат самостоятельно находить и устранять узкие места.

Посмотреть больше

Автор - Nadia Makarevich

Изображение источника Nadia Makarevich

Nadia Makarevich

Привет, меня зовут Надя! Я фронтенд архитектор, программист, писатель и образовательный работник. Ранее я работала в компании Atlassian, где мне довелось познакомиться с разными аспектами фронтенд-разработки в разных командах, включая Atlaskit, команду навигации Jira, команду Jira Ops и команду Jira Frontend Platform. Последняя была ответственна за архитектуру, сборки, развертывание и лучшие практики всего фронтенда Jira (миллионы строк кода!).

Автор
Посмотреть
+17
Категории
React.js logo

React.js

Другое (Frontend) logo

Другое (Frontend)

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

Другие материалы в этой категории

Изображение курса Основы веб-производительности, v2
frontendmasters logo frontendmasters
27 сент. 2024 г., 13:01
Другое (Frontend)

Основы веб-производительности, v2

Web Performance Fundamentals, v2

Создавайте более быстрые веб-сайты и приложения, изучив актуальные метрики и техники для улучшения веб-производительности. Мы рассмотрим психологию восприятия производительности и то, как пользователи воспринимают время ожидания на вашем сайте. Затем вы познакомитесь с новыми Core Web Vitals, которые Google использует для оценки вашей страницы, такими как Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Interaction to Next Paint (I

5 ч 59 мин
Английский
Посмотреть
+19
Изображение курса Продвинутая веб-производительность
frontendmasters logo frontendmasters Maximiliano Firtman logo Maximiliano Firtman
10 мая 2023 г., 15:03
Другое (Frontend)

Продвинутая веб-производительность

Web App Performance

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

5 ч 18 мин
Английский
Посмотреть
+28
Удален по просьбе правообладателя
Изображение курса Основы веб-производительности
frontendmasters logo frontendmasters
23 янв. 2021 г., 02:19
Другое (Frontend)

Основы веб-производительности

Web Performance Fundamentals

У вас есть веб-приложение или веб-сайт. Он отлично выглядит и делает то, что нужно. Но достаточно ли он быстр для пользователя? Что вообще значит «быстро»? А сколько хватит? Мы обсудим, как установить цели производительности, соответствующие вашим бизнес-целям, какие показатели важны для вас и тактику повышения производительности вашего сайта.

3 ч 50 мин
Английский
Посмотреть
+46
Удален по просьбе правообладателя
Изображение курса Оптимизация веб-производительности и критического пути рендеринга
udemy logo udemy
28 мая 2020 г., 19:04
Другое

Оптимизация веб-производительности и критического пути рендеринга

Optimizing web performance and critical rendering path

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

1 ч 16 мин
Английский
Посмотреть
+37
Изображение курса Веб-производительность с Webpack
frontendmasters logo frontendmasters
13 июл. 2018 г., 17:16
Webpack

Веб-производительность с Webpack

Web Performance with Webpack

Научитесь решать наиболее распространенные проблемы производительности веб-сайта, c основным разработчиком Webpack 4! Вы научитесь создавать сайты с мгновенной загрузкой путем ленивой загрузки JavaScript с разбиением кода, удаления неиспользуемого кода и предварительной выборки активов с помощью магических комментариев. Webpack был создан специально для веб-производительности, и этот курс Шон научит вас использовать все мощные функции оптимизации

1 ч 43 мин
Английский
Посмотреть
+27
Удален по просьбе правообладателя

Ресурс видеоуроков программирования для front и back end разработчиков. Бери знания своего профиля у нас, ведь мы самые лучшие блеать. Серьезно.

Категории
Все категории CSS JavaScript React.js Python Java Golang (Google Go) Другое TypeScript Подготовка к собеседованию Другое (Frontend)
Источники
Все источники balun.courses denis.dmdev (Dzianis Matveyenka) frontendmasters Matt Pocock Nadia Makarevich Thinknetica udemy Олег Козырев Учебный центр IBS
Telegram CourseTrain Цена Контакты Распространенные вопросы Плейлисты Приватность Условия
Темы:
Язык: