HTML5 비동기 및 연기로 비 블로킹 JavaScript를로드하십시오

> 브라우저는 페이지 처리를 중지하지 않고 File.js 및 기타 지연된 스크립트를 병렬로 다운로드하기 시작합니다. 12 년 전에 Internet Explorer 버전 4.0에서 구현되었습니다! 버전 3.5 이후 Firefox에서도 사용할 수 있습니다. 이론적으로, DOMContentloaded 이벤트 직전에 DOM이 완전히로드 된 후에 발생해야합니다. 실제로, 그것은 스크립트가 캐시되었는지 여부와 당시 다른 스크립트가 수행하는 일에 따라 OS 및 브라우저에 따라 달라집니다. Async Astribute async는 html5 : Async가 첫 번째 기회에 스크립트가 첫 번째 기회를 실행할 수 있다는 점을 제외하고는 연기에 동일합니다. 스크립트가 순서대로 실행 될 것이라고 보장 할 수는 없지만 Window Onload Event Fire가 발생할 때까지로드 될 것입니다. Firefox 3.6, Opera 10.5 및 최신 WebKit 빌드에는 Async에 대한 지원이 있으므로 다음 버전의 Chrome 및 Safari에 나타납니다. IE9는 아직 비동기를 지원하지 않습니다 그러나 IE 팀은 DEFER의 별칭으로 쉽게 추가 할 수 있습니다. 모든 브라우저를 지원하기 위해 Async와 DEFER를 모두 사용할 수 있습니다. IE4PERHAP조차도 마침내 모든 브라우저에서 작동하는 기본적이고 차단하지 않은 JavaScript 로딩 방법을 갖게됩니다. 노트 : Opera의 지연된 스크립트 ExecutionOpera는 실험적으로 지연된 스크립트 실행 기능을 제공하여 다음 : CONFIG에서 활성화 할 수 있습니다. 페이지에 비동기 스크립트가로드 된 위치를 기억하므로 Document.write를 사용하거나 DOM을 수정할 수 있습니다.이 기능은 즉시 위젯과 광고에 이익이됩니다. Microsoft, Mozilla 및 Webkit이 Opera의 리드를 따르기를 바랍니다. 비 차단, 비동기 및 JavaScript에서 연기에 대한 자주 묻는 질문 (FAQ) javaScript에서 비동기와 연기의 차이점은 무엇입니까?

Async와 DEFER는 JavaScript 파일을로드하고 실행하는 방법을 제어하기 위해 HTML의 스크립트 태그에 추가 할 수있는 속성입니다. 비동기 속성은 나머지 웹 페이지에서 스크립트를 비동기로로드하고 실행합니다. 이는 스크립트가로드 되 자마자 실행되며 나머지 웹 페이지가로드되기를 기다리지 않고 실행됩니다. 반면에, DEFER 속성은 스크립트를 비동기로로드하지만 나머지 웹 페이지가로드 될 때까지 스크립트의 실행을 방어합니다. 이것은 실행하기 전에 완전히로드되는 DOM에 의존하는 스크립트에 유용 할 수 있습니다. javaScript 코드를 HTML 문서에 어디에 배치해야합니까?

HTML 문서에 JavaScript 코드를 배치하면 웹 페이지의로드 성능에 큰 영향을 줄 수 있습니다. 전통적으로 스크립트는 HTML 문서의 헤드 섹션에 배치됩니다. 그러나 스크립트가로드되고 실행될 때까지 웹 페이지의 렌더링을 차단할 수 있습니다. 이를 피하기 위해 종종 닫는 바디 태그 직전에 스크립트를 배치하는 것이 좋습니다. 이를 통해 스크립트가 실행되기 전에 HTML 문서가로드 및 렌더링 할 수 있습니다. 또는 웹 페이지의 렌더링을 차단하지 않고 스크립트의로드 및 실행을 제어하기 위해 비동기 또는 지연 속성을 사용하여 스크립트의로드 및 실행을 제어 할 수 있습니다.

expernal 외부 파일 또는 HTML 파일에 직접 JavaScript 코드를 넣는 것이 더 좋습니다. 외부 파일에 JavaScript 코드를 넣으면 HTML 파일을 청정하고 읽기 쉽게 만들 수 있습니다. 또한 브라우저가 스크립트를 캐시 할 수 있으므로 반복 방문의 로딩 성능을 향상시킬 수 있습니다. 그러나 스크립트를로드하려면 추가 HTTP 요청이 필요하므로 초기로드 시간이 느려질 수 있습니다. 반면에, HTML 파일에 JavaScript 코드를 직접 배치하면 추가 HTTP 요청이 필요하지 않지만 특히 더 큰 스크립트에 대해 HTML 파일을 지저분하고 유지하기가 더 어려워 질 수 있습니다.

