Slow to load.
Resources: Slow above the fold, too many concurrent requests, slow above the fold interface, slow execution of the fold interface, slow execution of fold corresponding to fold render, fold loading of static resources, and slow execution process.
The interface is slow, there are too many long tasks, blocking JS, performing memory leaks, redrawing and rearranging too much, and the key nodes are not throttled and stabilizedBy establishing performance monitoring metrics: Determine whether a user is stuck through real user data feedback, including network monitoring and runtime performance monitoring.
chrome devtools: networkMainly troubleshoot network problems.
chrome devtools: performanceIt mainly examines the performance runtime performance, including long tasks, render times, reflow and redraw, execution timeline, and blocking scenes.
chrome devtools: performance monitorMonitor user runtime performance to see if there is any memory leak.
react developer tools: It can be used to track React app performance, number of renders, reflow and redraw.
lighthouse: A tool that comprehensively analyzes the performance of web pages and supports browser plug-ins.
webpack-bundle-analyzer: Perform product dependency analysis and package size analysis.
Grab the packet: By capturing packets, look at online request analysis, request simulation, and network hijacking, and only look at the JS execution time.
E2E testing: Perform performance pre-check through e2e, perform a series of system operations before each go-live, and see how much time is consumed and how long it takes to go online.
Above-the-fold loading slow direction
Resource loading direction.
usetree shakingReduce package size**Compression and obfuscationFor older browsers, use the ES6 syntax directly, and use ES5 for lower browsers (the amount of ES6 syntax will be much smaller than that of compiling to ES5, and the execution speed is also faster).split chunksSplit large packets and reuse small packetsgzipUse **Compression: Use the Sprite icon to useiconfontLazy loading loads, which only load the necessary resources used above the foldtailwindcssand other technologies, reusing CSS to useMicro front-endTechnically, the first screen only loads the current sub-application page, and only a small part of the whole site can be loaded**The first screen does not necessarily rely on deferring to FMP or TTI as much as possible before loading the component micro front-end rendering direction.
Minimize reflow, redraw, reduce duplicate rendering (usememo, usecallback, memo, etc.), reduce the number of setstates (multiple setstates can be combined into one), and minimize the deep network orientation of dom nodes.
Using streaming server-side rendering, you can view the documentation: using server-side rendering, reducing above-the-fold requests, using SSG static sites to generate necessary data above the fold, not making client-side requests, using backend template injection, using BFF for request aggregation, using CDN for network request distribution, DNS prefetch resource preloading (resources and interfaces required to load subsequent pages in your spare time, e.g., link rel preload), enabling HTTP2 multiplexing on business logic, The necessary interfaces above the fold are used in advance (for example, at the moment when the HTML is loaded, a very small JS file is used to send the requests required for the first screen, and then cached them, and then use them directly when the business uses them) Use caching technology to cache resources and requests: strong cache, negotiation cache, offline cache, service worker cache, and backend business cacheDirection of lag at runtime
Check to see if there islong tasks, Planned dismantlinglong tasksSolve the complexity problem in the project: Check whether the project has memory leaks, check whether a specific business process has slow interfaces, and put the highly complex computing logic in the service worker for processing.