1. What are anti-shake and throttling?
Anti-shake and throttling are two commonly used performance optimization techniques in front-end development, which are used to control the trigger frequency of events to improve performance and user experience.
Debouncing refers to waiting for a period of time after an event is triggered, and if the same event is triggered again within this period, the timer will be restarted. This ensures that the action is only performed if the event has not been triggered again for a certain period of time after it was fired. Anti-shake is often used to handle frequently triggered events, such as window resizing, input box input, etc., to reduce unnecessary operations and network requests.
Throttling refers to limiting the triggering frequency of events, and executing the event processing function only once within a certain time interval. When an event is triggered, the event processing function is first executed once, and then subsequent event triggers are ignored within the specified time interval until it is triggered again after the time interval elapses. Throttling is often used to handle high-frequency triggered events, such as scrolling to the bottom event, mouse movement event, etc., to reduce the number of function executions and improve performance.
Anti-shake and throttling can be implemented using JavaScript functions, or using functions provided by related libraries or frameworks to easily apply to projects. Commonly used libraries include Lodash, Underscore , etc., which provide a wealth of utility functions, including anti-shake and throttling functions.
Then other commonly used techniques are:
- Compress and combine resources: Use tools to compress and combine static resources such as CSS, JavaScript and images to reduce the number of network requests and file size.
- Use cache: Use browser cache and server cache to reduce repeated loading of resources and improve page loading speed.
- Lazy loading: Delay loading of non-critical content, such as pictures, videos, etc., and then load when the user needs it, reducing the initial loading time of the page.
- Reduce HTTP requests: Combine CSS and JavaScript files, use CSS Sprites or Icon Fonts to reduce image requests, and reduce the number of HTTP requests for the page.
- Image optimization: Use appropriate image formats and compression techniques, such as using WebP format, using image compression tools, etc., to reduce the size of image files.
- Front-end cache: Use localStorage or sessionStorage to cache frequently used data locally to reduce requests to the server.
- Use asynchronous loading: place the JavaScript script at the bottom of the page, and use the async or defer attribute to load the script asynchronously to avoid blocking the rendering of the page.
- Code optimization: reduce DOM operations, avoid excessive redrawing and reflow, and use techniques such as throttling and anti-shaking to optimize event handling.
- Code splitting and on-demand loading: Split code into multiple modules and load on-demand to reduce initial loading time.
- Use CDN: Host static resources on CDN, so that users can obtain resources from the nearest server to speed up resource loading.
- Responsive design: Use responsive layout and media query to provide appropriate layout and style according to the screen size and resolution of different devices, and improve page adaptability and performance.
These are common front-end performance optimization techniques. According to specific projects and needs, different techniques can be used in combination to improve the loading speed and performance of web pages.
Regarding anti-shake and throttling, here are two more detailed articles that are relatively complete, learn and record:
What is anti-shake and throttling?
2. Lodash
Official Website: Lodash
Chinese website: Lodash Introduction | Lodash Chinese Documentation | Lodash Chinese Website
Here is the installation and introduction of this library. This library is quite useful. Commonly used deep copy, anti-shake, throttling, etc. in the project can be learned and used when needed, which is convenient for development.
Three, Underscore
Address: Underscore GitHub
Underscore.js is a JavaScript utility library that provides many functions and methods for simplifying and enhancing JavaScript programming. It provides a set of functions for manipulating arrays, collections, objects, functions, etc., as well as some commonly used utility functions.
Features of Underscore.js include but are not limited to:
- Collection operations: including operations such as traversal, filtering, mapping, searching, and sorting.
- Array operations: Provides a series of methods for manipulating arrays, such as filtering, searching, sorting, etc.
- Object operations: including operations such as object cloning, merging, and expansion.
- Function operation: Provides some methods for processing functions, such as binding context, delaying execution, etc.
- Utility function: Provides some commonly used utility functions, such as type judgment, throttling function, deep copy, etc.
Underscore.js is a lightweight library that can be easily integrated into your project. It provides a concise and powerful function set, which can improve development efficiency and code readability.
Four, the difference between the two
as follows:
-
Size and performance: Lodash is widely used, smaller and faster, optimized for performance, and has more features and extensions.
-
Compatibility: Underscore.js supports a wider range of browsers and environments, including some older versions of browsers (because they are older). Lodash can better support ES6+ functions.
In summary,
If you focus on performance and modern features, and the project environment supports it, Lodash is recommended.
Underscore.js is also a good choice if wider compatibility is required and the size and performance of the library are not critical. (someone else said)
Summarize
The above is the record about anti-shake and throttling! Finally learned in depth.