IE의 가장 오래된 버전(6 이하)에서는 불행히도 비동기 로딩이 작동하지 않지만 실제로 더 이상 그러한 사용자가 없습니다. 다른 모든 브라우저 및 서비스는 최신 버전을 성공적으로 사용합니다. 빠른 다운로드웹 페이지.

비동기 및 지연 - JavaScript 로딩 전략

JavaScript는 모든 최신 웹 응용 프로그램의 필수적인 부분이며 로드에 사용하기로 선택한 전략은 바로 그 응용 프로그램의 성능에 직접적인 영향을 미칩니다. 이 기사에서는 각 접근 방식의 중요한 차이점, 성능 영향과 함께 장단점, 페이지 상호 작용 및 로드 시간을 최적화하는 방법을 이해하려고 노력할 것입니다.

시연하기 위해 다음과 같은 외부 종속성으로 구성된 웹사이트를 만들 것입니다. 파일 다운로드 시간은 이에 정비례하므로 각 파일 크기에 특히 주의하십시오.

• HTML - 페이지 ~ 1MB. JavaScript의 일부 동적 출력을 표시하기 위한 실제 마크업/컨텐츠를 포함합니다.
• 이미지 - image1.png ~ 5Mb
• JavaScript - file1.JS ~3MB는 javascript의 핵심(메인 파일)이며 HTML 파싱에 의존합니다. 동적 콘텐츠를 표시하거나 페이지에 반응/각도 구성 요소를 마운트하는 데 필요합니다.
• JavaScript - file2.js ~460B - DOM과 상호 작용하는 작고 독립적인 자바 스크립트 파일입니다.
• JavaScript - file3.js ~ 1.5MB는 보조 js 파일이며 우선 순위가 낮은 코드를 실행하기 위해 file1.js에 의존합니다. 이 코드는 페이지 렌더링 및 사용자 상호 작용에 즉시 필요하지 않습니다. 그것은 아이콘을 보여줍니다 소셜 네트워크, 코멘트, 온라인 도움말, 일부 분석 작업 실행 등

접근법-1 [헤드 섹션의 스크립트]

첫 번째 경우에는 모든 스크립트 태그를 HTML의 헤드 섹션에 로드합니다. 아래는 네트워크 탭 분석 스크린샷입니다. 크롬 페이지, 사용자 상호 작용을 준비합니다.

장점:

다양한 JS 파일의 코드 실행 순서는 파일이 HTML에 포함된 순서대로 유지됩니다. 현재 예제에서는 file2와 file3이 file1보다 먼저 로드되어도 실행 순서는 정확합니다.

빼기:

이 시나리오에서 HTML 구문 분석은 헤드 섹션의 3개 스크립트가 모두 로드, 구문 분석 및 실행될 때까지 일시 중지됩니다. 비어 있는 흰색 화면 HTML 파일이 이미 로드되었지만 [분석되지 않은] 경우에도 사용자에게 표시됩니다. 이것은 확실히 사용성에 좋지 않습니다.

DOM이 아직 준비되지 않았기 때문에 위의 스크립트 중 어느 것도 HTML 페이지에 액세스/조작할 수 없습니다. 중 하나 가능한 해결책이 문제를 처리하는 방법은 DOMContentLoaded 이벤트를 수신한 다음 그 후에 코드를 실행하는 것입니다. DOMContentLoaded 이벤트는 스타일시트, 이미지 또는 이미지 로드가 완료될 때까지 기다리지 않고 원본 HTML 문서가 완전히 로드되고 구문 분석되면 시작됩니다.

접근법-2 [마지막 스크립트]

첫 번째 접근 방식에서 직면한 2가지 문제를 극복하기 위해 body 태그의 맨 아래에 3개의 스크립트를 모두 로드해 보겠습니다.

장점: HTML은 스크립트가 로드되기 전에 구문 분석되므로 사용자는 스크립트를 기다리지 않고 실제 내용을 바로 볼 수 있습니다.

모든 스크립트는 HTML을 파싱한 후에 실행되기 때문에 모든 스크립트가 DOM에 액세스하여 조작할 수 있습니다. 스크립트 실행 순서가 유지됩니다.

