ES6+ blocking 과 non-blicking (time slice)

ES6+ blocking 과 non-blicking

자바스크립트 스레드에는

MAIN UI Thread

BACKGROUND Thread

WEB WORKER Thread 

구성되어 있습니다.

 
const looper = (n,f) => {
    for(let i=0; i<n; i++) f(i);
}
 
looper(5, console.log);
looper(100000, console.log);

위 예제는 n 만큼 루프가 작동하는데 100000 만번이 작동하는동안 블럭되어있습니다.

그럼 이걸 어떻게 해결하느냐

Time slicing 이용하시면 됩니다.

1. Time slicing Manual

const looper = (n,f,slice=3) => {
    
    let limit=0, i=0;
    const runner = _ => {
        while(i<n) {
            if(limit++ < slice) f(i++);
            else {
                limit =0;
        console.log("i:"+i);
                requestAnimationFrame(runner);
                break;
            }
        }
    };
    console.log("start"+i);
    requestAnimationFrame(runner);
        
};
 
looper(9, console.log);
console.log('ABC');
 
ABC
undefined
0
1
2
i:3
3
4
5
i:6
6
7
8

requestAnimationFrame 로 인해서 즉시 흐름제어로 제어권을 바로 받을수 있습니다.

[arrow 함수]

runner = function (n,f) {

}

runner = (n,f) => {

}

runner = _ => {

}

_ 인자하나인 변수 / 인자이름이 _ / 인자가 오긴 하는데 내부적으로 사용안할거임

https://www.youtube.com/watch?v=BeFekctVoq0

2. Time slicing Auto

const looper = (n,f,ms=1000, i=0) => {
    let old = performance.now(), curr;
    const runner = _ => {
        while( i < n ) {
            curr = performance.now();
            
            if( curr-old < ms ) f(i++);
            else {
                old = curr;
                console.log('i: '+i);
                requestAnimationFrame(runner);
                break;
            }
        }
    };
    requestAnimationFrame(runner);
        
};
 
looper(5, console.log);
console.log('ABC');

performance.now() 브라우져가 구동된후의 시간