JS에서 시간 공유 기능을 최적화하는 방법

이번에는 JS에서 시분할 기능을 최적화하는 방법을 보여드리겠습니다. JS에서 시분할 기능을 최적화할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

함수 조절의 원리는 현재 함수의 실행을 지연시키는 것입니다. 지연이 완료되지 않으면 해당 함수에 대한 다음 요청이 무시됩니다. 이는 많은 기능 요청이 무시된다는 것을 의미합니다.

일부 개발 시나리오에서는 한 번에 수천 개의 노드를 문서에 삽입할 수 있습니다. 단기간에 많은 수의 DOM 노드를 브라우저에 추가하면 브라우저에 부담을 줄 수 있으며 결과가 종종 지연되거나 느려질 수 있습니다. 브라우저의 결함을 견딜 수 없다면 해결책 중 하나는 시간 공유 기능(timeChunk)을 사용하는 것입니다.

timeChunk 시간 공유 기능을 사용하면 노드 생성을 일괄적으로 수행할 수 있습니다. 예를 들어 1초에 1000개의 노드가 생성되면 200ms마다 10개의 노드가 생성됩니다. 특정 timeChunk 함수는 다음과 같이 캡슐화됩니다:

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)
  }
}

애플리케이션:

문서에 1000개의 노드를 추가하려면 timeChunk 시간 공유 기능을 사용하여 200ms마다 20개의 노드를 지속적으로 추가할 수 있습니다.

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);

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue가 환경 전달 매개변수에 따라 다양한 도메인 이름을 패키징하는 방법에 대한 자세한 설명

Vue가 html 문자열을 HTML

으로 변환하는 단계에 대한 자세한 설명

위 내용은 JS에서 시간 공유 기능을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!