집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트 성능 최적화를 위한 시분할 기능 소개

자바스크립트 성능 최적화를 위한 시분할 기능 소개

亚连원래의: 2018-05-28 15:40:191679검색

이 글은 주로 자바스크립트 성능 최적화를 위한 시간 공유 기능 소개를 소개하고 있으니 참고용으로 올려보겠습니다.

시간 공유 기능과 기능 조절의 문제는 다릅니다. 기능 조절의 대상이 되는 이벤트는 앞서 언급했듯이 사용자가 적극적으로 호출하지 않습니다.

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

일부 개발 시나리오에서는 한 번에 수천 개의 노드를 문서에 삽입할 수 있습니다. 단기간에 많은 수의 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(&#39;p&#39;);
  p.innerHTML = i;
  document.body.appendChild(p);
},20);
renderLists(200);

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

자바스크립트 성능 최적화를 위한 시분할 기능 소개

관련 기사