이 질문은 참으로 조금... 얼핏 보면 코드가 일부러 10초 동안 잠자고 있는 줄 알았어요. 그런데 질문자가 이해하지 못하는 것은 위 댓글란의 댓글을 보면 알 수 있을 것 같습니다. 질문은...
이 내용은 브라우저 UI 스레드와 관련이 있습니다. 브라우저는 단일 스레드입니다(이 스레드는 일반적으로 브라우저 UI 스레드라고 함).
"고성능 JavaScript" 빠른 반응형 사용자 인터페이스의 6장에는 두 개의 단락이 있습니다.
대부분의 브라우저에는 JavaScript 작업과 사용자 인터페이스 업데이트 작업이라는 두 작업 간에 공유되는 단일 처리 프로세스가 있습니다. 이러한 작업 중 하나만 한 번에 수행됩니다. 즉, JavaScript 코드가 실행되는 동안 사용자 인터페이스는 입력에 반응할 수 없으며 그 반대의 경우도 마찬가지입니다. 즉, JavaScript가 실행 중일 때 사용자 인터페이스는 "잠겨 있습니다". JavaScript 런타임 관리는 웹 애플리케이션 성능에 중요합니다.
JavaScript와 UI 업데이트가 공유하는 프로세스를 흔히 "브라우저 UI 스레드"라고 합니다. UI 스레드의 작업은 간단한 대기열 시스템을 기반으로 하며 프로세스가 유휴 상태가 될 때까지 작업은 대기열에 저장됩니다. 유휴 상태가 되면 대기열의 다음 작업이 다시 추출되어 실행됩니다. 이러한 작업은 JS 코드를 실행하거나 다시 그리기 및 리플로우를 포함한 UI 업데이트를 수행하는 것입니다.
으아아아
이것은 클릭 이벤트에 대한 처리 기능입니다. js가 DOM 노드를 제거한 후 func()는 10초 후에 계속 실행되고 다음 작업이 실행되기 전에 프로세스가 유휴 상태가 되며 사용자 인터페이스가 업데이트됩니다. 이때 해당 버튼은 페이지에서 사라집니다.
위 또 다른 답변 댓글란에 '추가하면 왜 이런 현상이 안 생기는 걸까요?'라는 질문
추가된 기능은 이렇습니다
으아아아
이 프로세스는 func()를 실행하지 않습니다. 이 함수를 밖으로 옮기고 다음으로 변경해 보세요
이 질문은 참으로 조금... 얼핏 보면 코드가 일부러 10초 동안 잠자고 있는 줄 알았어요. 그런데 질문자가 이해하지 못하는 것은 위 댓글란의 댓글을 보면 알 수 있을 것 같습니다. 질문은...
이 내용은 브라우저 UI 스레드와 관련이 있습니다. 브라우저는 단일 스레드입니다(이 스레드는 일반적으로 브라우저 UI 스레드라고 함).
"고성능 JavaScript" 빠른 반응형 사용자 인터페이스의 6장에는 두 개의 단락이 있습니다.
으아아아이것은 클릭 이벤트에 대한 처리 기능입니다. js가 DOM 노드를 제거한 후 func()는 10초 후에 계속 실행되고 다음 작업이 실행되기 전에 프로세스가 유휴 상태가 되며 사용자 인터페이스가 업데이트됩니다. 이때 해당 버튼은 페이지에서 사라집니다.
위 또 다른 답변 댓글란에 '추가하면 왜 이런 현상이 안 생기는 걸까요?'라는 질문
추가된 기능은 이렇습니다
으아아아이 프로세스는 func()를 실행하지 않습니다. 이 함수를 밖으로 옮기고 다음으로 변경해 보세요
으아아아역시 차단도 확실해요
스레드를 차단하여 그래픽 렌더링이 중단되었기 때문일 것입니다
돔 트리에서 버튼이 삭제된 경우에도 마찬가지입니다.
그러나 그래픽은 버튼이 존재하지 않는 새 DOM 트리를 다시 그리지 않았습니다.
이전에는 간단하다고 생각했는데 아래층에서 말한 것과 똑같아야 하는데 화면 렌더링이 멈췄습니다.
으아아아예를 들어 func(); 앞에 로그를 인쇄합니다.
출력 로고가 나타난 후 절전 모드가 실행될 때까지 전체 콘텐츠가 표시되지 않습니다.
sleep이 실행되면 페이지가 차단되어 전혀 작동할 수 없습니다. 동시에 CPU 사용량이 매우 높습니다(이 루프에는 이론적으로 간격이 없기 때문입니다). .