Introduction aux fonctions de partage de temps pour l'optimisation des performances javascript

Cet article présente principalement l'introduction des fonctions de partage de temps pour l'optimisation des performances javascript. Maintenant, je le partage avec vous et le donne comme référence.

Les problèmes des fonctions de partage de temps et de limitation des fonctions sont différents. Les événements ciblés par la limitation des fonctions ne sont pas activement appelés par les utilisateurs, comme cela a été mentionné précédemment.

Le principe de la limitation des fonctions est de retarder l'exécution de la fonction en cours. Si le délai n'est pas terminé, alors la prochaine requête pour la fonction est ignorée. Cela signifie que de nombreuses requêtes de fonctions seront ignorées.

Dans certains scénarios de développement, nous pouvons injecter des milliers de nœuds dans le document à la fois. Ajouter un grand nombre de nœuds DOM au navigateur sur une courte période peut être trop pour le navigateur, et le le résultat sera souvent que le navigateur se bloque. Une des solutions consiste à utiliser la fonction de partage de temps (timeChunk).

La fonction de partage de temps timeChunk permet de créer des nœuds par lots. Par exemple, si 1000 nœuds sont créés en une seconde, 10 nœuds seront créés toutes les 200 ms. La fonction timeChunk spécifique est encapsulée comme suit :

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 :

Rejoindre Nous voulons ajouter 1000 nœuds au document. Nous pouvons utiliser le timeChunk. fonction de partage pour ajouter en continu 20 nœuds toutes les 200 ms.

var arr = [];
for(var i = 1; i <= 1000; i++){
  arr.push(i)
}
var renderLists = timeChunk(arr,function(i){
  var p = document.createElement(&#39;p&#39;);
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Une solution pour ajouter automatiquement des balises pré à la valeur de retour ajax

Méthode Ajax pour utiliser des actions avec différents espaces de noms

Utilisez ajax pour prévisualiser le lien et vous pourrez voir le contenu du lien

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!