블로킹이 비 블로킹이 Javascript에서 비 블로킹에서 비 블로킹에 대한 비 블로킹은 무엇을 의미합니까? 웹 페이지. 이것은 스크립트를 HTML 문서의 맨 아래에 스크립트를 배치하거나 스크립트 태그에서 비동기 또는 지연 속성을 사용하여 스크립트를 비동기로로드하여 달성됩니다. 브라우저가 스크립트를로드하고 실행하는 동안 나머지 웹 페이지를 계속로드하고 렌더링 할 수 있기 때문에 비 블로킹 스크립트는 웹 페이지의로드 성능을 향상시킬 수 있습니다.

브라우저가 여러 스크립트가 Async 또는 Defer Attributes로 여러 스크립트를 처리하는 방법

브라우저가 Async로드로 표시 될 때 어떻게 브라우저가 여러 스크립트를 처리 하는가? 특별한 순서로 사용 가능합니다. 이는 HTML 문서의 상단에 더 작거나 더 가까운 스크립트가 다른 것보다 먼저 실행될 수 있음을 의미합니다. 여러 스크립트에 DEFER 속성이 표시되면 브라우저는 HTML 문서에 표시된 순서대로로드하지만 나머지 웹 페이지가로드 될 때까지 실행을 방어합니다. 이렇게하면 스크립트가 비동기로로드 되더라도 스크립트가 올바른 순서로 실행되도록합니다. 동일한 스크립트 태그에서 Async를 사용하고 속성을 연기 할 수 있습니까?

예, 동일한 스크립트 태그에서 Async 및 Defer 속성을 모두 사용할 수 있습니다. 그러나 그들의 행동은 브라우저에 달려 있습니다. 두 속성을 모두 지원하는 최신 브라우저에서 Async 속성은 연기 속성보다 우선합니다. 이는 스크립트가 사용 가능한 즉시 비동기식으로로드 및 실행됩니다. 연기 속성은 무시됩니다. 비동기 속성을 지원하지 않는 구형 브라우저에서, 연기 속성이 대신 대신 사용되는 경우,

Async 또는 Defer Attribute가있는 스크립트가로드되지 않으면 어떻게 될까요?

Async 또는 연기가있는 스크립트가로드되지 않으면 브라우저는 다음 작업으로 간단히 움직일 것입니다. 스크립트가로드되지 않더라도 웹 페이지가로드 및 렌더링을 계속할 수 있으므로 비동기 또는 연기를 사용하는 장점 중 하나입니다. 그러나 스크립트로드 오류를 올바르게 처리하는 것이 중요합니다. 스크립트가로드되지 않더라도 웹 페이지가 올바르게 작동하는지 확인하는 것이 중요합니다.

브라우저가 Async를 지원하는지 또는 지연 속성을 지원하는지 확인할 수 있습니까?

브라우저가 Javascript에서 기능 탐지를 통해 Async 또는 Defer 속성을 지원할 수 있는지 확인할 수 있습니다. 여기에는 스크립트 요소에 비동기 또는 연기 속성이 존재하는 경우 테스트가 포함됩니다. 속성이 존재하면 브라우저가 속성을 지원합니다. 그렇지 않은 경우 브라우저는 속성을 지원하지 않습니다.

인라인 스크립트와 함께 비동기 또는 지연 속성을 사용 할 수 있습니까?

아니요, 비동기 및 지연 속성은 외부 스크립트에서만 작동합니다. 그들은 인라인 스크립트에 영향을 미치지 않습니다. 인라인 스크립트를 비동기로로드하고 실행하려면 JavaScript를 사용하여 스크립트 요소를 동적으로 생성하는 것과 같은 다른 기술을 사용해야합니다.

성능 측면에서 Async, Defer 및 Non 블로킹의 차이점은 무엇입니까?

세 가지 기술 모두-ASYNC, DEFER, ASYNC, ASYNC, DEFER를 개선하기위한 것입니다. 스크립트가로드 및 실행되는 방법. Async 속성은 스크립트를 사용할 수있는 즉시로드하고 실행합니다. 나머지 웹 페이지가로드되기를 기다리지 않습니다. DEFER 속성은 또한 스크립트를 비동기 적으로로드하지만 나머지 웹 페이지가로드 될 때까지 실행을 방어합니다. 비 블로킹 스크립트는 웹 페이지의 렌더링을 차단하지 않고로드 및 실행됩니다. 사용하기 가장 좋은 기술은 웹 페이지 및 스크립트의 특정 요구에 따라 다릅니다.

위 내용은 HTML5 비동기 및 연기로 비 블로킹 JavaScript를로드하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!