polyfill 및 다른 스크립트에 설정을 지정하면 순서대로로드됩니다.

Question

polyfill.io를 사용하여 polyfill 약속을하고 이전 클라이언트를 가져옵니다. 우리는 비동기의 사용을 권장하고 polyfill 서비스에서로드 태그에 속성을 연기

: their website 그들은 스크립트가 현대적인 코드를 실행하기 전에 완전히로드되었는지 확인하는 스크립트 로더 또는 콜백을 사용하는 것이 좋습니다 비 차단 방식으로로드하면 폴리 필이로드가 완료되기 전이나 후에 자신의 코드가 실행되는지 여부를 알 수 없습니다.

당신이 당신의 자신의 코드를 실행하려고하기 전에 polyfills이 존재하고 있는지 확인하려면, 당신은 더 복잡한 스크립트 로더를 사용 https://cdn.polyfill.io 스크립트 태그에 onLoad 핸들러를 첨부하거나 단순히을 평가하기 위해 우리의 콜백 인수를 사용할 수 있습니다 이미 그들은 여전히 ​​브라우저가 '아무튼하지 않는 한 그들은 (문서에 나타나는 순서대로 비동기로드되는 것을 보장

그러나 두 스크립트에 defer을 설정하지 않아야 다음 polyfills이 가로드 글로벌 콜백 지원 연기)? 스크립트로드가 발생할 때 MDN documentationdefer 속성에 따라

<script src="https://cdn.polyfill.io/v2/polyfill.min.js" defer></script> 
<script src="modernscript.js" defer></script> 

Answer 1

는 페이지 로딩 시간의 점을 정의합니다.

당신이 볼 수 citated 한 문서에서

:

은 당신이 당신의 자신의 코드를 실행하려고하기 전에 polyfills가 존재 확인하려면 당신은 https://cdn.polyfill.io에 onLoad 핸들러을 첨부 할 수 있습니다 스크립트 태그 (이 답변에 댓글로 지적) defer 스크립트 (1,실행됩니다 경우가 분명하게 볼 수 없기 때문에

) 가능한 브라우저 구현 차이점을 염두에 두십시오. 이러한 동작에 의존하는 것이 최선의 방법이 아닙니다.

1. 는
2. 처음 <script> 태그에 제안 onload 처리기를 추가하고이 내부 코드를로드하기 위해 동적 <script> 태그를 만들 수 (예를 들어 RequireJS) 일부 스크립트 로더를 사용하려면 :

   그래서 더 좋은 방법이 될 것입니다 처리기

3. 코드를 Promise polyfill과 함께 묶거나 (수동으로 또는 webpack과 같은 번들을 사용하여) 단일 묶음으로로드하십시오.