인 스 턴 스 분석 자바 script 의 비동기

js 비동기 해석
1.js 단일 스 레 드 분석
     우 리 는 모두 js 의 큰 특징 이 단일 스 레 드,즉 같은 시간 에 한 가지 일,한 마디 js 코드 만 처리 할 수 있다 는 것 을 안다.그런데 왜 js 는 다 중 스 레 드 가 아 닌 단일 스 레 드 로 설계 해 야 합 니까?이것 은 주로 js 의 용도 와 관련 이 있 습 니 다.js 는 브 라 우 저 엔 드 의 스 크 립 트 언어 로 서 사용자 와 서버 의 상호작용 과 조작 dom 입 니 다.dom 을 조작 하면 js 는 단일 스 레 드 언어 일 수 밖 에 없다.만약 js 가 다 중 스 레 드 를 가 져 오 면 여러 스 레 드 가 동시에 dom 을 조작 하 는 경우 브 라 우 저 는 어떻게 렌 더 링 하 는 지 판단 할 수 없습니다.js 는 단일 스 레 드 일 뿐만 아니 라 브 라 우 저 렌 더 링 dom 도 단일 스 레 드 입 니 다.js 의 실행 과 브 라 우 저 렌 더 링 dom 이 공유 하 는 스 레 드 입 니 다.이 로 인해 html 코드 에 js 코드 를 쓰 면 브 라 우 저 엔 드 렌 더 링 이 막 힐 수 있 습 니 다.예 를 들 어 html 의 한 위치 에 alert('잠시 만 요')가 있 는 단락 을 쓰 면 alert 전에 html 가 렌 더 링 되 었 고 alert 뒤의 html 는 이 js 에 의 해 차단 되 었 습 니 다.다 핵 CPU 의 컴 퓨 팅 능력 을 이용 하기 위해 HTML 5 는 웹 Worker 표준 을 제시 하여 자바 스 크 립 트 가 여러 개의 스 레 드 를 만 들 수 있 도록 합 니 다.그러나 하위 스 레 드 는 메 인 스 레 드 에 의 해 완전히 제어 되 고 DOM 작업 을 할 수 없습니다.그래서 이 새로운 기준 은 자 바스 크 립 트 단일 라인 의 본질 을 바 꾸 지 않 았 다.
     js 단일 스 레 드 란 브 라 우 저 에서 JS 엔진 이 자바 스 크 립 트 코드 를 해석 하고 실행 하 는 스 레 드 가 하나 밖 에 없다 는 것 을 말한다.그것 을 메 인 스 레 드 라 고 불 러 도 무방 하 다.그러나 실제 브 라 우 저 처리 js 에는 다른 스 레 드 가 존재 합 니 다.예 를 들 어 AJAX 가 요청 한 스 레 드,DOM 이 벤트 를 처리 하 는 스 레 드,타이머 스 레 드,파일 을 읽 고 쓰 는 스 레 드(예 를 들 어 Node.js 에서)등 이 있 습 니 다.이 스 레 드 는 JS 엔진 안에 존재 할 수도 있 고 JS 엔진 외 에 존재 할 수도 있 습 니 다.여기 서 우 리 는 구분 하지 않 습 니 다.그것들 을 작업 스 레 드 라 고 불 러 도 무방 하 다.
     요약:js 가 단일 스 레 드 모드 를 취 하 는 이 유 는 DOM 렌 더 링 충돌 을 피하 기 위해 서 입 니 다.한편,브 라 우 저 에서 js 스 레 드 를 실행 하 는 것 은 단일 스 레 드 입 니 다.우 리 는 이것 을 주 스 레 드 라 고 부 르 고 js 를 처리 하 는 다른 스 레 드 도 존재 합 니 다.우 리 는 이것 을 작업 스 레 드 라 고 부 릅 니 다.js 는 단일 스 레 드 이지 만 브 라 우 저 는 다 중 스 레 드 입 니 다.
