JavaScript 운영 체제 인 스 턴 스 분석

이 글 의 실례 는 자 바스 크 립 트 운행 메커니즘 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
블 로그 처음 써 봐 요.
현재 1,2 학기 에 대학 2 학년 이 입문 하기 시 작 했 지만 오랫동안 구조 에 대한 간단 한 호출 이 었 고 이에 대해 깊이 연구 하지 않 았 기 때문에 이 블 로 그 는 자기 독촉 의 시작 이 었 다.이 블 로그 의 내용 은 얼마 전에 위 챗 애플 릿 전단 지 를 쓴 것 에서 비롯 되 었 는데 페이지 의 렌 더 링 순서 가 항상 자신의 예상 과 어 긋 나 는 것 을 발견 했다.그래서 최근 에 자 바스 크 립 트 운영 체제 에 관 한 블 로그 와 문 서 를 보고 기본 적 인 프레임 워 크 가 생 겼 다.그 다음 에 제 가 알 고 있 는 내용 을 자세히 살 펴 보 겠 습 니 다.
JavaScript 실행 순서
우선,JavaScript 는 순서대로 한 줄 한 줄 실 행 됩 니 다.그리고 JS 는 하나의 스 레 드 만 있 습 니 다.즉,두 개의 코드 를 동시에 실행 할 수 없습니다.즉,한 코드 가 실 행 될 때 그 뒤의 모든 코드 는 이 코드 가 실 행 될 때 까지 기 다 려 야 뒤의 것 이 계속 실 행 될 수 있 습 니 다.만약 그렇다면 사용자 체험 도가 매우 좋 지 않 을 것 이다.예 를 들 어 서버 에 요청 을 보 내 면 후속 코드 는 서버 가 결 과 를 되 돌려 줄 때 까지 기 다 려 야 사용자 가 새로운 조작 을 할 수 있다.
이 건 또 뭐야?
자 바스 크 립 트 실행 메커니즘 상세 설명
JavaScript 실행 스 택
JavaScript 는 스 택 을 누 르 는 방식 으로 코드 를 실 행 했 습 니 다.처음에 실 행 했 을 때 스 택 이 비어 있 었 습 니 다.실행 이 시작 되면 JS 엔진 은 코드 를 스 택 밑 에 넣 었 습 니 다.이 코드 가 다른 함수 의 호출 을 포함 하지 않 으 면 호출 된 함 수 를 스 택 꼭대기 에 두 었 습 니 다.이 코드 가 다른 함수 의 호출 을 포함 하지 않 으 면 이 함 수 를 실 행 했 습 니 다.실행 이 끝 난 후에 스 택 에서 나 왔 습 니 다.이런 식 으로 유추 합 니 다.결국 창고 가 비 어 있 을 때 까지.
JavaScript 동기 화 작업 과 비동기 작업
사실 실제 JS 내 부 는 동기 화 작업 과 비동기 작업 이지 만 JS 단일 스 레 드 의 특징 을 바 꾸 지 않 았 습 니 다.

동기 화 작업:실행 후 결 과 를 직접 되 돌려 줍 니 다.예:console.log();c = a + b

비동기 작업:실행 후 즉시 결 과 를 되 돌 릴 수 없습니다.일정한 시간 을 기 다 려 야 리 턴 함 수 를 실행 하고 결 과 를 되 돌려 줍 니 다

시스템 에 있어 JS 는 메 인 스 레 드 가 존재 합 니 다.모든 동기 화 작업 을 먼저 수행 하고 비동기 작업 은 먼저 등록 한 다음 에 메 인 스 레 드 는 비동기 작업 수행 결과 가 돌아 오 기 를 기다 리 지 않 고 다음 동기 화 작업 을 계속 수행 합 니 다.(이 과정 에서 비동기 작업 이 결 과 를 되 돌려 주면 다음 리 셋 함 수 는 Event Queue 에서 기다 릴 것 입 니 다)동기 화 작업 이 모두 실 행 될 때 까지 주 스 레 드 는 Event Queue 에서 작업 을 읽 고 실 행 됩 니 다.이 과정 은 이벤트 순환 Event Loop 입 니 다.
사건 순환 은 어떻게 발생 합 니까?
이상 하지 않 습 니까?상기 동기 화 작업 과 비동기 작업 의 수행 방식 에 따라 한 라운드 에 완 료 될 수 있 지 않 습 니까?또 무슨 Event Loop 입 니까?
이것 은 작은 세부 사항 입 니 다.비동기 임무 가 여러 개 존재 할 때 모든 비동기 임무 가 돌아 오 는 결과 에 필요 한 시간 이 다 릅 니 다.이 는 Event Queue 가 먼저 나 온 형식 으로 결 과 를 되 돌려 줄 을 서 는 것 이 존재 합 니 다.첫 번 째 비동기 임 무 는 결 과 를 되 돌려 줍 니 다.그러면 이 를 대열 의 첫 번 째 에 두 고 다음 비동기 임 무 는 그 다음 에 이렇게 줄 을 서 는 것 입 니 다.메 인 라인 이 비어 있 을 때(즉 동기 화 작업 이 끝 난 후)이벤트 큐 에서 이 벤트 를 읽 고 메 인 라인 에 넣 어 실행 합 니 다.그리고 순환 은 Event Queue 가 실 행 된 후에 시간 이 지나 면 이전의 비동기 작업 이 결 과 를 되 돌려 줍 니 다.Event Queue 에 놓 으 면 모니터 가 Event Queue 가 비어 있 지 않 고 메 인 스 레 드 가 Event Queue 의 작업 을 다시 수행 하기 시작 합 니 다.
매크로 퀘 스 트 와 마이크로 퀘 스 트
정 의 를 설명 하기 전에 우 리 는 먼저 비동기 작업 에 대해 설명 한다.

