Як насправді працює ракетний навантажувач CloudFlare (і як розробник може забезпечити сумісність)?

CloudFlare має досить новаторську технологію під назвою Rocket Loader (як на безкоштовних, так і на платних рахунках). Але як це насправді працює?

У них є кілька з сторінок , які описують технологію , але не багато технічних деталей. Однією з головних особливостей є те, що це робить все завантаження Javascript безблоковим (асинхронно) , що є досить неймовірним подвигом! Це означає, що HTML / CSS можна візуалізувати, не чекаючи завантаження та запуску сценаріїв.

Як це можливо?

Звичайно , це не може просто змінити все <script>тег для використання async="true"або defer="true"як це порушило б кілька речей ...

1. Сценарії все ще потрібно завантажити у правильному порядку (наприклад, ви не можете завантажити плагіни jQuery, доки бібліотека jQuery не завантажиться.)
2. document.write()виклики в цих сценаріях повинні функціонувати ( мабуть, вони не роблять нічого в типових сценаріях асинхронізації ).
3. Що з подією DOMContentLoaded? Якщо деякі сценарії завантажуються після цього, чи розпорядники подій не спрацьовують?

І як розробник, чи потрібно ще щось знати, щоб мої сайти / сценарії / плагіни залишалися сумісними з Rocket Loader?

CloudFlare описує Ракетно Loader , як це ...

Rocket Loader - це асинхронний навантажувач JavaScript загального призначення в поєднанні з легким віртуальним браузером, який може безпечно запускати будь-який код JavaScript після window.onload.

Ракетний навантажувач робить купу речей:

1. Це гарантує, що всі скрипти на вашій сторінці не заблокують завантаження вмісту вашої сторінки;
2. Завантажує всі сценарії на вашу сторінку, включаючи сторонні сценарії, асинхронно;
3. З’єднує всі запити сценарію в один запит, над яким можна передавати декілька відповідей;
4. Використовує LocalStorage у більшості браузерів та майже на всіх смартфонах для більш розумного зберігання скриптів, щоб вони не перезавантажувались, якщо не потрібно.

Так це досить круто, але як цього досягти?

З того, що я прочитав і виявив із запуску CloudFlare + Rocket Loader на своєму власному сайті, він працює приблизно так ...

1. Коли на сервер CloudFlare запитується HTML-сторінка, після завантаження її з початкового веб-хоста він переписує всі теги скриптів у <script type="text/rocketscript">

2. Браузери, природно, ігнорують теги сценаріїв, оскільки вони не розуміють формат "текст / rocketscript"

3. CloudFlare також вводить додатковий cloudflare.min.jsскрипт на сторінку, яка виконує магію ( див. Відформатовану версію тут ). Це єдиний сценарій, спочатку завантажений браузером (асинхронно).

4. Цей скрипт аналізує сторінку для будь-яких сценаріїв з типом "текст / rocketscript".

5. Потім він перевіряє, чи існує якийсь із цих сценаріїв у локальній пам’яті браузера. Якщо ні, то він робить запит AJAX для них (об'єднаний у логічні пакети) з CloudFlare CDN. Я не зовсім впевнений, як це працює, як згрупувати сценарії разом.

6. Сервери CDN збирають скрипти (які можуть надходити з декількох різних серверів: Google, Twitter, Facebook, інші CDN тощо), або з їх кешу, або з початкових серверів, а потім комбінують, мінімізують і GZIP, перш ніж надсилати їх назад до браузера.

7. Ця віртуальна версія браузера , на яку вони посилаються, повинна бути просто JavaScript, який потім запускає кожен із цих сценаріїв у правильному порядку, виконуючи такі дії, як:

   • Перехоплення всіх дзвінків document.write()та введення цього вмісту у правильне місце на сторінці. (Можливо, замінивши функцію браузера write()на користувальницьку?)
   • Повторні дії, такі як DOMContentLoaded та завантажуються .

Я насправді дуже вражений тим, що це працює (хоча, можливо, це не завжди ). Але за звичайних обставин, я не думаю, що розробникам не потрібно робити нічого особливого, щоб зробити їх JavaScript сумісним.

Це вікі спільноти, тому будь ласка, відредагуйте та додайте будь-яку додаткову деталь, яка відсутня.