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 중국어 웹사이트의 기타 관련 기사를 참조하세요!