서버 에 대한 비동기 요청:가장 흔히 볼 수 있 는 비동기 작업 입 니 다.이것 은 전후 단의 상호작용 과 관련 되 기 때문에 서버 가 요청 을 처리 하고 요청 결 과 를 되 돌려 야 합 니 다

setTimeout 과 setInterval:지연 작업,후 자 는 순환 작업(모두 지연 값 포함)

Promise:JS 는 비동기 작업 을 처리 하 는 대상

process.nextTick(callback):node.js 버 전의"setTimeout"과 같은 이벤트 순환 의 다음 순환 에서 callback 반전 함 수 를 호출 합 니 다.

넓 은 의미 에서 JS 는 동기 화 작업 과 비동기 작업 으로 나 뉘 는데 이 작업 에 대해 더욱 정밀 하 게 정의 합 니 다.

macro-task(매크로 작업):전체 코드 스 크 립 트,setTimeout,setInterval

포함

micro-task(마이크로 퀘 스 트):Promise,process.nextTick

여기 서 매크로 임무 와 마이크로 임 무 를 제기 하 는 이 유 는 사건 순환 을 잘 이해 하기 위해 서 입 니 다!
실행 과정:

메 인 스 레 드 는 첫 번 째 순환 하 는 매크로 작업 을 순서대로 수행 한 다음 에 첫 번 째 순환 하 는 마이크로 작업 을 마이크로 작업 의 Event Queue 에 넣 고 만 나 는 매크로 작업 을 매크로 작업 Event Queue 에 넣 습 니 다.특히 주의 하 세 요!!첫 번 째 순환 매크로 작업 은 전체 script 코드 입 니 다!!

그리고 마이크로 미 션 을 수행 하 는 Event Queue;

두 번 째 순환 시 매크로 퀘 스 트 의 Event Queue 에서 첫 번 째 매크로 퀘 스 트 를 꺼 낸 다음 현재 매크로 퀘 스 트 에 포 함 된 코드 를 실행 합 니 다.또한 만 나 는 마이크로 퀘 스 트 를 마이크로 퀘 스 트 의 Event Queue 에 넣 고 만 나 는 매크로 퀘 스 트 를 매크로 퀘 스 트 Event Queue 에 넣 습 니 다.

현재 마이크로 퀘 스 트 의 Event Queue 의 퀘 스 트 를 수행 합 니 다.

세 번 째 순환,매크로 퀘 스 트 의 Event Queue 에서 두 번 째 매크로 퀘 스 트 를 꺼 냅 니 다.(이 순환)

한 마디 로 하면 먼저 매크로 임 무 를 수행 한 다음 에 마이크로 임 무 를 수행 하 는 것 입 니 다.특히 두 가 지 를 주의 하면 됩 니 다.

첫 번 째 순환 의 매크로 작업 은 전체 script 코드

입 니 다.

매크로 작업 대기 열 은 매크로 작업 을 반복 적 으로 수행 합 니 다

여기 서 예 를 보 자.

 console.log('1');
 
 setTimeout(function() {
  console.log('2');
  process.nextTick(function() {
   console.log('3');
  })
  new Promise(function(resolve) {
   console.log('4');
   resolve();
  }).then(function() {
   console.log('5')
  })
 })
 process.nextTick(function() {
  console.log('6');
 })
 new Promise(function(resolve) {
  console.log('7');
  resolve();
 }).then(function() {
  console.log('8')
 })
 
 setTimeout(function() {
  console.log('9');
  process.nextTick(function() {
   console.log('10');
  })
  new Promise(function(resolve) {
   console.log('11');
   resolve();
  }).then(function() {
   console.log('12')
  })
 })
 
 //  ：ssssyoki
 //  ：https://juejin.im/post/59e85eebf265da430d571f89
 //  ：  

출력 순서:
1，7，6，8，2，4，3，5，9，11，10，12
총결산
이 블 로그 에는 당신 이 듣 지 못 한 명사 나 방법 이 포함 되 어 있 을 지도 모 르 지만,나 는 그것 에 대해 상세 하 게 설명 하지 않 았 습 니 다.그 이 유 는 개인 적 으로 자 료 를 볼 때 모 르 는 것 을 자주 만 나 기 때문에 저 는 스스로 찾 아 보고 이해 하 는 것 을 선택 합 니 다.그러면 기억 과 이해 에 더욱 효과 적 이 고 단 어 를 찾 는 것 과 똑 같 습 니 다.만약 에 텍스트 에서 직접 알려 주면 오히려 중시 하지 않 습 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.