빼기:

성능 자체는 없습니다.

접근법-3 [Async 속성 사용]

HTML5에는 HTML 구문 분석에 영향을 주지 않고 다른 스레드에서 적절한 스크립트 파일을 병렬로 로드하는 데 도움이 되는 비동기 스크립트 속성이 도입되었습니다.

그러나 해당 스크립트는 HTML 구문 분석이 완료되었는지 여부에 관계없이 로드가 완료되는 즉시 구문 분석되고 실행되며 해당 특정 지점까지 DOM 요소에 대한 참조를 갖게 됩니다.

여기에서 file2.js가 이전에 로드되었음을 분명히 알 수 있습니다. HTML 파일. 그러나 브라우저가 file2를 다운로드하는 동안 HTML 구문 분석을 일시 중지하지 않았으므로 실행될 때까지 동적 콘텐츠를 삽입하기 위한 html 자리 표시자에 대한 참조가 있었습니다.

장점:스크립트가 다른 스레드에서 로드되기 때문에 HTML 구문 분석이 일시 중지되지 않고 사용자는 흰색 빈 화면 대신 실제 콘텐츠를 볼 수 있습니다. 주요 성능 향상, 즉 DOMContentLoaded 시간은 47.68초에서 21.12초로 감소했으며 ~55% 향상을 나타냅니다.

빼기:

JS 실행 순서가 유지되지 않습니다. HTML 내에 포함된 스크립트 시퀀스가 ​​아니라 적절한 로드 순서로 실행됩니다. 브라우저 지원 - 이전 웹 브라우저(예: IE 9 이하)에서는 지원되지 않습니다.

DOM 요소를 사용할 수 있기 전에 JS가 로드되면 어떻게 됩니까?오류가 발생합니다.

참고: 본문 섹션의 맨 아래에 비동기 속성이 있는 스크립트를 배치하는 것은 쓸모가 없으며 approach-2와 동일합니다.

접근법-4 [Defer 속성 사용]

defer 속성은 HTML 구문 분석이 완료된 후에만 스크립트가 실행되도록 합니다. 하나는 매우 중요한 포인트여기서 고려해야 할 사항은 Chrome이 아직 지연을 지원하지 않으며 DOMContentLoaded 기간에 영향을 미치지 않는다는 것입니다. 그러나 HTML 구문 분석이 끝나면 스크립트를 실행합니다.

장점:

스크립트 가져오기 순서는 유지됩니다. 따라서 file3.js는 이전에 file3을 로드했더라도 다운로드가 완료되고 file1이 실행된 후에만 실행됩니다.

브라우저 지원 - 최고의 지원 async 속성과 비교한 브라우저, 즉 IE v6-9에서 부분적으로 지원됨

스크립트는 전체 HTML이 구문 분석된 후에만 실행되기 때문에 DOM에 액세스할 수 있습니다.

빼기:

원래 지연될 줄 알았는데 최고의 선택 async보다 있지만 나중에 Chrome이 아직 [버전 71.0.3578.98] 지원하지 않고 DOMContentLoaded 기간에 영향을 미치지 않는다는 것을 발견했습니다.

그러나 성능이 크게 향상되어 Firefox에서 예상대로 작동합니다.

결론

의존하는 타사 라이브러리에 대한 async 속성이 있는 헤드 섹션에 스크립트 태그를 배치하는 것이 좋습니다. 구글 애널리틱스, Google reCAPTCHA 또는 DOM 액세스가 필요하지 않은 모든 것. 해당 스크립트는 병렬로 로드되지만 즉시 실행되기 때문입니다.

헤드 섹션에 로드된 다른 모든 스크립트에 대해 defer를 사용합니다. 이 스크립트도 병렬로 로드되지만 HTML 구문 분석이 완료되고 DOM에 액세스/조작할 준비가 된 후에만 실행됩니다.

비동기 스크립트 내에서 DOMContentLoaded 리스너 조합을 사용하여 나중에 기능을 실행할 수도 있습니다. 의견과 발견 사항을 댓글에 남겨주시면 기꺼이 논의하겠습니다.

