Front-end performance optimization
Why optimize performance? Found that the site and application performance bottlenecks, improve the user experience of
how to optimize the performance? Next we will explain.
1. Use the RAIL model to evaluate performance
1.1 RAIL
A user-centric performance model, each web application has four aspects related to its declaration cycle, which affect performance in different ways.
Delay and user response:
1.2 Response: Handle events in 50ms
- Goal: Respond to user input within 100ms
- Guidance
-Handle user input events within 50ms to ensure feedback of user visual response within 100ms-
Separate task processing for expensive tasks or put them into worker processes to avoid affecting user interaction
-Operations that process events for more than 50ms, always Give feedback (progress and activity indicators)
1.3 Animation: 10ms per frame
- Goal: 10ms (1000ms / 60 frames-6ms (rendered frame budget)) or less time to generate a frame and smooth
- Guidance: At the high pressure point of the animation, try not to deal with logic. Animation type (scrolling, visual animation, drag animation)
1.4 Maximizing idle time
- Goal: Maximize idle time to increase the chance of the page responding to user input within 100ms
- Guidance: Use idle time to complete deferred work, and user interaction has the highest priority during idle time
1.5 Loading: Present interactive content in 5s
- Objective: Present interactive content within 5 seconds of loading the first screen, and loading within 2 seconds of non-first screen loading
- guide
- Test the performance of users' commonly used equipment and network connection
- Optimize critical rendering path to unblock rendering
- Start progressive rendering and perform some work in the background
- Factors affecting loading performance: network speed, hardware (CPU), parsing JavaScript
1.6 Summary of key indicators
- Response: Respond to user input within 100ms
- Animation: When animation or scrolling, a frame is generated in 10ms
- Idle time: the main thread idle time is maximized
- Loading: present interactive content within 1000ms
- User-centric
2. Tools for evaluating performance
- Lighthouse
- WebPageTest
- Chrome DevTools
3. Actual combat
3.1 Browser rendering process
- JavaScript (implement animation, operate dom, etc.)
- Style (combining HTML and CSS into Render Tree)
- Layout (output box model, exact location and size)
- Paint (rasterization, display)
- Composite (render layer merge)
3.2 Browser rendering scene:
website:csstriggers.com
3.3 Performance optimization direction
- load
- Resource efficiency optimization
- Picture optimization
- Font optimization
- Critical rendering path optimization
- Rendering
- JavaScript execution optimization
- Avoid large and complex layouts
- Render layer merge
