jQuery의 제거가 동기식이 아닌 이유는 무엇입니까?

Question

페이지에 다음과 같은 버튼이 있습니다

으아악

이 페이지에 해당하는 js 스크립트는 다음과 같습니다

으아악

시작 버튼을 클릭한 다음 테스트 버튼을 클릭하면 테스트 버튼이 제거되기 전에 실제로 절전 모드(여기서 루프로 시뮬레이션된 동기화된 $.ajax 요청에서 발견됨)인 이유는 무엇입니까? setTimeout에 sleep을 래핑해야만 원하는 효과를 얻을 수 있나요...?

Answer 1

이 질문은 참으로 조금... 얼핏 보면 코드가 일부러 10초 동안 잠자고 있는 줄 알았어요. 그런데 질문자가 이해하지 못하는 것은 위 댓글란의 댓글을 보면 알 수 있을 것 같습니다. 질문은...

이 내용은 브라우저 UI 스레드와 관련이 있습니다. 브라우저는 단일 스레드입니다(이 스레드는 일반적으로 브라우저 UI 스레드라고 함).

"고성능 JavaScript" 빠른 반응형 사용자 인터페이스의 6장에는 두 개의 단락이 있습니다.

대부분의 브라우저에는 JavaScript 작업과 사용자 인터페이스 업데이트 작업이라는 두 작업 간에 공유되는 단일 처리 프로세스가 있습니다. 이러한 작업 중 하나만 한 번에 수행됩니다. 즉, JavaScript 코드가 실행되는 동안 사용자 인터페이스는 입력에 반응할 수 없으며 그 반대의 경우도 마찬가지입니다. 즉, JavaScript가 실행 중일 때 사용자 인터페이스는 "잠겨 있습니다". JavaScript 런타임 관리는 웹 애플리케이션 성능에 중요합니다.

JavaScript와 UI 업데이트가 공유하는 프로세스를 흔히 "브라우저 UI 스레드"라고 합니다. UI 스레드의 작업은 간단한 대기열 시스템을 기반으로 하며 프로세스가 유휴 상태가 될 때까지 작업은 대기열에 저장됩니다. 유휴 상태가 되면 대기열의 다음 작업이 다시 추출되어 실행됩니다. 이러한 작업은 JS 코드를 실행하거나 다시 그리기 및 리플로우를 포함한 UI 업데이트를 수행하는 것입니다.

으아아아

이것은 클릭 이벤트에 대한 처리 기능입니다. js가 DOM 노드를 제거한 후 func()는 10초 후에 계속 실행되고 다음 작업이 실행되기 전에 프로세스가 유휴 상태가 되며 사용자 인터페이스가 업데이트됩니다. 이때 해당 버튼은 페이지에서 사라집니다.

위 또 다른 답변 댓글란에 '추가하면 왜 이런 현상이 안 생기는 걸까요?'라는 질문

추가된 기능은 이렇습니다

으아아아

이 프로세스는 func()를 실행하지 않습니다. 이 함수를 밖으로 옮기고 다음으로 변경해 보세요

으아아아

역시 차단도 확실해요

Answer 2

스레드를 차단하여 그래픽 렌더링이 중단되었기 때문일 것입니다

돔 트리에서 버튼이 삭제된 경우에도 마찬가지입니다.

그러나 그래픽은 버튼이 존재하지 않는 새 DOM 트리를 다시 그리지 않았습니다.

Answer 3

이전에는 간단하다고 생각했는데 아래층에서 말한 것과 똑같아야 하는데 화면 렌더링이 멈췄습니다.
예를 들어 func(); 앞에 로그를 인쇄합니다.

으아아아

출력 로고가 나타난 후 절전 모드가 실행될 때까지 전체 콘텐츠가 표시되지 않습니다.

sleep이 실행되면 페이지가 차단되어 전혀 작동할 수 없습니다. 동시에 CPU 사용량이 매우 높습니다(이 루프에는 이론적으로 간격이 없기 때문입니다). .