의견 : 비동기 로딩은 비 차단 동시 처리로 이해 될 수 있습니다. 과거에는 다양한 JavaScript 기술을 사용하여이를 수행했습니다. 이제 WebKit은 HTML5에 대한 스크립트 태그의 비동기 비동기 속성을 구현했습니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
(번역기 주 : 비동기 부하는 비 차단 동시 처리로 이해 될 수 있습니다.)내가 HTML5에 대해 흥분하는 이유 중 하나는 업계에서 많은 오랫동안 기다려온 기능을 구현하기 때문입니다. 우리는 항상 입력 상자에 빈 프롬프트를 표시해야하지만 모두 JavaScript로 구현됩니다. 또한 전체 블록을 클릭 할 수 있으며 JavaScript를 사용하여 구현됩니다.
WebKit은 이제 HTML5에 대한 스크립트 태그의 비동기 비동기 속성을 구현합니다. 과거에는 다양한 자바 스크립트 트릭을 사용하여이를 수행했지만 이제는 새로운 속성으로 인해 차단을 방지하기가 비교적 쉽습니다.
비동기 - HTML 속성
앞에서 언급했듯이 비동기 속성을 추가하는 것은 매우 간단합니다.
<!-Async 및 Onload Callback->를 지정하십시오
<Script Async src = "siteescript.js"> </script>
실제로 JavaScript 및 HTML 구조 설계가 합리적이라면 스크립트 요소의 90%가 비동기 적으로로드 될 수 있습니다.
연기 - HTML 속성
Safari 브라우저는 추가 연기 속성을 추가합니다
<!-연기를 지정하십시오. 효과는 async->와 유사합니다
<스크립트는 src = "siteescript.js"> </script>를 연기합니다
비동기와 연기의 차이
WebKit 공식 블로그는 비동기와 연기의 차이점을 설명합니다.
---------------------------------------
정상적인 상황에서는 HTML 소스 파일을 구문 분석 할 때 브라우저가 외부 스크립트를 만나면 구문 분석 프로세스가 일시 중지되고 스크립트 파일을 다운로드하도록 요청이 전송됩니다. 스크립트가 완전히 다운로드 및 실행 된 후 Dom Parsing은 계속 수행됩니다. 예를 들어:
<script src = myBlockingscript.js> </script>
다운로드 프로세스 중에 브라우저는 HTML을 구문 분석, 다른 스크립트 실행 및 CSS 레이아웃 표시 등 다른 유용한 작업을 수행하는 것이 차단됩니다. WebKit Preload 스캐너는 다운로드 단계에서 멀티 스레딩을 감지 할 수 있지만 일부 페이지에는 여전히 큰 네트워크 지연이 있습니다.
페이지 디스플레이 속도를 개선하는 많은 기술이 있지만 추가 코드와 브라우저 별 기술이 필요합니다. 이제 스크립트는 비동기 또는 지연 속성을 추가하여 스크립트를 동시에 실행할 필요가 없습니다. 예제는 다음과 같습니다.
<Script Async src = "myasyncscript.js"> </script>
<스크립트는 src = "mydeferscript.js"> </script>를 연기합니다
HTML 구문 분석을 일시 중지하지 않고 즉시 비동기 나 연기 주석 스크립트가 다운로드되지 않습니다. 둘 다 Onload 이벤트 콜백을 지원하여 스크립트를 실행 해야하는 초기화를 해결합니다.
이 둘의 차이점은 실행의 차이입니다.
스크립트 파일이 다운로드 된 직후 Async 스크립트가 실행되며 Window의로드 이벤트가 트리거되기 전에 실행 시간이어야합니다. 이는 여러 비동기 스크립트가 페이지에 나타나는 순서로 실행되지 않을 수 있음을 의미합니다.
대조적으로, 브라우저는 HTML 페이지에서 발생하는 순서대로 여러 연기 스크립트가 실행되도록하고 DOM 해상도가 완료되고 문서의 DOMContentLoaded 이벤트가 발생하기 전에 실행 시간이 발생하도록합니다.
다음은 다운로드하는 데 1 초, 다른 작업을 구문 분석하는 데 1 초가 걸리는 예입니다. 전체 페이지 로딩이 약 2 초가 걸렸다는 것을 알 수 있습니다.
동일한 예제이지만 이번에는 스크립트의 연기 속성을 지정했습니다. DEFER 스크립트가 다운로드되면 다른 작업을 병렬로 실행할 수 있으므로 약 1 배 빠릅니다.
---------------------------------------
어떤 브라우저가 비동기 및 연기를 지원합니다
위에서 언급 한 기사에서도 언급되었습니다.
Firefox는 WebKit을 기반으로 한 새 버전의 브라우저 외에도 오랫동안 연기 및 Onload 속성을 지원했으며 FF3.6 이후 비동기 속성을 추가했습니다. IE는 또한 DEFER 속성을 지원하지만 Async 속성을 지원하지 않습니다. IE9에서 시작하여 Onload 속성도 지원됩니다.
Aynsc는 굉장합니다!
WebKit이 비동기를 구현하는 것을 보게되어 기뻤습니다. 차단은 모든 웹 사이트에 대한 엄청난 성능 병목 현상이며 스크립트 파일을 직접 지정할 수 있으면 비동기로드가 의심 할 여지없이 웹 페이지의 속도를 높일 수 있습니다.