دانلود کتاب اصول عملکرد وب – راهنمای توسعه‌دهنده فرانت‌اند برای پروفایل‌بندی و بهینه‌سازی برنامه‌های وب React

The book is about the fundamentals of web performance that are particularly relevant for React developers. This is not a book about how to write React code. There are plenty of books for that already. It’s almost the opposite – it’s about everything that is not React code. Everything that surrounds it and contributes to what we know as Performance. In this book, you won’t learn different state management techniques or how to split components. However, you will learn on a very deep level how to record and understand Performance Flame Graphs, different types of server and client rendering, how different data fetching strategies contribute to initial load performance, and so much more. In the next chapter, “Let’s Talk About Performance”, we’ll look into why bother with performance in the first place, other than for personal entertainment. Plus, what the CrUX report is, why it’s useful, and a few other resources to get you started with measuring performance. In “Intro to Initial Load Performance,” we’ll take a first look at the Chrome DevTools Performance and Lighthouse panels, understand what Initial Load is and how to measure it via metrics like FCP and LCP, and make our first few discoveries. While doing so, we’ll investigate how different network conditions influence initial load, what a CDN is for, and learn the basics of Cache Control. In the “Client-Side Rendering and Flame Graphs” chapter, we’ll become proficient in recording and understanding the Performance Flame Graphs – you know, those colorful monstrosities that confuse everyone who sees them for the first (or tenth) time. While doing so, we’ll understand what the Client-Side Rendering (CSR) pattern is and why it’s important. In the “SPAs and Introducing INP” chapter, we’ll continue with CSR and its natural extension, the Single-Page Application (SPA). While doing so, we’ll learn more about DevTools, touch on the next performance metric, INP, and look more into the Lighthouse report. In the “Intro to Rendering on the Server (SSR)”, we’ll investigate, you’ve guessed it, Server-Side Rendering. We’ll implement our own pre-rendering strategy, understand the cost of introducing SSR to a previously CSR app, how SSR affects initial load metrics, what hydration is, and how to implement SSR properly in React code. The “Bundle Size and What to Do About It” chapter focuses on the size of JavaScript we’re producing and why it matters (or doesn’t matter). In the process of this investigation, you’ll learn about compression, which aspects of initial load the size of JavaScript can affect, become a master of bundle size analysis, touch on the difference between HTTP/1 and HTTP/2 & 3, learn about preloading, code splitting, tree shaking, different module formats, transitive dependencies, and probably more. It’s a huge chapter! In the “Intro to Lazy Loading and Suspense”, we’ll continue our investigation into the bundle size and talk about, no surprise here, lazy loading and Suspense. How to implement them properly, and as always, what the consequences are if you don’t. In the “Advanced Lazy Loading”, we’re still going to talk about lazy loading! You’d be surprised at how complicated and nuanced the topic is. But as a result, we’ll know the most important concepts behind frontend frameworks like Next.js, React Router, or Tanstack, why we need code splitting per route, why all frameworks give you a Link component, how to do preloading, how SSR comes into play with preloading, and even migrate our Study Project to the Tanstack framework and measure the results. The “Data Fetching and React Server Components” chapter finally leads us away from bundles. We’re going to talk about data fetching: on the client, on the server, and in between. How to implement and analyze client-side data fetching, including where and how to perform data prefetching, what happens if data is fetched with Server-Side Rendering (SSR) enabled, and the associated costs. This leads us to React Server Components – what problem they solve, how they solve it, and how to make sense of them generally. Plus, we’ll throw Streaming into the mix and polish everything by trying out Next.js in addition to Tanstack. Tired of initial load performance? In the “Interaction Performance” chapter, we’ll finally move away from it and focus on interactions. How to navigate Chrome DevTools when it comes to interactions, what a Long Task is and how to fight it by yielding to main, how it’s relevant to React developers, and what React DevTools have to offer here. The “Getting Rid of Unnecessary Re-renders” chapter is the most React-y chapter here and focuses entirely on the React API. We’re going to improve interaction performance here by fighting and winning the battle against sneaky unnecessary rerenders. All the classics: moving state around, passing components as children, Context and props drilling, and of course, memoization. Does everything about React memoization make your blood boil? In the “React Compiler” chapter, we’ll explore what the new, still experimental at the time of writing this book, tool has to offer for solving it. And is it worth it? Hope that’s enough content to keep you busy for a while! Now let’s set up the development environment and the Study Project, and let’s get started.