Skip to content

Latest commit

 

History

History
96 lines (91 loc) · 6.86 KB

Performance.md

File metadata and controls

96 lines (91 loc) · 6.86 KB
Raw

Оптимизация производительности веб приложений

  • Оптимизация Изображений
  • Оптимизация Шрифтов
  • Lazy Load и Code-Splitting
  • Кэширование
  • Минификация
  • Оптимизации js
  • React performance

Оптимизация Изображений

  • Сжимать изображения. С помощью сервисов, например tinypng
  • Выбирать подходящие форматы изображений jpg, png, WebP.
  • Использовать превью изображений, например для карточек.
  • Использовать разные размеры изображений для различных устройств. Атребуты srcset and sizes:
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

или использовать элемент picture.

  • Использовать векторную графику SVG там где это возможно.
  • Использовать lazy loading. Библиотеки или атребут loading: <img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> Поддержка loading пока не велика, но для прогрессивного улучшения подходит.

Оптимизация Шрифтов

  • Использовать оптимальные форматы шрифтов. Например WOFF2. Преимущество использования WOFF2 заключается в пользовательских алгоритмах предварительной обработки и сжатия, что приводит к 30% уменьшению размера шрифта.
  • Удаление лишних начертания, например extra-supra-bold-italic-800.
  • Можно удалить неиспользуемые символы из шрифтов.
  • Использовать Font-display (выбор алгоритма загрузки шрифтов).
    • auto Стратегию загрузки шрифта определяет пользовательский агент.
    • block Для шрифта задается короткий период блокировки и бесконечный период подмены.
    • swap Для шрифта не задается период блокировки и задается бесконечный период подмены.
    • fallback Для шрифта задается очень короткий период блокировки и короткий период подмены.
    • optional Для шрифта задается очень короткий период блокировки и не задается период подмены.

Оптимизация JS

  • Lazy Load и Code-Splitting с помощью webpack, а также с помощью динамических импортов и React.lazy. Таким образом доставка только нужного кода пользователю и рабиение бандла.
  • Удалние лишних зависимостей. Для оценки размеров рависимостей - webpack-bundle-analyzer. Импорт только нужных частей библиотек.
  • Минификация - по дефолту webpack минифицирует бандл, но это поведение можно сконфигурировать.
  • Уменьшение количетва запросов и кэширование. Варианты - graphQL, reactQuery, WS, HTTP-2.
  • Использовать атрибуты defer, async. Оба атрибута работают только с внешними скриптами. 
    <script async src="https://any.ru/some/script-async.js"></script>
    • defer - арребут показывает браузеру что скрипт нужно загрузить в фоновом режиме и запустить когда DOM дерево будет полностью построено. Последовательность выполнения скриптов сохраняется. Используется для скриптов обращабщихся к DOM или важен порядок их выполнения
    • async - страница не ждет загрузки скриптов, скрипты выполняются в порядке загрузки. Хорош для внешних скриптов (например счетчики) где не важен порядок выполнения.

Оптимизация React

  • Использование прод. режима в webpack. Который также включает минификацию.
  • Использование расширения для браузера React profiler.
  • Постепенная загрузка длинных списков. (react-window and react-virtualized are popular windowing libraries).
  • Для Class components:
    • Избежание перерендера с помощью shouldComponentUpdate
    • Избежание перерендера с помощью наследования от React.PureComponent. Который релизует логику shouldComponentUpdate автоматически c shallow comparison of props and state.
  • Для Function components:
    • React.memo - позволяет пропустить рендер елси props не изменилтись. Осуществляет shallow comparison. Также в hoc можно передать функцию для сравнения prevProps, nextProps.
    const MyComponent = React.memo(
  function MyComponent(props) {
    /* render using props */
  },
  function areEqual(prevProps, nextProps): boolean {}
);
    • useMemo - позволяет избежать пресчета больших вычислений и возвращет мемоизованное значение в случае, если зависимости не изменились.
      const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
    • useCallback - действует похожим образом но возвращает мемоизованную функцию.
      const memoizedCallback = useCallback(
    () => {
      doSomething(a, b);
    },
    [a, b],
 );
    Официальный блог React о performance.