First, network loading
1. DNS preloading
Using the dns-prefetch attribute, the browser can resolve the server IP address corresponding to the resource or interface in advance, avoiding initiating DNS resolution requests and saving the request time
2. Preloading resources
With the preload, prefetch, and preconnect attributes, we can write declarative resource acquisition requests inside to load non-first-screen but more important resources in advance, so as to avoid neglecting the loading of other secondary important resources when the first-screen priority is satisfied
3. Use CDN resources and pay attention to the setting of HTTP cache headers
HTTP caches include strong caching (cache-control, Expire) and last-Modified protocol caching (Etag). Each time, the protocol cache resource will send a request to the server to determine whether the resource is expired. If the resource is not expired, 304 will be returned. In the case of network congestion, this 304 request may block the resource loading of the whole page
4. Priority is given to loading JS resources according to the requirements of modules and the first screen, and modules that are not needed are loaded on demand
Network resources on mobile terminals are limited. In order to enable users to see a meaningful first screen as soon as possible, we need to keep the resources that need to be loaded on the first screen as small as possible
5. Inline the key CSS on the first screen
Inline the key styles on the first screen to ensure that the first screen with basic styles is displayed as soon as possible, avoiding a long blank screen on the client
6. Inline key JS code
Inlining key code is also intended to make the user feel that the page has been loaded successfully in the first time, but the inlining code cannot inline all the code into THE HTML, because the code will be downloaded with THE HTML each time, increasing the size of the HTML file, and the code can not be reused between different web pages
7. Check whether resources delivered by the server are compressed using GZIP
GZIP has high compression efficiency for text resources (JS, CSS files), usually reducing the volume by 70%
Avoid resource redirection
Increasing load time leads to poor user experience
9. Asynchronous lazy loading of third-party non-critical code
Mobile terminal network resources are limited, in order to make these unimportant code does not affect the first screen rendering, can delay the loading for a short period of time
10. Use local cache reasonably to avoid putting unnecessary data into cookies
Each AJAX request passes all COOKIE values in the current domain name to the server
11. Use service worker to increase offline page experience and page loading experience
When the page sends the request, it will go through the script of SW first, which allows us to formulate the files we need to cache through programming. Meanwhile, the files stored in service worker can be accessed by users offline
12. Use the HTTP2.0 protocol when conditions permit
The HTTP2.0 protocol improves the reusability of network links and resource loading efficiency
Second, the HTML
1, pay attention to the semantic of the label, keep the most concise label to complete the required function
The semantics of the tags improve the maintainability of the code and make it less ugly when a page fails to load CSS. At the same time, labels need to be minimized, and meaningless labels can be represented by pseudo-classes
2,CSS in the head, JS to the end of the body, JS,CSS need to be in the head, JS in the front
1. CSS blocks page rendering and does not block DOM parsing; JS blocks DOM parsing, but browsers download resources in advance. 3. When the browser encounters a script tag, the page will be rendered. If the CSS has not been loaded, the page will wait for the CSS to be loaded before executing
3, HTML code compression, remove comments, whitespace
Reduce the size of files transferred over the network
4. Try to avoid using iframe
Iframe resources download process will block the parent page static resources download and CSS and HTML DOM parsing
Three, CSS,
1. Compress your CSS code to eliminate duplicate CSS styles
Reduce the size of files transferred over the network
2. Package the CSS file according to the component
Load on demand to reduce the size of files transferred over the network
3. Avoid the @import syntax of CSS
May block page loading
4. When using precompiled languages such as Sass, Stylus, and Less, no more than three layers of coded CSS are nested
Improve the efficiency of CSS parsing
5. Use Autoprefixer toprefix CSS code automatically
Automatically helps us add browser headers to avoid unexpected browser compatibility issues
6. Use CSS wildcards as little as possible, especially at the end of multi-layer nesting
The CSS parsing process is matched from right to left. Using CSS wildcards increases the amount of parsing
7. Don’t abuse high-consumption styles
Box-shadow, border-radius, and filter require a lot of calculation by the browser before drawing them
Four, animation,
1. Simple animations should only use transform, opacity, transition and other properties
Changes in attributes such as width, height, top, left, right, bottom, and margin trigger page rearrangements, and frequent rearrangements in mobile environments can lead to animation stalling
2. More complex animations can be animated using CSS frames
In the mobile terminal compatibility, good performance, more controllable
Do not use setTimeout or setInterval for JS animations. Use requestAnimationFrame instead
SetTimeout and setInterval have performance problems in animation execution, and cannot accurately control the number of frames
4. Enable GPU hardware acceleration for the part that will use animation (be careful not to abuse it)
For a TAB with GPU hardware acceleration enabled, the browser will elevate it to a separate layer and preprocess it with the GPU
5. Use will-change (be careful not to abuse it)
Will-change is used to tell the browser which attributes are about to change, so it can be prepared in advance
Five, JavaScript,
1, JS code compression, code module loading
Reduce the code size, load resources according to page requirements, minimize the size of resources that users need to load to speed up the page display
2. Do not bind too many event listeners to long lists or large DOM elements
Save memory and reduce the registration of listening events
3. Use throttle and debounce functions to handle frequent triggering, but do not need to execute frequently, such as Scroll and touchmove
Avoid frequent invalid operations and page stuttering
4. Use setTimeout instead of setInterval
SetInterval may have a problem with instructions piling up, causing the page to stall
5, try to avoid large quantities of rearrangement and redrawing
Rearranging and redrawing pages is a performance drain, especially rearranging pages
Six, pictures,
1. Use a tool to compress the image
Due to limited network conditions on mobile terminals, larger images take longer to load. Therefore, using proper compression tools can give consideration to both image quality and image size
2, use the high compression ratio format of the file webP
Reduce the size of file transfer to avoid the problem of improper use of image size. Use large images for small ICONS
3. Use Sprite
Reduce the number of HTTP requests. However, after our HTTP protocol was upgraded to 1.1 and 2.0, Sprite did not significantly reduce the number of HTTP requests
4. Lazy loading of images
This prevents users from loading too many useless resources in advance and wasting user traffic
5. Load images of different sizes according to different screen pixel ratios
Loading a small image under a screen with a larger pixel ratio will blur the image; Loading large images under a screen with a smaller pixel ratio will waste user traffic and CDN traffic
6. Images smaller than 2KB can be replaced with base64
Converting images to Base64 can reduce the number of HTTP requests, but you can’t use Base64 for larger images because the Base64 algorithm increases the file size by a third
Seven, fonts,
1, compression font size, avoid loading too much useless resources, recommended tool word spider
We only need the font files that the page needs. We don’t need to waste traffic loading resources that users don’t need
2. Optimize font display strategy
Use the font-display property to avoid the problem of not displaying text during font loading
3, when the special text is small and the content is fixed, you can try to use pictures instead
Quick and perfect restore interface
Eight, other
1. When there is a large demand for resources on the whole page, you can use the skeleton screen or increase the loading effect
Enhance the user experience, speed up the first screen experience, and allow users to get feedback in advance through meaningful UI
2. Lighthouse Performance Scores
Google launched the web performance running division of tools, can be a more comprehensive understanding of the site’s performance
3. Go to the Code Coverage section of Chrome’s control panel to find the percentage of unused code
Help us quickly find unused code on the first screen
4. Use Scope as in the build tool
Here take Webpack as an example. The file packaged by Scope is smaller in size, and the function Scope created during code running is less, thus improving the startup speed of JS
reference
- web-performance-made-easy
- Rail model explanation
- Yahoo Performance Optimization
- Google PageSpeed Insights Rules
- Google IO Web Performance Optimization Notes
- 14 Rules for Faster-Loading Web Sites
- 2018 Front-end Performance Optimization list
- 2017 Front-end Performance Optimization List
- Meituan sensory performance optimization
- Front-end performance optimization is relevant
- Introduction of PWA
- CSS Performance Optimization
About me
I am a modefeelings code porter, will update 1 to 2 front-end related articles every week, interested in the old iron can scan the following TWO-DIMENSIONAL code attention or direct wechat search front-end cram school attention.
Mastering the front end is difficult, let’s make up the lesson together!