2.동기 화 와 비동기
     단일 스 레 드 는 모든 작업 이 줄 을 서 야 이전 작업 이 끝나 야 다음 작업 을 수행 할 수 있다 는 것 을 의미한다.앞의 임무 가 오래 걸 리 면 뒤의 임 무 는 계속 기다 릴 수 밖 에 없다.이것 이 바로 동기 코드 블록 이다.줄 을 서 는 것 이 계 산 량 이 많아 서 CPU 가 바 빠 서 오히려 그만 두 는 경우 가 많 지만 CPU 가 비어 있 는 경우 가 많 습 니 다.IO 장치(입 출력 장치)가 느 리 기 때문에(예 를 들 어 Ajax 작업 이 네트워크 에서 데 이 터 를 읽 는 것)결과 가 나 오 기 를 기다 리 고 아래로 실행 해 야 합 니 다.JavaScript 언어의 설계 자 는 이때 메 인 스 레 드 는 IO 장 치 를 상관 하지 않 고 대기 중인 작업 을 걸 고 뒤에 있 는 작업 을 먼저 실행 할 수 있다 는 것 을 깨 달 았 다.IO 장치 가 결 과 를 되 돌 릴 때 까지 기 다 렸 다가 다시 고 개 를 돌려 걸 린 임 무 를 계속 수행 합 니 다.
     쉽게 말 하면 동기 화 는 코드 의 실행 을 막 고 비동기 가 되 지 않 는 다 는 것 이다.마찬가지 로 alert('잠시 만 요')를 예 로 들 면 js 코드 에 alert 를 추가 합 니 다.확인 을 클릭 하지 않 으 면 코드 의 실행 이 막 히 고 대부분의 js 코드 는 동기 화 되 어 실 행 됩 니 다.이 보 는 반대 다.그런데 왜 js 에서 비동기 적 인 개념 을 도입 해 야 합 니까?아주 간단 합 니 다.js 의 단일 스 레 드 로 인해 시간 이 걸 리 는 조작 을 만 났 을 때 동기 화 된 실행 을 사용 하면 우 리 는 지금 처럼 유창 한 웹 응용 을 볼 수 없습니다.다시 간단 한 예 를 들 어 하나의 일방 통행 로 에 많은 자동차 가 달리 고 있다.만약 에 그 중 한 대의 차 가 기계 고장 이 나 면 뒤의 차 도 통과 하지 못 할 것 이다.이때 고장 난 차 를 옆 에 있 는 응급 도로 에 끌 어 들 여 복 구 를 해 야 한다.수리 한 후에 다시 간선 도로 에 들 어가 면 간선 도로 의 다른 주 행 자동차 에 영향 을 주지 않 을 것 이다.그래서 이 보 는 js 단선 에서 시간 소모 문 제 를 해결 하 는'어 쩔 수 없 는'해결 방안 이다.완벽 에 가 까 운 해결책 이기 도 하 다.
3.js 비동기 와 사건 폴 링
     이벤트 폴 링(event loop)은 js 비동기 의 실현 방식 이다.쉽게 말 하면 js 단일 스 레 드 에서 두 가지 작업 으로 나 뉘 는데 하 나 는 동기 화 작업(synchronous)이 고 다른 하 나 는 비동기 작업(asynchronous)이다.동기 화 작업 이란 메 인 스 레 드 에서 줄 을 서서 수행 하 는 작업 을 말 합 니 다.이전 작업 이 완료 되 어야 다음 작업 을 수행 할 수 있 습 니 다.비동기 작업 이란 메 인 스 레 드 에 들 어가 지 않 고'작업 대기 열'(task quue)에 들 어 가 는 작업 을 말 합 니 다.메 인 프로 세 스 의 모든 동기 화 작업 이 완료 되 었 을 때 만'작업 대기 열'은 메 인 스 레 드 에 알 립 니 다.어떤 비동기 작업 이 실 행 될 수 있 고 이 작업 은 메 인 스 레 드 에 들 어 갈 수 있 습 니 다.이벤트 폴 링 은 메 인 스 레 드 의 비동기 작업 을 작업 대기 열 에 마 운 트 한 다음 합 쳐 질 때 까지 작업 대기 열 에 있 는 비동기 함 수 를 메 인 프로 세 스 로 끌 어 당 겨 수행 하 는 프로 세 스 입 니 다.
