In fact, your grouping does not really share the pressure. You need to add a timer and use a time-sharing function

An example is creating a QQ friend list for WebQQ. There are usually hundreds or thousands of friends in the list. If a friend is represented by a node, when we render the list on the page, we may have to create hundreds or thousands of nodes in the page at one time.
Adding a large number of DOM nodes to the page in a short period of time will obviously overwhelm the browser. The result we see is often
stuttering or even suspended animation of the browser. The code is as follows:

var ary = []; for ( var i = 1; i <= 1000; i++ ){ ary.push( i ); // 假设 ary 装载了 1000 个好友的数据 }; var renderFriendList = function( data ){ for ( var i = 0, l = data.length; i < l; i++ ){ var p = document.createElement( 'p' ); p.innerHTML = i; document.body.appendChild( p ); } }; renderFriendList( ary );

One of the solutions to this problem is the following timeChunk function. The timeChunk function allows the work of creating nodes to be performed in batches. For example, instead of creating 1000 nodes in 1 second, create 8 nodes every 200 milliseconds.

// data 数据 func 插入操作 interval 时间周期 该周期插入的项目数 var timeChunk = function(data, func, interval, count){ var obj, timer; var start = function(){ for(var i = 0; i < Math.min(count || 1, data.length); i++){ obj = data.shift(); func(obj); } }; return function(){ timer = setInterval(function(){ if(data.length === 0){ return clearInterval(timer); } start(); }, interval); }; } var data= []; for ( var i = 1; i <= 1000; i++ ){ data.push( i ); }; renderFriendList = timeChunk(data, function(n){ var p = document.createElement( 'p' ); p.innerHTML = n; document.body.appendChild( p ); }, 200, 10); renderFriendList();

The above is excerpted from the book Design Patterns

The reason why your solution is slow is as follows,
$('.list').append(html);
Every time this code loops, it needs to reposition the dom element, that is, $('.list')jquery You need to obtain the .list document, which is equivalent to looping N and positioning it N times. This is of course inefficient, so your second option only positions it once and appends all the elements to it, which is obviously more efficient. As for you Array sharding cannot be reflected in js at all. How many times should it be looped, but it does not improve efficiency. It also adds an extra step of sharding. js itself is single-threaded, and the efficiency is still the same no matter how many times it is divided.

Getting thousands of pieces of data at one time shows that there is something wrong with your API design.

Personally, I feel that the first method consumes more memory and time (when the volume is small). First, the above statements add up and run more times. Second, appending multiple times is definitely not as good as appending in one go

Thousands of pieces of data obtained at one time will not all be appended at once.

The reasonable approach is to load according to the importance and secondaryness of the display. Load what you can see first, and then insert the rest into the page in batches when the process is idle.