JS 지연 비동기 스 크 립 트 에 대한 나의 사 고 를 간단히 분석 하 다
async와defer속성의 스 크 립 트 는 모두 가 들 어 본 적 이 있 을 것 이 라 고 믿 습 니 다.그러나 그의 실제 실행 디 테 일 은 어떤 모습 입 니까?이 를 진지 하 게 연구 하 는 글 이 별로 없고 세부 사항 을 중시 하 는 사람 이 별로 없 을 수도 있 지만 사실은 기술 함량 이 있 는 업무 와 프로젝트 는 성능 에 대한 요구 가 매우 높 기 때문에 세부 사항 은 매우 중요 하 다.끊 임 없 는 실험 과 자기 시도 가 필요 하 다.최근 몇 달 동안 저 는 기술 을 연구 해 왔 습 니 다.예 를 들 어
linux,운영 체제,알고리즘 등 은 올해 말 까지 계속 공부 할 예정 입 니 다.홍 보 서 4 판이 나 온 후에 나 도 많은 시간 을 들 여 보 았 다.지연 스 크 립 트 에 대해 자신 도 실험 을 하여 이 총 결 을 썼 다.지연 스 크 립 트 가 무엇 입 니까?
script 태그,async 와 defer 속성 등 이 있 습 니 다.document.createElement('script')을 통 해 만 들 고 script.async=false 스 크 립 트 를 지정 하지 않 았 습 니 다.기본 값 은 비동기 지연 스 크 립 트(비 내 연 스 크 립 트 여야 합 니 다)입 니 다.다음 과 같 습 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="./async1.js" async></script>
<script src="./async2.js" async></script>
<script src="./defer1.js" defer></script>
<script src="./defer2.js" defer></script>
<script src="./common1.js"></script>
<script src="./common2.js"></script>
<script src="./common3.js"></script>
</html>document.createElement 를 통 해 만 든 탭 삽입 기본 값
async모드실험 을 시작 하 다
나 는 모두 2 개
async와 2 개defer라벨 을 썼 는데,다른 것 은 모두 일반 라벨 이다.그 중async1.js에는 4000 줄 의 코드 가 있 고,다른 것 은 모두 하나console.log일 뿐이다.첫 번 째 실험 결과:
페이지 를 다시 새로 고침 합 니 다(브 라 우 저 캐 시 를 사용 하지 않 았 음 을 주의 하 십시오).결 과 는 다음 과 같 습 니 다.
다시 새로 고침 하면 async 의 실행 시기 와 순서 가 불확실 하지만 defer 가 async 이후 에 실 행 될 것 임 을 확인 할 수 있 습 니 다.
이 유 는
async브 라 우 저 에 게 분석 이 끝 난 후에 페이지 를 불 러 올 필요 도 없고 실행 이 끝 난 후에 다른 스 크 립 트 를 실행 할 필요 도 없다 는 것 을 알려 주 는 것 이다.속칭 다운로드 실행 시기 와 인쇄 결과 의 대 비 를 보십시오.인쇄 결과:
해당 다운로드 실행 시기
위 에서 볼 때 다운로드 타 이 밍 async 와 일반 모드 는 모두 같은 병행 다운로드 입 니 다.defer 만 마지막 에 다운로드 합 니 다(http 1.1 은 동시 다발 수량 제한 이 있 습 니 다.그러나 여 기 는 동시 다발 제한 이 아 닙 니 다.comon 의 인용 을 삭제 한 후에 defer 는 영원히 마지막 으로 다운로드 한 것 을 알 게 되 었 습 니 다)
async와defer두 가지 모델 은 다음 과 같다.모든 스 크 립 트 파일 이 작 을 때 결 과 는 큰 확률 로 안 정 됩 니 다.
사용 의 주의 점
JS 지연 비동기 스 크 립 트 에 대한 제 생각 을 알 아 보 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 지연 비동기 스 크 립 트 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
