1.前提条件の概要:一部の関数はユーザーによってアクティブに呼び出されますが、いくつかの客観的な理由により、これらの関数はページのパフォーマンスに深刻な影響を及ぼします。
2.アプリケーションシナリオ:短期間に多数のDOMノードをページに追加すると、明らかにブラウザーが圧倒され、ブラウザーがフリーズしたり、アニメーションが一時停止したりすることがよくあります。
3.解決策:問題を説明するために上記のノードを追加する例を取り上げます。ノードをバッチで作成します。たとえば、200ミリ秒ごとに8ノードを作成するのではなく、1秒で1000ノードを作成します。
第四に、実装コードは次のとおりです。
var timeChunk = function(ary, fn, count){
var obj,t;
var len = ary.length;
var start = function(){
for(var i=0;i<Math.min(count ||1, ary.length );i++){
var obj = ary.shift();
fn(obj);
}
};
return function(){
t = setInterval(function(){
if(ary.length === 0){ //如果全部节点都已经被创建好
return clearInterval(t);
}
start();
}, 200); //分批执行的时间间隔,也可以用参数的形式传入
};
};
5、検証メソッドを呼び出します
var ary = ['aa','bb','cc',.....];
var renderFriendList = timeChunk( ary, function(n){
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div);
},8);
renderFriendList();