Web Front-end
JS Tutorial
Introduction to time-sharing functions for javascript performance optimization
Introduction to time-sharing functions for javascript performance optimization
This article mainly introduces the introduction of time-sharing functions for javascript performance optimization. Now I share it with you and give it as a reference.
The problems of time-sharing functions and function throttling are different. The events targeted by function throttling are not actively called by users, as has been mentioned before.
The principle of function throttling is to delay the execution of the current function. If the delay has not been completed, then the next request for the function is ignored. This means that many function requests will be ignored.
In some development scenarios, we may inject thousands of nodes into the document at one time. Adding a large number of DOM nodes to the browser in a short period of time may be too much for the browser, and the result will often be that the browser freezes. One of the solutions is to use the time-sharing function (timeChunk).
timeChunk time-sharing function allows the creation of nodes to be done in batches. For example, if 1,000 nodes are created in one second, 10 nodes will be created every 200ms. The specific timeChunk function is encapsulated as follows:
function timeChunk( arr, fn, count){//arr 数组 fn操作函数 count每次操作数量
var obj,
t;
var start = function(){
var len = Math.min(count||1,arr.length);
for(var i=0; i < len; i++){
obj = arr.shift();
fn(obj)
}
};
return function(interval){
t = setInterval(function(){
if(arr.length==0){
return clearInterval(t)
};
start();
},interval||200)
}
}Application:
If we want to add 1000 nodes to the document, we can use the timeChunk time-sharing function to continuously add 20 nodes every 200ms. node.
var arr = [];
for(var i = 1; i <= 1000; i++){
arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
var p = document.createElement('p');
p.innerHTML = i;
document.body.appendChild(p);
},20);
renderLists(200);The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Solution to automatically add pre tags to ajax return value
Methods for ajax to use actions with different namespaces
Use ajax to preview the link and you can see the content of the link
The above is the detailed content of Introduction to time-sharing functions for javascript performance optimization. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Tips for dynamically creating new functions in golang functions
Apr 25, 2024 pm 02:39 PM
Go language provides two dynamic function creation technologies: closure and reflection. closures allow access to variables within the closure scope, and reflection can create new functions using the FuncOf function. These technologies are useful in customizing HTTP routers, implementing highly customizable systems, and building pluggable components.
Complete collection of excel function formulas
May 07, 2024 pm 12:04 PM
1. The SUM function is used to sum the numbers in a column or a group of cells, for example: =SUM(A1:J10). 2. The AVERAGE function is used to calculate the average of the numbers in a column or a group of cells, for example: =AVERAGE(A1:A10). 3. COUNT function, used to count the number of numbers or text in a column or a group of cells, for example: =COUNT(A1:A10) 4. IF function, used to make logical judgments based on specified conditions and return the corresponding result.
Things to note when Golang functions receive map parameters
Jun 04, 2024 am 10:31 AM
When passing a map to a function in Go, a copy will be created by default, and modifications to the copy will not affect the original map. If you need to modify the original map, you can pass it through a pointer. Empty maps need to be handled with care, because they are technically nil pointers, and passing an empty map to a function that expects a non-empty map will cause an error.
Considerations for parameter order in C++ function naming
Apr 24, 2024 pm 04:21 PM
In C++ function naming, it is crucial to consider parameter order to improve readability, reduce errors, and facilitate refactoring. Common parameter order conventions include: action-object, object-action, semantic meaning, and standard library compliance. The optimal order depends on the purpose of the function, parameter types, potential confusion, and language conventions.
C++ Function Exception Advanced: Customized Error Handling
May 01, 2024 pm 06:39 PM
Exception handling in C++ can be enhanced through custom exception classes that provide specific error messages, contextual information, and perform custom actions based on the error type. Define an exception class inherited from std::exception to provide specific error information. Use the throw keyword to throw a custom exception. Use dynamic_cast in a try-catch block to convert the caught exception to a custom exception type. In the actual case, the open_file function throws a FileNotFoundException exception. Catching and handling the exception can provide a more specific error message.
How to write efficient and maintainable functions in Java?
Apr 24, 2024 am 11:33 AM
The key to writing efficient and maintainable Java functions is: keep it simple. Use meaningful naming. Handle special situations. Use appropriate visibility.
Using function return values in C++: types and meanings explained
May 01, 2024 am 08:27 AM
Function return value is crucial in C++, which allows the function to return data of a specified type: the return value type defines the type of data returned by the function, including basic types (such as int, float) and custom types (such as pointers, references). The return value meaning varies based on the function's intent, such as returning a result, indicating status, providing a reference, or creating a new object.
Advanced technology for custom implementation of golang functions
Apr 28, 2024 am 08:54 AM
Advanced Go function techniques include: Closure: used to access externally defined variables, which can encapsulate state and create private variables. Anonymous function: An unnamed function used for one-time operations, suitable for callbacks, event handling, and filtering. Function type: Define function signature, which can store and transfer function values for scenarios such as comparison and sorting.