js 에서 비동기 작업 은 주로 다음 과 같다.
     1.정시 작업(setTimeout,setInterval)
     2.네트워크 요청(ajax,동적로 딩)
     3.이벤트 바 인 딩(click,focus,change 등)
 js 비동기 구체 집행 절차 분석

     왼쪽 코드,console.log 두 개,setTitmeout 두 개 를 보 세 요.비동기 에 대한 이해 에 따 르 면 메 인 스 레 드 에서 console.log 는 동기 화 작업 을 위 에서 아래로 순서대로 수행 하기 때문에 가장 먼저 인쇄 한 것 은 3 입 니 다.첫 번 째 setTimeout 을 실행 할 때 브 라 우 저 js 엔진 은 자동 으로 setTimeout 을 작업 스 레 드 에 넣 습 니 다.ps:작업 스 레 드 에서 0.1s 를 기다 린 후 setTimeout 의 리 셋 함 수 를 비동기 대기 열 에 넣 습 니 다.주 프로 세 스 의 다음 setTimeout 입 니 다.그러나 지연 시간 은 0 입 니 다.이것 은 동기 화 할 수 있다 는 것 을 의미 하지 않 습 니 다.이것 은 여전히 두 가지 과정 을 거 쳤 습 니 다.작업 프로 세 스에 서 0s 후에 작업 대기 열 에 넣 습 니 다.다음은 console.log(3)를 실행 합 니 다.주 프로 세 스 에서 작업 이 완료 되 었 습 니 다.작업 대기 열 에 모니터 가 있 습 니 다.메 인 프로 세 스 와 작업 대기 열 에 있 는 비동기 함수 상황 을 수시로 감시 하고 있 습 니 다.메 인 프로 세 스 가 실 행 될 때 작업 대기 열 에 실행 할 함수 가 있 는 지 여 부 를 판단 합 니 다.있 으 면 대기 열 현재 순서대로 메 인 프로 세 스 에 넣 고 왕복 합 니 다.
     그래서 위의 코드 는 3,3,2,1 로 순서대로 인쇄 됩 니 다.즉,먼저 비동기 가 아 닌 것 을 실행 한 다음 에 고 개 를 돌려 비동기 함 수 를 실행 하 는 것 입 니 다.비동기 함수 의 실행 순 서 는 대기 열 규칙 이 고 먼저 나 가 는 것 입 니 다.즉,먼저 대기 열 에 들 어 가 는 비동기 함수 가 우선 실 행 됩 니 다.
     사고:코드 에 현재 ajax 와 1s 의 정시 함수 가 존재 한다 면 누가 먼저 실행 합 니까?정 답 은 불확실 하 다.ajax 요청 이 완료 되 어 대기 열 에 들 어 갈 시간 이 확실 하지 않 기 때 문 입 니 다.얘 들 아,면접 관리 에 넘 어가 지 마.하하.
4.전단 비동기 의 표기 법
     1.리 셋 함수,즉 setTimeout 또는 ajax 에 리 셋 함 수 를 추가 하고 지 정 된 시간 이 지나 거나 데이터 에 요청 한 후에 리 셋 을 실행 합 니 다.
     2.ES6 기준:Promise,ES7:async await   이 두 가 지 는 모두 js 사건 폴 링 이 비동기 화 를 실현 하 는 우아 한 방식 일 뿐 비동기 화 를 동기 화 하 는 쓰기 로 바 꾸 었 으 나 js 비동기 의 본질 을 바 꾸 지 않 았 다.
이상 은 자바 script 의 비동기 적 인 상세 한 내용 을 사례 로 분석 하 는 것 입 니 다.자바 script 비동기 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!