HTML5 스크립트 요소 비동기 및 지연 비동기 loading_html5 튜토리얼 기술 사용 소개-H5 튜토리얼-php.cn

HTML5 스크립트 요소 비동기 및 지연 비동기 loading_html5 튜토리얼 기술 사용 소개

WBOY

풀어 주다： 2016-05-16 15:48:52

원래의

1706명이 탐색했습니다.

(역자 주: 비동기 로딩은 비차단 동시 처리로 이해될 수 있습니다.)

내가 HTML5에 대해 그토록 기대하는 이유 중 하나는 업계에서 오랫동안 기다려온 많은 기능을 구현한다는 것입니다. 빈 프롬프트를 표시하려면 항상 입력 상자가 필요했지만 모두 JavaScript를 사용하여 구현되었습니다. 또한 JavaScript를 사용하여 전체 블록을 클릭 가능하게 만들고 싶습니다.
WebKit은 이제 HTML5용 SCRIPT 태그의 비동기 속성을 구현합니다. 과거에는 이러한 종류의 작업을 수행하기 위해 다양한 JavaScript 트릭을 사용했지만 이제는 새로운 속성을 사용하여 차단을 비교적 쉽게 방지할 수 있습니다.

async - HTML 속성
앞서 언급했듯이 비동기 속성을 추가하는 것은 매우 간단합니다.

코드 복사

코드는 다음과 같습니다.

="siteScript.js" onload="myInit()">

실제로 JavaScript 및 HTML 구조가 합리적으로 설계된 경우 90%의 경우 스크립트 요소는 비동기 로딩을 사용할 수 있습니다.
코드는 다음과 같습니다.

async와 defer의 차이점

WebKit 공식 블로그에서 async와 defer의 차이점을 잘 설명하고 있습니다

- ---- --------------------- 일반적인 상황에서 브라우저가 구문 분석을 할 때 HTML 소스 파일에서 외부 스크립트를 발견하면 구문 분석 프로세스가 일시 중지되고 스크립트 파일을 다운로드하라는 요청이 전송됩니다. DOM 구문 분석은 스크립트가 완전히 다운로드되고 실행된 후에만 계속됩니다. 예: 다운로드 프로세스 중에 브라우저는 HTML 구문 분석, 다른 스크립트 실행 및 디스플레이를 포함한 다른 유용한 작업을 수행하지 못하도록 차단됩니다. CSS 레이아웃. Webkit 사전 로드 스캐너는 다운로드 단계에서 멀티스레드 다운로드를 탐지적으로 수행할 수 있지만 일부 페이지에서는 여전히 상당한 네트워크 대기 시간이 발생합니다. 현재 페이지 표시 속도를 향상시키는 기술은 많지만 모두 추가 코드와 브라우저별 기술이 필요합니다. 이제 스크립트가 동기적으로 실행될 필요가 없도록 스크립트에 비동기 또는 지연 속성을 추가할 수 있습니다. 예는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다:

async 및 defer로 표시된 스크립트는 모두 HTML 구문 분석을 일시 중지하지 않고 즉시 다운로드됩니다. 요구 사항을 해결하기 위한 콜백 이 스크립트는 초기화를 수행합니다.

둘 사이의 차이점은 실행 시간에 있습니다.

비동기 스크립트는 스크립트 파일이 다운로드된 직후에 실행되며, 실행 시간은 창의 로드 이벤트가 트리거되기 전이어야 합니다. 이는 여러 비동기 스크립트가 페이지에 나타나는 순서대로 순차적으로 실행되지 않을 가능성이 높다는 것을 의미합니다. 반대로, 브라우저는 여러 연기 스크립트가 HTML 페이지에 나타나는 순서대로 순차적으로 실행되도록 하며, 실행 시간은 DOM 구문 분석이 완료된 후 문서의 DOMContentLoaded 이벤트가 트리거되기 전입니다. 다음은 다운로드에 1초, 파싱 및 기타 작업 수행에 1초가 소요되는 예를 보여줍니다. 전체 페이지를 로드하는 데 약 2초가 소요되는 것을 확인할 수 있습니다.

같은 예지만 이번에는 스크립트의 defer 속성을 지정합니다. 왜냐하면 defer 스크립트를 다운로드하면 다른 작업을 병렬로 실행할 수 있기 때문에 약 1배 더 빠릅니다.

---------------------------- ----
브라우저가 비동기 및 연기를 지원하는 보기

위에 인용된 기사에도 언급되어 있습니다:

Webkit 기반 브라우저의 새 버전 외에도 FireFox는 다음을 지원했습니다. defer 및 onload 속성은 오랫동안 사용되지 않았으며 FF3.6부터 async 속성이 추가되었습니다. IE는 defer 속성도 지원하지만 아직 async 속성은 지원하지 않습니다. IE9부터 onload 속성도 지원됩니다.

aynsc 좋아요!
웹킷이 비동기를 구현하는 것을 보고 너무 기뻤습니다. 모든 웹 사이트에서 차단은 성능에 큰 병목 현상을 일으키며, 비동기적으로 로드할 스크립트 파일을 직접 지정할 수 있으면 웹 페이지 속도가 확실히 향상됩니다.