Reduce the number of requests
merge
If the file merge is not carried out, there are three hidden dangers below
1. There is an uplink request for insertion between files, adding N-1 network delay
2. The packet loss problem is more severely affected
3. It may be disconnected when passing through the proxy server.
However, the file merge itself has its own problems
1. Home rendering problem
2. Cache failure problem
Therefore, for file merging, there are the following improvement suggestions
1. Public library merger
2. Different pages are merged separately
Image processing
1. Sprite Picture
CSS Sprite Pictures is a very popular technology in the past. Integrating some images on the website into a separate picture can reduce the number of HTTP requests on the website, but when the integrated picture is larger, it will be slow to load at one time. With the popularity of font pictures and SVG pictures, this technology gradually withdrew from the historical stage.
2、Base64
Embed the content of the image into HTML in Base64 format, which can reduce the number of HTTP requests. However, since Base64 encoding uses 8-bit characters to represent 6 bits in the information, the encoded size is approximately 33% larger than the original value.
3. Use font icons instead of pictures
Reduce redirects
Try to avoid using redirection. When a page redirects, it will delay the transfer of the entire HTML document. Before the HTML document arrives, nothing will be presented in the page, and no components will be downloaded, reducing the user experience
If you must use redirects, such as http redirecting to https, use 301 permanent redirect instead of 302 temporary redirect. Because, if you use 302, every time you visit http, you will be redirected to the page of https. For permanent redirection, after the first redirect from http to https, every time you visit http, you will directly return to the page of https.
Use cache
When using strong caches such as cache-control or expires, the request will not be sent to the server if the cache expires. When the strong cache expires, a negotiation cache such as last-modified or etag will be used to send a request to the server. If the resource does not change, the server returns a 304 response, and the browser continues to load the resource from the local cache; if the resource is updated, the server sends the updated resource to the browser and returns 200 responses.
Not using CSS @import
CSS @import causes additional requests
Avoid using empty src and href
Setting an empty href on the a tag will redirect to the current page address
Form sets an empty method and submits the form to the current page address
Reduce resource size
compression
1. HTML compression
HTML code compression means that characters that are meaningful in text files, but are not displayed in HTML, including spaces, tabs, line breaks, etc.
2. CSS compression
CSS compression includes invalid code removal and CSS semantic merging
3. JS compression and chaos
JS compression and confusion include deletion of invalid characters and comments, reduction and optimization of code semantics, reducing code readability, and realizing code protection.
4. Picture compression
For real picture situations, discard some relatively insignificant color information
webp
On Android, you can use webp format pictures. It has better image data compression algorithms, which can bring smaller picture volume. Under the same picture quality, the volume is more than 25% less than jpg and png. It also has lossless and lossy compression mode, Alpha transparency and animation characteristics.
Turn on gzip
GZIP encoding on the HTTP protocol is a technology used to improve the performance of WEB applications. WEB sites with high traffic often use GZIP compression technology to make users feel faster. This generally refers to a function installed in the WWW server. When someone visits the website in this server, this function in the server compresses the web page content and transmits it to the visiting computer browser to display it. Generally, plain text content can be compressed to 40% of the original size
Optimize network connections
Using CDN
The full name of CDN is Content Delivery Network, which is a content distribution network. It can redirect user's request to the service node closest to the user based on network traffic, connections, load conditions, distances to users and response times in real time, etc. The purpose is to enable users to obtain the required content nearby, solve the congestion of Internet networks, and improve the response speed of users to access the website.
Pre-resolving with DNS
When a browser accesses a domain name, it needs to parse the DNS once to obtain the IP address of the corresponding domain name. During the analysis process, the cache is gradually read in the order of browser cache, system cache, router cache, ISP (operator) DNS cache, root domain name server, top-level domain name server, and main domain name server, until the IP address is obtained.
DNS Prefetch, that is, DNS pre-resolution is the domain name that may be used after parsing in advance according to the rules defined by the browser, so that the resolution results can be cached into the system cache, shorten the DNS resolution time, and improve the access speed of the website.
The method is to write a few link tags in the head tag
<link rel="dns-prefecth" href="https://"> <link rel="dns-prefecth" href="https://" rel="external nofollow" >
The above websites are parsed in advance. Since it is parallel, it will not block page rendering, which can shorten the time for resource loading.
Parallel connection
Because under the HTTP1.1 protocol, the maximum number of concurrencies per domain name of chrome is 6. Using multiple domain names can increase the number of concurrency
Persistent connection
Use keep-alive or suppressent to establish persistent connections. Persistent connections reduce latency and connection establishment overhead, keep connections in tuned state, and reduce the potential number of open connections
Pipeline connection
In the HTTP2 protocol, pipelined connections can be enabled, that is, multiplexing of a single connection, and multiple resources are transmitted concurrently in each connection. There is no need to add a domain name to increase the concurrency number here.
Optimize resource loading
Resource loading location
By optimizing resource loading locations, changing resource loading timings, displaying page content as quickly as possible, and making features available as quickly as possible
1. Place the CSS file in the head, first the external link, then this page
2. Place the JS file at the bottom of the body, first the external link, then this page
3. JS files that process pages and page layout are placed in the head, such as files and files
4. Try not to write style tags or script tags in the body
Resource loading timing
1. Asynchronous script tags
defer: Asynchronous loading, executed after HTML parsing is completed. The actual effect of defer is similar to placing the code at the bottom of the body
async: asynchronous loading, execute immediately after loading
2. Module loading as needed
In systems with relatively complex business logic such as SPA, the business modules required for the current page need to be loaded according to the route.
Loading on demand is a good way to optimize web pages or applications. This method is to first separate the code at some logical breakpoints, and then immediately refer to or will refer to some new code blocks after completing certain operations in some code blocks. This speeds up the initial loading of the application and reduces its overall volume, as some code blocks may never be loaded
webpack provides two similar techniques, the preferred way is to use the import() syntax that complies with the ECMAScript proposal. The second is to use webpack specific
3. Use resource preload and resource pre-read prefetch
preload allows the browser to load the specified resources in advance, and then execute them when they need to be executed, which can speed up the loading speed of this page
Prefetch tells the browser that resources that may be used to load the next page, which can speed up the loading speed of the next page
4. Lazy resource loading and resource preloading
Resource lazy loading is also called lazy loading. Some resources are loaded only when they are lazy loading or meet certain criteria.
Resource preloading is to load the resources required by users in advance to ensure a good user experience
Lazy resource loading and resource preloading are both staggered operations. When the browser is busy, the resource is loaded again and optimizes network performance.
Reduce redraw reflow
Style settings
1. Avoid using deeper hierarchical selectors or some other complex selectors to improve CSS rendering efficiency
2. Avoid using CSS expressions. CSS expressions are a powerful but dangerous method to dynamically set CSS properties. The problem is that the calculation frequency is very fast. Not only when the page is displayed and zoomed, but when the page is scrolled or even moved the mouse, it will be recalculated.
3. The element is appropriately defined in height or minimum height. Otherwise, when the dynamic content of the element is loaded, the page element will shake or position, causing reflow.
4. Set sizes for the picture. If the image does not set the size, the space occupied will appear from 0 to complete when loading for the first time, and may be displaced from up, down, left and right, and reflow will occur.
5. Do not use table layout, because a small change may cause the entire table to be re-layout. And table rendering usually takes 3 times the same element time
6. The effect of using CSS is achieved, try to use CSS instead of JS.
Rendering layer
1. In addition, elements that need to be redrawn multiple times are independently rendered as the render layer render layer. If you set absolute, you can reduce the redraw range.
2. For some elements that are animated, use hardware rendering to avoid redrawing and reflow
DOM optimization
1. Cache DOM
const div = ('div')
Since querying DOM is time-consuming, DOM can be cached without multiple queries on the same node
2. Reduce the DOM depth and DOM quantity
The more tag elements in HTML, the deeper the tag levels, and the longer it takes for the browser to parse the DOM and draw it into the browser, so the DOM elements should be kept as concise and less hierarchical as possible.
3. Batch operation of DOM
Since DOM operations are time-consuming and may cause reflow, to avoid frequent operation of DOM, you can operate DOM in batches, first use string splicing, and then use innerHTML to update DOM
4. Batch operation CSS style
By switching class or using element properties to batch operate element styles
5. Operate DOM in memory
Use DocumentFragment object to make DOM operations happen in memory, not on page
6. DOM elements are updated offline
When performing related operations on the DOM, examples, appendChild, etc. can use Document Fragment objects to perform offline operations, insert the page again after the element is "assembled", or use display:none to hide the element and perform related operations after the element "disappears".
7. DOM read and write separation
The browser has a lazy rendering mechanism, and connecting multiple modifications to the DOM may only trigger one rendering of the browser. If the DOM is modified, the DOM is read immediately. In order to ensure that the correct DOM value is read, a rendering of the browser will be triggered. Therefore, the operation of modifying the DOM must be performed separately from the access to the DOM
8. Event Agent
Event proxy refers to registering the event listener on the parent element. Since events of the child element will be propagated up to the parent node through event bubbles, the parent node's listening function can uniformly handle events of multiple child elements.
Using event proxy can reduce memory usage, improve performance and reduce code complexity
9. Anti-shake and throttling
Use function throttle or function debounce to limit the frequent triggering of a certain method
10. Clean up the environment in a timely manner
Timely eliminate object references, clear timers, clear event listeners, create minimum scope variables, and recycle memory in time
Better performance API
1. Use the right selector
The performance sorting of selectors is as follows. Try to choose a selector with better performance.
id selector (#myid)
Class selector (.myclassname)
Tag selector (div, h1, p)
Adjacent selector (h1+p)
Sub-selector (ul > li)
Descendant selector (li a)
Wildcard selector (*)
Attribute selector (a[rel="external"])
Pseudo-class selector (a:hover,li:nth-child)
2. Use requestAnimationFrame to replace setTimeout and setInterval
I hope to make changes to the page at the beginning of each frame. Currently, only using requestAnimationFrame can ensure this. Use setTimeout or setInterval to trigger a function to update the page. This function may be called at the middle or end time point of a frame, which in turn causes the things that need to be done after the frame to be not completed, causing the frame to be dropped
3. Use IntersectionObserver to realize lazy loading of image visual area
In traditional practice, scroll event is needed and getBoundingClientRect method is called to determine the visual area. Even if function throttling is used, page reflow will be caused. Using IntersectionObserver, there is no problem above
4. Use web worker
A basic feature of client javascript is single threading: for example, the browser cannot run two event handlers at the same time, and it cannot trigger a timer when an event handler is running. Web Worker is a javascript multithreading solution provided by HTML5. It can hand over some large-scale computing code to the web Worker to avoid blocking the user interface. This API is very useful when performing complex calculations and data processing.
However, while using some new APIs, you should also pay attention to their browser compatibility.
webpack optimization
Package public code
Use the CommonsChunkPlugin plugin to detach the public module, and the final synthesized file can be loaded once at the beginning and saved in the cache for subsequent use. This will lead to a speed improvement, as the browser will quickly pull public code out of the cache, rather than loading a larger file every time a new page is accessed
webpack 4 will remove CommonsChunkPlugin, and replace it with two new configuration items and
Start the default code segmentation configuration item by setting: "all"
Dynamic import and on-demand loading
webpack provides two techniques to separate code through inline function calls of modules, the preferred way is to use the import() syntax that conforms to the ECMAScript proposal. The second type is to use webpack specific
Remove useless code
tree shaking is a term commonly used to describe removing unreferenced code (dead-code) from a JavaScript context. It relies on static structural characteristics in ES2015 module systems, such as import and export. This term and concept actually emerged from ES2015 module packaging tool rollup
JS's tree shaking is mainly done through the uglifyjs plugin, CSS's tree shaking is mainly achieved through purify CSS
Long cache optimization
1. Replace hash with chunkhash, so that when the chunk remains unchanged, the cache is still valid.
2. Use Name instead of id
Each will be incremented based on the default resolution order. That is to say, when the parsing order changes, the ID will also change
Let’s use two plugins to solve this problem. The first plugin is NamedModulesPlugin, which will use the path to the module, not the numeric identifier. Although this plugin helps readability of output results during development, the execution time will be longer. The second option is to use HashedModuleIdsPlugin, recommended for production environment construction
Public code inline
Use the html-webpack-inline-chunk-plugin plugin to inline into the html file
For more articles on performance optimization of WEB front-end, please click the relevant link below