Analysis of front-end optimization
Survive by day and develop by night.
talk for import biz , show your perfect code,full busy，skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.
Table of contents
overview
Analysis of front-end optimization:
reduce the number of requests, reduce resource size, optimize network connection, optimize resource loading, reduce redraw reflow, use better API and build optimization
need:
Reduce the number of requests:
use the technique of request merging:
Design ideas
1. Request merging
2. Image processing base64 encoding
3. [Reduce redirection]
4. [Use cache]
Reduce resource size:
1. HTML compression
2. CSS compression
4. Image compression
5. Enable gzip
Optimize network connection:
【Use CDN】
Use DNS pre-resolution
On the application layer:
By optimizing the resource loading location and changing the resource loading timing, the content of the page can be displayed as quickly as possible, and the functions can be made available as soon as possible.
CSS files are placed in the head, first external links, and then this
page Put it at the bottom of the body, first the external link, then this page
[resource loading timing]
1. Asynchronous script tag
defer: Asynchronous loading, executed after HTML parsing is complete. The actual effect of defer is similar to putting the code at the bottom of the body
async: Asynchronous loading, executed immediately after loading is complete
2. Modules are loaded on demand
In systems with complex business logic such as SPA, it is necessary to load the business modules required by the current page according to the routing
On-demand loading is a great way to optimize web pages or apps. This method actually separates the code at some logical breakpoints first, and then immediately refers or is about to refer to some other new code blocks after completing certain operations in some code blocks. This speeds up the app's initial load and reduces its overall size, since some code blocks may never be loaded
Realize thinking analysis
rendering layer
The elements that need to be redrawn multiple times are independently rendered as the render layer. If you set absolute, you can reduce the redrawing range.
DOM optimization
1, cache DOM
2, reduce DOM depth and number of DOM
3. Batch operation DOM
API with better performance
id selector (#myid)
class selector (.myclassname)
tag selector (div, h1, p)
adjacent selector (h1+p)
child selector (ul > li)
descendant selector (li a)
wildcard selector selector (*)
attribute selector (a[rel="external"])
pseudo-class selector (a:hover, li:nth-child)
2. Use requestAnimationFrame instead of setTimeout and setInterval
Webpack optimization
[Packaging public code]
[Dynamic import and on-demand loading]
References and Recommended Reading
- https://www.cnblogs.com/SuremoWang/p/15735993.html
Welcome to read, old irons, if it is helpful to you, please like and follow! ~