텍스트를 표시하는 방법은 무엇입니까?

Question

document.write('Test.'); 
while (true) 1; 

브라우저가 텍스트를 먼저 표시하고 무한 루프로 이동하기를 원합니다. 그러나 나는 어떤 본문도 보지 못했다. 브라우저를 라인 단위로 이동시키는 방법? 브라우저가 첫 번째 줄을 마칠 때까지 기다리는 간단한 함수를 찾고 있습니다. 그런 것이 있습니까? waitForEverythingToFinish()처럼. window.getComputedStyle(div).getPropertyValue('height')을 사용하여 다시 그리기를 강요하는 것과 같습니다.

Answer 1

나는 당신의 의견에 따라이 질문의 본질, 그것은 장기 실행 동기 작업을 시작 하기 전에 브라우저가 화면을 업데이트 할 시간이해야 할 것을 믿습니다. 가능한 경우 브라우저가 화면을 업데이트하므로 주 스레드를 차단하면 새로 고침 된 UI를 얻을 수 없습니다. 이것은 간단한 제한 시간으로 가능해야하며, 의견이 제시 한대로 requestAnimationFrame입니다.

간단한 시간 초과 :

// For example, document.write(...) 
funcThatChangesScreen(); 

setTimeout(function() { 
    // For example, lots of heavy calculations 
    synchronousFuncThatTakesALongTime(); 
}, 100); 

JSFiddle 비교 :

• Without timeout
• With timeout

또는 requestAnimationFrame를 참조하십시오.

편집 : 주석의 다른 사람들이 지적했듯이, 이것이 실제로 작동하는 경우에도 원하는 것을 얻는 최선의 방법은 아닙니다. 장기간 실행되는 동기 작업이있는 경우이를 WebWorker에 위임하거나 비동기로 만드는 것이 가장 좋습니다. 이 제한 시간 솔루션을 사용하면 사용자가 화면의 텍스트를 볼 수 있지만 위의 JSFiddles와 마찬가지로 UI를 차단합니다.

Answer 2

이 방법이 적합한 지 확인하십시오.

if(!document.write('Test.')){ 
    while (true) 1; 
}