CloudFlare의 로켓 로더는 실제로 어떻게 작동하며 개발자는 어떻게 호환성을 보장 할 수 있습니까?

CloudFlare 에는 Rocket Loader (무료 및 유료 계정 모두) 라는 획기적인 기술이 있습니다. 그러나 실제로 어떻게 작동합니까?

그들은이 부부 의 페이지 기술을 설명하는 ,하지만 기술적 인 세부 사항을 많이. 주요 기능 중 하나는 모든 자바 스크립트를 비 블로킹 방식으로 (비동기 적으로)로드 하는 것입니다. 이는 스크립트가로드되고 실행될 때까지 기다리지 않고 HTML / CSS를 렌더링 할 수 있음을 의미합니다.

어떻게 가능합니까?

확실히 그것은 단순히 모든 변경할 수 없습니다 <script>사용에 태그를 async="true"하거나 defer="true"이 같은 여러 문제를 일으킬 것입니다 ...

1. 스크립트는 여전히 올바른 순서로로드해야합니다 (예 : jQuery 라이브러리가로드 될 때까지 jQuery 플러그인을로드 할 수 없음).
2. document.write()이 스크립트의 호출은 작동해야합니다 ( 일반적으로 비동기 스크립트에서는 아무것도하지 않습니다 ).
3. DOMContentLoaded 이벤트는 어떻습니까? 이 스크립트 가 트리거 된 후 일부 스크립트가로드되면 이벤트 핸들러가 트리거되지 않습니까?

그리고 개발자로서 내 사이트 / 스크립트 / 플러그인이 로켓 로더와 호환되도록하기 위해 알아야 할 다른 것이 있습니까?

CloudFlare는 이와 같은 로켓 로더를 설명 합니다 ...

Rocket Loader는 window.onload 이후에 JavaScript 코드를 안전하게 실행할 수있는 경량 가상 브라우저와 결합 된 범용 비동기 JavaScript 로더입니다.

로켓 로더는 여러 가지 작업을 수행합니다.

1. 페이지의 모든 스크립트가 페이지 내용의로드를 차단하지 않도록합니다.
2. 타사 스크립트를 포함하여 페이지의 모든 스크립트를 비동기 적으로로드합니다.
3. 모든 스크립트 요청을 여러 요청을 스트리밍 할 수있는 단일 요청으로 묶습니다.
4. 대부분의 브라우저와 거의 모든 스마트 폰에서 LocalStorage를 사용하여 스크립트를보다 지능적으로 저장하여 필요한 경우가 아니면 다시 가져 오지 않습니다.

그래서 그것은 멋지지만 어떻게 그것을 달성합니까?

내 사이트에서 CloudFlare + Rocket Loader를 실행하여 읽고 발견 한 내용에서 대략 다음과 같이 작동합니다.

1. CloudFlare 서버에서 HTML 페이지를 요청하면 원래 웹 호스트에서 HTML 페이지를로드 한 후 모든 스크립트 태그를 <script type="text/rocketscript">

2. 브라우저는 "text / rocketscript"형식을 이해하지 못하기 때문에 스크립트 태그를 자연스럽게 무시합니다.

3. CloudFlare는 cloudflare.min.js마법을 수행 하는 추가 스크립트를 페이지에 삽입합니다 ( 여기서 형식화 된 버전 참조 ). 이것은 브라우저가 처음에 (비동기 적으로)로드 한 유일한 스크립트입니다.

4. 이 스크립트는 "text / rocketscript"유형의 스크립트에 대한 페이지를 구문 분석합니다.

5. 그런 다음 이러한 스크립트 중 하나가 이미 브라우저의 로컬 저장소에 있는지 확인합니다. 그렇지 않은 경우 CloudFlare CDN에서 AJAX 요청 (논리 번들로 결합)을 요청합니다. 스크립트를 그룹화하는 방법이 어떻게 작동하는지 잘 모르겠습니다.

6. CDN 서버는 캐시 또는 원본 서버에서 스크립트 (Google, Twitter, Facebook, 기타 CDN 등의 여러 서버에서 제공 될 수 있음)를 수집 한 다음 다시 보내기 전에이를 결합, 축소 및 GZIP합니다. 브라우저에.

7. 그들이 참조하는 이 가상 브라우저 는 단순히 JavaScript와 같은 스크립트를 실행하여 다음과 같은 작업을 수행하는 각 스크립트를 올바른 순서로 실행해야합니다.

   • document.write()페이지의 올바른 위치로 해당 컨텐츠를 호출 하고 주입합니다. (아마도 브라우저 write()기능을 사용자 정의 기능 으로 덮어 써서 ?)
   • DOMContentLoaded 및 load 와 같은 이벤트를 다시 트리거합니다 .

(아마도 있지만, 사실은 꽤 작동하는지 충격을 해요 그것은 하지 않습니다 항상 ). 그러나 정상적인 상황에서는 개발자가 JavaScript 호환을 위해 특별한 조치를 취할 필요가 없다고 생각합니다.

커뮤니티 위키이므로 누락 된 세부 사항을 편집하고 추가하십시오.