- Network loading
⑴ DNS preload
The dns-prefetch attribute allows the browser to resolve the server IP address corresponding to the resource or interface in advance, avoiding DNS resolution requests in the request, and saving request time.
Insert picture description here Insert picture description
here
⑵ CDN acceleration
Solve the problem of access delay caused by distribution, bandwidth, and server performance. It is suitable for site acceleration, on-demand, live broadcast and other scenarios. It enables users to obtain the required content nearby, solves the congestion of the Internet network, and improves the response speed and success rate of users visiting the website.
Insert a picture description
here Insert a picture here to describe
the advantages of CDN:
Local Cache acceleration, speed up access
Mirror service, eliminate the bottleneck impact of interconnection between operators, and ensure that users on different networks can get good access quality
Remote Accelerate, automatically select cache server
Optimize bandwidth, share network traffic, reduce pressure,
Cluster anti-attack
Save cost
⑶ Resource preload
Using the preload, prefetch, and preconnect attributes, we can write resource acquisition requests declaratively internally, load non-first screen but more important resources in advance, and avoid ignoring other less important resources when the first screen is first loaded. load;
⑷ Setting of http cache header
HTTP caching includes strong caching (Cache-Control, Expire) and negotiation caching (Last-modified, Etag). Among them, the protocol cache resource will send a request to the server every time to determine whether the resource has expired, and return 304 if the resource is not expired. In the case of an extremely stuck network, this 304 request may block the resource loading of the entire page;
⑸ Prioritize loading of JS resources according to the module and first screen requirements, and load the unnecessary modules on demand
Mobile network resources are limited. In order to allow 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;
⑹ Inline key CSS of the first screen
Inline the key styles of the first screen to the page to ensure that the first screen with basic styles can be seen as quickly as possible, and to avoid a long time of white screen on the user side;
⑺ Inline key JS code
The inline key code is also to let the user feel that the page has been loaded successfully for the first time, but the inline code cannot inline all the code into the HTML, because these codes will be downloaded with HTML every time, increasing the size of the HTML file. Nor can the code provide multiplexing functions among different web pages.
⑻ Check whether the resources delivered by the server use GZIP compression
GZIP has high compression efficiency for text resources (JS, CSS files), and usually can reduce the volume by 70%. But not every browser supports gzip. If you know whether the client supports gzip, there is an Accept-Encoding in the request header to identify the support for compression. The client http request header declares the compression method supported by the browser, the server configuration enables compression, the compressed file type, and the compression method. When the client requests to the server, the server parses the request header. If the client supports gzip compression, the requested resource is compressed and returned to the client in response. The browser parses it in its own way. In the HTTP response header, we can See content-encoding: gzip, which means that the server uses gzip compression.
Insert picture description here
⑼ to avoid resource redirection
Increase the loading time, and the user experience is poor.
⑽ Asynchronous lazy loading of third-party non-critical code
The mobile terminal has limited network resources. In order to prevent these unimportant codes from affecting the rendering of the first screen, they can be loaded after a short delay;
Insert picture description here
⑾ Use local cache (sessionstorage and localstorage) reasonably to avoid putting all unnecessary data in cookies
Because the client adds a lot of cookies, all cookies will be submitted to the server every time it is requested, too many will cause a 400 error;
⑿ Use service worker to increase the offline experience of the page and the loading experience of the
page. When the page sends a request, it will go through the SW script first, which allows us to programmatically formulate the files we need to cache, and at the same time, cache in the service worker Can be accessed offline;
reference: https://segmentfault.com/a/1190000012353473?utm_source=tag-newest
⒀ The HTTP2.0 protocol can be used if conditions permit
The HTTP2.0 protocol can improve the reusability of network links and improve resource loading efficiency; see the comparison between http 2.0 and 1.1.
- HTML
⑴ Pay attention to the semantics of tags and keep the most concise tags to complete the required functions
The semantics of tags (see the new semantic tags in HTML5) improve the maintainability of the code, and it will not be ugly when the page fails to load CSS. At the same time, tags need to be kept to a minimum, meaningless tags can be represented by pseudo-classes;
⑵ When CSS is placed in the head, JS is placed at the end of the body, and both JS and CSS need to be placed in the head, JS is placed in the front:
The position of JS and CSS on the page will affect the loading order of other resources (referring to non-js and css resources such as img). The reasons are three points worth noting:
js may modify the DOM. Typically, there may be document.write, which means that before the current js is loaded and executed, the download of all subsequent resources may be unnecessary. This is the root cause of js blocking subsequent resource downloads.
The execution of js may depend on the latest style. For example, there may be var width = $('#id').width(). This means that before the js code is executed, the browser must ensure that all css before this JS (whether external or embedded) are It has been downloaded and resolved. This is the root cause of css blocking subsequent js execution.
Modern browsers are smart and will optimize prefetch. Performance is so important that modern browsers are in competition. In addition to the UI update thread, another thread will be opened to download the subsequent JS and CSS in advance (note that it is only downloaded in advance and not executed). With prefetch optimization, this means that in the absence of any blocking, the download timing of js and css is theoretically very prioritized, regardless of location.
Reference: https://www.erdangjiade.com/topic/133487.html
https://www.jianshu.com/p/0291ad9ac8fb
⑶ HTML code compression, remove comments and whitespace
Reduce the file size of network transmission.
⑷ Try to avoid using iframe
The download process of resources in the iframe will block the downloading of the static resources of the parent page and the parsing of CSS and HTML DOM. The onload event of the window needs to be triggered after all iframes are loaded (including the elements inside).
- CSS
⑴ Compress the CSS code and exclude duplicate CSS styles
Reduce the file size of network transmission.
⑵ Package CSS files according to components
Load on demand, reduce the file size of network transmission.
⑶ Avoid using CSS @import syntax
It may block the loading of the page. The CSS referenced by @import will wait until the page has been downloaded before being loaded. Therefore, if the internet speed is restricted, a webpage with only frames and no styles will be loaded, and @import has a limit on the number.
⑷ When using pre-compiled languages such as Sass, Stylus, Less, etc., coding CSS nesting does not exceed 3 levels to
improve the efficiency of parsing CSS;
⑸ Use autoprefixer to automatically add prefix to CSS code
Automatically help us add browser headers to avoid unexpected browser compatibility issues.
⑹ Use css wildcards (*) as little as possible, especially at the end of multi-level nesting
The parsing process of CSS is reverse matching from right to left, and using CSS wildcards will increase the amount of parsing calculations.
⑺ Don’t abuse high-consumption styles
The attributes of box-shadow and border-radius require a lot of calculations before drawing.
- Animation
⑴ Simple animation try to use only transform, opacity, transition and other attributes to complete
Changes in attributes such as width, height, top, left, right, bottom, margin, etc. will trigger page rearrangement. Frequent rearrangement in the mobile environment will cause animation to freeze.
⑵ More complex animation can use css frame animation
Good compatibility, good performance and more maneuverability on the mobile terminal.
⑶ Do not use setTimeout, setInterval for js animation, use requestAnimationFrame
SetTimeout and setInterval have performance problems in animation execution and cannot accurately control the number of frames.
Insert picture description here
5. JavaScript
⑴ JS code compression, code sub-module loading
Reduce code size, load resources on demand according to page requirements, minimize the size of resources that users need to load, and speed up page display;
⑵ When dealing with long lists or a large number of DOM elements, do not bind too many event listeners
Save memory and reduce the registration of monitoring events, such as using event agents;
The number of events added to the page will affect the performance of the page. If too many events are added, the performance of the page will decrease. Using event proxy can greatly reduce the number of registered events.
At the time of event delegation, a certain descendant element is dynamically added, and there is no need to bind it to events again.
Don't worry that after a DOM element registered for an event is removed, its event handler may not be recycled. We can avoid this problem as long as we delegate the event handler to a higher-level element.
⑶ Use the throttle and debounce functions to handle frequently triggered functions, but do not need frequently executed functions, such as scroll, touchmove
Avoid frequent invalid operations and page jams. For details, see the article on anti-shake and throttling: https://blog.csdn.net/zl13015214442/article/details/90600153;
⑷ Use setTimeout instead of setInterval
The setInterval may have a problem of instruction accumulation, which causes the page to freeze;
⑸ Try to avoid mass rearrangement and redrawing (reflow)
The reflow of the page is very performance-consuming, especially the reflow (reflow).
- image
⑴ Use tools to compress pictures
The mobile terminal network conditions are limited. The larger the picture, the longer the loading time. Reasonable use of tools to compress the picture can take into account the picture quality and picture size.
⑵ File webp with higher compression ratio
Use pictures with a higher compression ratio, such as webp. In the case of the same picture quality, the picture size of the high compression ratio format is smaller, which can complete the file transmission faster and save network traffic. Reduce the size of the file transfer, avoid the problem of improper use of the picture size, small icons use large pictures.
⑶ Use Sprite
The basic principle of CSS Sprite is to integrate some pictures used on your website into a single picture, thereby reducing the number of HTTP requests for your website. The image is rendered using CSS background and background-position properties, which means that your label becomes more complicated. The image is defined in CSS, not the label. Reduce the number of http requests, but when our http protocol is upgraded to 1.1, 2.0, the effect of Sprite reducing the number of http requests is not obvious;
⑷ Lazy loading of pictures
To prevent users from loading too many useless resources in advance and wasting user traffic, see the blog post on lazy loading implementation for details: https://blog.csdn.net/zl13015214442/article/details/88600300;
⑸ Load pictures of different sizes according to different screen pixel ratios
Loading a small size picture on a screen with a larger pixel ratio will blur the picture; loading a larger picture on a screen with a smaller pixel ratio will waste user traffic and cdn traffic;
⑹ Pictures smaller than 2KB can be replaced by base64 format
In the case that the background image used on the page is not many and small, the image can be converted into base64 code and embedded in the HTML page or CSS file, which can reduce the number of HTTP requests for the page. It should be noted that to ensure that the picture is small, it is generally not recommended to use base64 embedded display for pictures larger than 2KB. Converting pictures to base64 format can reduce the number of http requests, but you cannot use base64 format for larger-size pictures, because the base64 algorithm will increase the file size by one third;
Insert picture description here
7. Font
⑴ Compress the font size, avoid loading too many useless resources, recommend the tool font spider
We only need the font files needed by the page, and there is no need to waste traffic loading resources that users don't need;
⑵ Optimize the display strategy of fonts
Use the font-display property to avoid the problem of not displaying text during the font loading process;
⑶ When the amount of special text is small and the content is fixed, you can try to use pictures instead
Quick and perfect restore interface.