이 자료의 저자는 I - Yuriy Pakholkov입니다. Java, C++, C#으로 프로그램 작성(컨설팅 포함) 및 웹사이트 제작 서비스를 제공합니다. 저는 CMS OpenCart, WordPress, ModX 및 자체 작성 사이트에서 작업합니다. 또한 JavaScript, PHP, CSS, HTML로 직접 작업합니다. 즉, 귀하의 사이트를 완성하거나 웹 프로그래밍을 도울 수 있습니다.

안녕하세요 친구! JavaScript 로딩이 웹사이트 성능에서 가장 큰 병목 현상 중 하나라는 것을 알고 계셨습니까? 오늘 저의 주요 임무는 스크립트가 무엇이며 사이트의 속도와 성능에 어떤 영향을 미치는지 설명하는 것입니다.

스크립트 태그를 로드하는 브라우저는 스크립트가 로드되고 실행될 때까지 페이지 렌더링을 중지합니다. 페이지가 차단되고 브라우저가 몇 초 동안 사용자 작업에 응답하지 않습니다. 지연 시간은 여러 요인에 따라 다릅니다.

• 구성 ,
• 인터넷 연결 속도,
• 파일 크기 등...

이러한 이유로 Google PageSpeed ​​​​Insights 웹사이트 속도 분석기는 페이지 상단에서 차단 JavaScript 코드를 제거할 것을 권장합니다. 예를 들어 닫는 태그 앞과 같이 사이트 하단에 스크립트를 배치하는 것이 좋습니다.또는 비동기 로딩 설정.

스크립트 코드가 사이트 상단의 표시에 영향을 미치는 경우 별도의 파일로 가져오지 말고 HTML에 직접 삽입하십시오.

JS는 사이트의 콘텐츠를 변경하고 다른 URL로 리디렉션할 수도 있습니다. 이 경우 문서 끝에 스크립트를 포함하면 상단에서 새 요소를 로드하거나 기존 요소를 변경하여 페이지가 "트위치"됩니다.

스크립트 태그에 async 및 defer 속성 적용

비동기 및 지연이 무엇인지 이해합시다. 자바스크립트 작업그리고 비동기와 지연 속성의 근본적인 차이점은 무엇입니까? 그러나 먼저 문서 처리 순서를 고려하십시오. 정상적인 연결스크립트 태그.

에 좋은 예나는 다음을 사용할 것이다 관습:

- 페이지 처리
- 스크립트 로딩
- 스크립트 실행

따라서 처리 순서는 다음과 같습니다.

스크립트가 로드되고 실행되는 동안 HTML 코드의 구문 분석이 중단된 후 계속됩니다. 웹 페이지 표시에 지연이 있습니다.

연기 속성

defer 속성을 사용하면 브라우저가 추가 페이지 처리를 중지하지 않고 병렬로 js 파일 로드를 시작할 수 있습니다. 완전한 구문 분석 후에 실행됩니다. 개체 모델 document(영어 Document Object Model, DOM으로 약칭)에서 가져온 반면 브라우저는 파일 연결 순서에 따라 일관성을 보장합니다.

비동기 속성

async 속성에 대한 지원은 HTML5에서 도입되었으며 브라우저가 js 파일을 병렬로 로드하고 페이지의 나머지 부분이 처리될 때까지 기다리지 않고 로드 직후 실행할 수 있습니다.

처리 순서도:

이것은 비동기 다운로드입니다. 이 속성은 문서 표시에 큰 영향을 주지 않는 스크립트에 권장됩니다. 여기에는 통계 수집 카운터(Google Analytics, Yandex Metrica), 광고 네트워크 코드(Yandex Advertising Network, 구글 애드센스), 소셜 미디어 버튼 등.

웹사이트 로딩 속도는 Google의 순위 요소 중 하나입니다.

비동기 JavaScript 연결은 대기 시간을 제거하여 페이지 로드 시간을 줄입니다. 이와 함께 예를 들어 .js 파일을 사용하여 js 파일을 하나로 압축하고 병합하는 것이 좋습니다. 빠른 웹사이트를 좋아하는 사용자 😎

플러그형 스크립트(JavaScript)는 HTML 코드의 로드를 차단합니다. 브라우저(파서)가 태그에 도달하면