Summary of "БЫСТРЫЙ FRONTEND. Оптимизация. Как писать JAVASCRIPT эффективно?"

Overview

Practical guide to frontend performance optimization with emphasis on efficient JavaScript and React-specific techniques. The talk covers metrics, tooling, general best practices, and concrete code-level patterns (debounce/throttle, lazy loading, memoization, SSR, bundle size management, selectors). Examples come from a small React app and build outputs to demonstrate effects on bundle size and rendering.

Key performance metrics & tooling

Important metrics:
- Time-to-first-render (First Paint)
- Time-to-interactive
- Frame rate / smoothness (FPS)
- Memory usage
- Network traffic
Note:

Pages that take longer than ~3s to load see large user drop-off.
Tools:
- Chrome DevTools Performance tab — record reloads, throttle CPU/network, inspect timeline, FPS, CPU usage, and screenshots (paint profiling).
- React/Vue profilers — measure component re-renders, durations, and frequency.
- Bundle analyzers — inspect bundle composition and sizes (chunks vs full bundle).

High-level recommendations

Use a framework (React, Vue) for non-trivial apps — they provide advanced optimizations (Fiber, diffing, render trees).
Avoid importing unnecessary NPM libraries; every dependency increases bundle size.
Measure bundle-size changes and prefer async/lazy loading when possible.
Monitor bundle composition and split work so users download only what they need.

Bundle size reduction techniques

Compression:
- Enable gzip (or similar) on the server (nginx/Apache) so browsers receive compressed assets.
Minification:
- Remove whitespace, comments, and unused tokens during the build.
Tree-shaking (dead-code elimination):
- Structure code to make tree-shaking effective — export small functions instead of monolithic services.
Code splitting:
- Split bundles into chunks and deliver only the required code (e.g., desktop vs mobile, per-language bundles).

Lazy/asynchronous loading and code-splitting

Lazy-load images, fonts, heavy libraries, and large components to improve first paint and reduce the initial payload.
In React:
- Use React.lazy + Suspense and dynamic import() to produce separate chunks.
- Lazy-load large components and reducers (dynamic reducer injection) so unused logic isn’t part of the initial bundle.
Prepare images appropriately (preview thumbnails vs full resolution on demand).

Input/event optimization

Debounce:
- Wait until the user pauses (e.g., typing) before running expensive actions (search network request). Typical implementation: a hook that sets/clears a timeout and calls the callback after a pause.
Throttle:
- Limit a callback to run at most once per time window (e.g., a mousemove handler once per second). Typical implementation: a flag + timeout.

Server-side rendering (SSR) and hybrid approaches

Hybrid SSR frameworks (Next.js, Nuxt) can improve first paint, SEO, and reduce client-side execution by pre-rendering HTML on the server and hydrating on the client.
Proper SSR can enable serving different bundles for mobile vs desktop (user-agent detection) and per-language bundles to reduce payload.
Caveat: SSR is non-trivial to configure correctly; off-the-shelf solutions help but require careful setup.

React-specific rendering & performance techniques

Prevent unnecessary re-renders:
- React.memo — prevents child re-renders when props/state are unchanged.
- useMemo — cache expensive computed values (arrays/objects) so references don’t change across renders.
- useCallback — memoize function references passed to children.
Understand equality:
- Primitives are compared by value.
- Objects, arrays, and functions are compared by reference — creating a new object each render forces re-renders unless memoized.
Component decomposition:
- Split components to localize state and avoid bubbling state changes that trigger large re-renders.
Containers vs presentational components:
- connect (Redux) and mapStateToProps — connect re-evaluates after dispatch but will only re-render when selected state changes. Avoid passing freshly created objects/arrays as props.
- Hooks (useSelector, useDispatch) provide a functional style; you must still ensure stable references with useMemo/useCallback.

Selectors and memoization

Use memoized selectors (e.g., reselect) to:
- Combine selectors
- Compute derived data
- Return stable references when inputs haven’t changed
Benefit: avoids unnecessary recomputation and re-renders (example: computing totals or taxes from an items array — reselect recalculates only when inputs change).

Concrete demos / examples shown

Chrome Performance and React Profiler walkthrough.
Demo where importing 3 modules inflated a bundle ~10x; chunking with React.lazy reduced the main bundle and created separate chunks.
Debounce hook example for search input (reduces requests).
Throttle hook example for mousemove logging (reduces event frequency).
React.memo + useMemo + useCallback examples to stop unnecessary child re-renders.
reselect example combining basic selectors into derived selectors (tax + total) to avoid recomputation.

Actionable checklist / best practices

Measure before optimizing: use Performance tab, React Profiler, and bundle analyzers.
Keep the initial bundle minimal:
- Remove unused dependencies
- Split code and lazy-load heavy assets
Compress and minify assets on the server.
Optimize images and fonts (resize, compress, use previews).
Use debounce/throttle for frequent events and network calls.
Make services modular so tree-shaking can remove unused code.
In React:
- Use memoization (React.memo, useMemo, useCallback)
- Decompose components
- Use reselect for Redux-derived data
Consider SSR/hybrid rendering for first-render performance or SEO, but be mindful of added complexity.

Main speakers / sources referenced

Single presenter (unnamed in subtitles)
Technologies & libraries mentioned:
- React (React.memo, useMemo, useCallback, React.lazy/Suspense)
- Vue
- Next.js, Nuxt
- Webpack (tree-shaking)
- Chrome DevTools Performance & React Profiler
- reselect (memoized selectors)
- gzip (server-side compression), nginx/Apache (server config)