Script 탭 과 스 크 립 트 실행 순서

Script 탭 과 스 크 립 트 실행 순서
script 태그 와 관련 된 스 크 립 트 실행 순 서 를 자세히 이야기 합 니 다.Script 탭 의 기본 동작
몇 가지 최 우선 특성:

script  （   defer   async   ）        。            。
document.currentScript              (Chrome 29+, FF4+)
           script         

다음 과 같은 간단 한 코드 1 을 가정 하면 최종 적 으로 세 개의 alert 가 'A', 'B', 'C' 순이다.
우 리 는 네트워크 요청 이 있 는 상황 을 다시 고려 합 니 다. 2.
세 파일 모두 먼저 다운로드 하고 실행 해 야 하 며 두 번 째 파일 의 크기 는 다른 두 파일 보다 훨씬 크다.그러나 결 과 는 여전히 세 개의 alert 가 튀 어 나 왔 고 내용 은 'A', 'B', 'C' 였 다.
위의 두 가지 예 에서 script 태그 의 플런저 식 실행 을 충분히 알 수 있 습 니 다.async 속성
async 속성 은 HTML 5 의 새로운 특성 3 으로 호환성 이 좋 지 않다 는 것 을 의미한다 (IE10 +).
async 는 이 script 태그 가 플런저 가 아니 라 동기 화 되 지 않 음 을 표시 합 니 다.브 라 우 저 는 스 크 립 트 다운로드 가 끝 난 후에 실행 하면 됩 니 다. 플런저 페이지 를 렌 더 링 하지 않 고 이 스 크 립 트 의 다운로드 와 실행 을 기다 리 지 않 아 도 됩 니 다.
다음 코드 4 는 세 개의 alert 를 얻 을 수 있 지만 alert 의 내용 은 각각 "A", "C", "B" 입 니 다.
두 번 째 script 태그 가 async 에 가입 하 는 것 을 막 지 않 았 음 을 알 수 있 습 니 다.
이 속성 이 생 긴 원래 의 것 을 고려 하면 대량의 스 크 립 트 로 더 가 이런 일 을 하고 있 습 니 다.
var script = document.createElement(“script”); script.src = “file.js”; document.body.appendChild(script);
스 크 립 트 를 통 해 비동기 로 삽 입 된 script 태그 의 효 과 는 async 속성 을 가 진 script 태그 와 같다 고 상상 하기 어렵 지 않 습 니 다.스 크 립 트 에 삽 입 된 script 탭 은 기본적으로 async 입 니 다.
또한 내 연 스 크 립 트 에 async 속성 을 설정 하 는 것 은 의미 가 없고 다른 효과 도 나타 나 지 않 습 니 다.포 함 된 스 크 립 트 는 항상 즉시 실 행 됩 니 다.defer 속성
defer 속성 이 있 는 스 크 립 트 는 스 크 립 트 의 실행 을 지연 시 키 고 문서 해석 을 막 지 않 습 니 다.이 스 크 립 트 처럼 문서 의 끝 (이전) 에 놓 여 있 습 니 다.
다음 코드 5 의 거시적인 현상 과 async 속성 을 추가 한 예 는 똑 같 습 니 다. 모두 'A', 'C', 'B' 의 세 개의 alert 를 얻 을 수 있 습 니 다.하지만 그 원 리 는 다르다.
defer 속성 은 스 크 립 트 가 문서 분석 이 끝 난 후에 실 행 될 수 있 도록 확보 합 니 다. 이 스 크 립 트 가 문서 분석 과정 에서 다운로드 가 끝 났 더 라 도 실행 가능 한 상태 가 되 더 라 도 브 라 우 저 는 이 스 크 립 트 의 실행 을 연기 합 니 다. 문서 해석 이 끝 날 때 까지 6, 그리고 DOMContentLoaded 전에 7.
또한 defer 가 있 는 스 크 립 트 는 서로 실행 순 서 를 보장 할 수 있 습 니 다.
defer 속성 은 모든 브 라 우 저 에서 지원 하 는 것 이 아 닙 니 다. 지원 하 는 브 라 우 저 라 도 버 전이 다 르 기 때문에 구체 적 인 행동 이 일치 하지 않 습 니 다.또한, 문서 의 끝 에 script 라벨 을 배치 하 는 간단 한 방법 으로 defer 속성 과 같은 효 과 를 얻 을 수 있 습 니 다.
defer 속성 은 IE4 에서 지원 되 었 으 나 이 defer 속성 은 현대 브 라 우 저의 행동 과 차이 가 있 습 니 다.IE 10 이상 만 이 표준 에 따라 defer 속성 을 실행 하기 시작 합 니 다.async 와 defer 의 영향
W3C 의 공식 문서 8 을 참고 하면 defer 와 async 두 속성 은 서로 영향 을 줄 수 있 습 니 다.
There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.
간단 한 귀납:

  async  ，       
  defer  ，             
       ，           ，         

규범 에 서 는 두 가지 속성 이 모두 때때로 효과 가 있다 는 것 을 언급 하지 않 았 으 나, 이것 은 문서 에서 허용 되 는 것 이다.이런 구체 적 인 효 과 는 뒤에서 논의 할 것 이다.document. write 의 영향
document. write 는 열 린 문서 흐름 에 문서 내용 을 쓸 수 있 습 니 다.HTML 에 내 장 된 document. write 는 문서 내용 을 추가 할 수 있 습 니 다.document. write 가 script 탭 을 쓰 는 상황 을 고려 하여 9:
실행 순서 가 일반적인 script 태그 와 다 르 지 않 음 을 관찰 합 니 다.설령 네가 삽입 한 라벨 이 async 나 defer 를 가지 고 있다 하 더 라 도 그 행동 은 다 를 바 없다.
고민 되 는 것 은 거꾸로 10 사용 이다.두 번 째 스 크 립 트 는 document. write 를 통 해 기록 되 었 기 때 문 입 니 다.지연 되 는 스 크 립 트 가 실 행 될 때 document 이 닫 혔 습 니 다. document. write 는 아무런 효과 가 없습니다.그래서 defer 를 사용 하 든 async 를 사용 하 든 두 번 째 스 크 립 트 는 실행 되 지 않 았 습 니 다.