БЫСТРЫЙ 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

1. Measure before optimizing: use Performance tab, React Profiler, and bundle analyzers.
2. Keep the initial bundle minimal:
   • Remove unused dependencies
   • Split code and lazy-load heavy assets
3. Compress and minify assets on the server.
4. Optimize images and fonts (resize, compress, use previews).
5. Use debounce/throttle for frequent events and network calls.
6. Make services modular so tree-shaking can remove unused code.
7. In React:
   • Use memoization (React.memo, useMemo, useCallback)
   • Decompose components
   • Use reselect for Redux-derived data
8. 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)