JavaScript - 브라우저 즉시 리플 로우 및 다시 칠

Question

다른 코드가 실행중인 경우에도 브라우저가 즉각적인 리플 로우를 강제로 수행 할 수 있습니까? & JavaScript에서 다시 칠할 수 있습니까?

무언가가 서버에서로드되거나 캐시에서 DOM 업데이트를로드 할 때 비동기 이벤트를 기반으로하는 모든 진행률 표시 줄이 렌더링되지만 때로는 진행률 표시 줄이 여전히 10 %로 정지하는 경우도 있습니다. DOM 문서.

display/visibility none/hidden, getComputedStyle, requestAnimationFrame으로 모든 트릭을 시도했지만 브라우저가 실제 다시 칠할 필요가 없습니다. 아마도 대기열을 비우고 모든 변경 사항을 적용하지만 실제 화면을 다시 그리지는 않습니다.

Answer 1

JavaScript는 단일 스레드 실행 환경에서 실행됩니다. 따라서 실행중인 컨텍스트를 중지하고 다른 작업을 수행 할 수는 없습니다.

예를 들어이 코드 스 니펫을 취하십시오. 경고가 나타나기 전에 단락의 텍스트가 업데이트됩니까?

Answer 2

function foo(){ 
 
    
 
    // Note that this timer function is set to run after a zero millisecond delay 
 
    // which effectively means immediately. But, it won't do that because it must 
 
    // first finish executing the current function. So, the timer function will be 
 
    // placed in the event queue and will run as soon as the JS engine is idle. But, 
 
    // we can't know exactly when that will be, we can only ask to run the code after 
 
    // a "minimum" delay time. 
 
    setTimeout(function(){ 
 
    document.querySelector("p").textContent = "I've been updated by JS!"; 
 
    }, 0); 
 
    
 
    // The alert will run before the setTimeout function because the alert is part of the 
 
    // current execution context. No other execution context can run simultaneously with this one. 
 
    alert("While you are looking at me, check to see if the paragraph's text has changed yet."); 
 
} 
 

 
document.querySelector("button").addEventListener("click", function(){ 
 
    foo(); 
 
});

<button>Click Me</button> 
 
<p>Some content that can be updated by JS</p>

그래서 결국,의 setTimeout (resolvePromise (...)는, 0) 도움을 주었다. 브라우저에서 다시 칠할 시간을 줄입니다.