** Abstract: ** This article will share some common approaches to front-end performance optimization, including reducing requests, reducing resource sizes, various caching, preprocessing, and long-connection mechanisms, and code-side performance optimization.

Base64: especially in mobile terminals, small ICONS can be base64 (Webpack), large images should be used sparingly (if the loading speed is too slow, and very important pictures can be used base64)

1. Reduce the number of HTTP requests and the size of transmitted packets

CSS Sprite (Sprite, Sprite) technology

Use vector diagrams such as Icon Font or SVG

+ Reduce the number of HTTP requests or the size of the request content

+ Render faster: because they are rendered based on code, for bitmaps (PNG/JPG/GIF) it is necessary to encode the image in the render first

+ is not easy to frame deformation

+ You can also use webP images, which are smaller (but require server-side support for request processing in this format)

Image lazy loading (lazy loading) technique

+ Don’t request real images when loading the page for the first time, improve the speed of rendering the page for the first time, and minimize the extra consumption of requested images

+ When the page is loaded, load the images that appear in the user’s field of view in a real way, and do not load the images that do not appear (save vagrancy and reduce the request pressure on the server)

  • We also try to load data in batches (don’t request too much data at once, such as paging techniques)

Audio and video files are unpreloaded (preload=’none’), which increases the speed of rendering the page the first time and loading it when it needs to be played

Data transfer between client and server should be done in JSON format, XML format is larger than JSON format (can also be in binary encoding or file stream format, which is much better than file transfer)

The page CSS/JS and other files for consolidation and compression

Merge: Try to import only one CSS and js (Webpack can do this and merge compression)

Compression: based on Webpack can be compressed, for pictures to find their own tools to compress, you can use the server GZIP compression

Image BASE64 (BASE64 code on behalf of the image, reduce HTTP, increase browser rendering speed, so it is really in the project, especially the mobile end, if the image load slowly, BASE64 is good; But Base64 leads to file-centric code that is super disgusting and not conducive to maintenance and development, so use it less); Webpack Cas configuration picture

2. Set up various caching, preprocessing and long connection mechanisms

Cache static resources that do not change often (usually 304 or ETAG negotiation cache)

Establish strong caches for cache-control and Expires HTTP

DNS cache or DNS Prefetch reduces DNS lookups

Set up a local offline storage (MANIFEST) or some data that does not change often as a local temporary storage (webstorage, IndexDB), etc

Do CDN (geographical distributed server) if you have money, or add server

Establish Connection: keep-alive Tcp long Connection

Using the HTTP2 version protocol, multiple TCP channels can coexist => pipelining links

A project is divided into different domains (different servers), such as: resource Web server, data server, picture server, video server, etc., reasonable use of server resources, but lead to too much DNS resolution

Cache-control takes precedence over Expires

Based on local storage, do data storage

3. Code performance optimization

Reduce the use of closures (because overuse of closures creates a lot of undestroyed memory, which can lead to “stack overflow” if not handled properly), and reduce the nesting of closures (reduce the search level of the scope chain)

For animation: Those that can be handled with CSS don’t use JS (those that can be handled with transform, not traditional CSS styles, because transform turns on hardware acceleration and doesn’t cause backflow, or it’s better to use positioned elements, because positioned elements are out of the document stream and don’t affect the position of other elements), Use requestAnimationFrame to solve the problem without a timer

+ Another benefit of requestAnimationFrame is that when the page is in a dormant state, the animation will pause itself until the page replies to the request, and the timer will be processed no matter what state the page is in

Avoid using iframe (because iframe is embedded in other pages, so that the parent page is rendered at the same time as the child page, rendering progress will be slow)

Reduce direct manipulation of the DOM (due to less DOM backflow and redrawing…) , contemporary projects are based on MVVM, MVC data-driven view rendering, the DOM operation framework itself is completed, the performance is much better

Low coupling and high cohesion (encapsulation based approach: method encapsulation, plug-in, component, framework, class library, etc., to reduce redundant code in the page and improve code utilization)

Use event delegates whenever possible

Avoid dead or nested loops (nested loops multiply the number of loops)

As far as possible, asynchronous programming was used in the project to simulate the effect of multithreading and avoid main thread blocking (asynchronous operation was managed based on the Promise design pattern).

Do not use with in JS

Avoid USING CSS expressions

Function of anti – shake and throttling

Reduced use of EVAL (the main reason is to prevent comp code from getting messy because of improper notation writing)

Image map: For images that are used multiple times (especially for backgrounds), try to extract them as common styles instead of resetting the background each time

Reduce the use of filter filters

Minimize the level of selectors

Minimize table layout

Manually reclaim stack memory (assigned to NULL)

Stack overflow: Dead recursion

function func(){
    func();
}
func();
Copy the code

Solution:

function func(){
    setTimeout(func,0);
}
func();
Copy the code

Cross-reference: Invocation of reference types to each other, forming nested memory

let obj1={
    name:'obj1',
};
let obj2={
    name:'obj2',
    x:obj1
}
obj1.x=obj2;
Copy the code

Click to follow, the first time to learn about Huawei cloud fresh technology ~