Performance optimization of front-end projects is a comprehensive problem and needs to be started from multiple aspects. The following are several major categories of optimization solutions: mobile, pictures, JavaScript, css, html, page content, server, and cookies.
Mobile performance optimization:
1. Keep a single file less than 25KB
Mobile website pages require downloading resources. If the file is too large, it will greatly slow down the page loading speed.2. Package content as a segmented multipart document
Since HTTP requests perform three handshakes each time, each handshake consumes more time. Using multipart, multiple files are uploaded simultaneously, and multiple components can be obtained by one HTTP request.
Image optimization:
1、CSS sprites
Commonly known as CSS elves, Sprite pictures, snowflake pictures, etc. It is time to merge multiple small images into one image to achieve a solution to reduce HTTP requests. Image content can be accessed through the background property in CSS. This solution can also reduce the total number of bytes in the picture and save naming vocabulary.
2. Compress pictures
Images occupy a huge resource, so try to avoid using redundant images, choose the most appropriate format size when using them, and then use smart map compression, and use Srcset in the code to display on demand. (Remember not to overcompress, as the picture may be confused)
3. Try to avoid resetting the image size
Resetting the image size refers to resetting the image size multiple times in pages, CSS, JavaScript, etc. Resetting the image size multiple times will cause multiple repaints of the image, affecting performance.
4. Try to avoid using DataURL in pictures
The compression algorithm file of DataURL image without using the image will become larger and will be decoded and then rendered, which will be slow and time-consuming to load.
5. Lazy image loading
Images have a great impact on page loading speed. For example, when a page has a lot of content, the loading speed will be greatly reduced, which will greatly affect the user experience. What's more, one page may have hundreds of pictures, but only the first few pictures are displayed on the page. Can other pictures be loaded late to improve performance? See details >>
JavaScript related optimization
1. Put the script at the bottom of the page
Putting it in front of js will cause blockage, affecting the loading of the subsequent dom
2. Use external JavaScript and CSS
Using external files in real-world environments usually produces faster pages because JavaScript and CSS have the opportunity to be cached by the browser. For inline cases, since HTML documents are not usually configured to be cached, JavaScript and CSS are required for every request to HTML documents. So, if JavaScript and CSS are in external files, the browser can cache them, the size of the HTML document will be reduced without increasing the number of HTTP requests.
3. Compress JavaScript and CSS
Compressing files is to reduce the number of network transmissions and reduce the response time of page requests.
4. Reduce DOM operations
Operating the dom will produce several actions, which will greatly affect the rendering efficiency. Among them, layout and paint are the largest.
5. JS overhead shortens parsing time
Overhead: Loading-》Analysis and Compilation-》Execution
It takes a long time to parse and compile js (you can view it in performance in Google development tools. Select a certain section in the main main thread.)
Solution:
Code split loading on demand
tree shaking code to lose weight
Avoid long tasks
requestAnimationFrame and replyIdleCallback for time scheduling
6. V8 compilation principle (code optimization)
Analyze js code into abstract syntax tree-》byte code-》 machine code
The compilation process will be optimized
Anti-optimization may occur at runtime
7. V8 internal optimization
Script flow: download and parse
Bytecode cache: Commonly used bytecodes will be stored (this file uses parameters that are also used by other files)
Lazy function analysis: parse it first
8. Object optimization (optimized in accordance with v8)
Ensure that the object initialization order is consistent (when object initialization is initialized, v8 will generate hidden attributes for subsequent reuse and are sorted in order)
Do not directly assign new attributes to the object (appended attributes need to be found indirectly through the description array)
Use arrays instead of class arrays (v8 will optimize arrays) For example, convert class arrays into arrays first
Avoid reading arrays to go beyond bounds (for example, looking up one more subscript for a for loop will result in a 6-fold difference in performance)
9. Make undefined and numerical comparisons
Arrays are also objects. When the corresponding subscript cannot be found, it will be searched upward along the prototype chain, resulting in additional overhead.
Invalid business
10. JS memory to avoid memory leaks
Whether the memory is released is determined by whether the variable can be accessed.
Local variables: After the function has no closure reference, it will be recycled.
Global variables: until the browser is uninstalled page is released
Recycling mechanism:
Reference count: Add one for each call, and recycle it when the count is 0. The disadvantage is that it cannot solve the problem of circular references (for example, the a object depends on the b object, mark removal (garbage collection): access from the root node, and when an object that cannot be accessed is accessed, marking and garbage collection is performed. (When the a object is
Solution: Avoid unexpected global variables; avoid repeated runs of closures; avoid disengaged dom elements not being recycled (so react has the ref API).
CSS related optimization
- 1. Put the style sheet in the label
css is placed in the head tag less than css is placed at the tail of the body tag, and the layout is calculated at one time and the web page is rendered once, so the performance will be better. - 2. Use alternative @import
- 3. Do not use filter
- 4. Avoid element type conversion (placing multiple types in the array is not conducive to v8 engine optimization code)
- Reduce the blockage of rendering by css (load as needed, load in front of the dom)
- Use PU to complete animation (compound mentioned earlier)
- Use contains for optimization (optimization intensity is high. For example: contan:layout tells the browser to use font-display for optimization using font-display: Let the text be displayed on the page earlier to alleviate the problem of text flashing problems
html related optimization
- Reduce iframes usage
- Compressed blank sign
- Avoid the nesting levels being too deep
- Avoid using table layouts
- Reduce unnecessary comments
- Delete the default attributes of elements (such as default checkbox, etc.)
Development content related optimization
- Reduce HTTP request count
- Reduce DNS redirection
- Cache AJax requests
- Delay loading
- Preload
- Reduce the number of DOM elements
- Divide content to different domain names
- Minimize use of iframes
- Avoid 404 errors
Server-related optimization
- Using CDN
- Add Expires or Cache-Control response header
- Enable Gzip
- Configure Etag
- Output buffering as early as possible
- Ajax requests use GET method
- Avoid the image src being empty
- Transmission loading optimization
Server enable gzip - Keep Alive (Permanent TCP connection)
keepalive_requests 100; KeepAlive that turns on http after 100 requests will keepalive_timeout 65; closes after 65 seconds. - http cache
It is best to use no-cache (you need to verify Etag on the server when you want to use it) - service workers
- Accelerate repeated visits
- Offline support
Cookie-related optimization
- Reduce cookie size
- Static resource use cookie-free domain name
Home screen loading optimization
- Resource compression, transmission compression, code splitting, tree shaking, http cache
- Lazy loading, pre-rendering, inlineCss, virtual lists
- Prefetch and preload adjust loading order js memory management
This is the article about what are the commonly used practical performance optimization methods for front-end? This is the end. For more related front-end performance optimization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!