Как работает Ракетный загрузчик CloudFlare (и как разработчик может обеспечить совместимость)?

CloudFlare имеет совершенно новаторскую технологию под названием Rocket Loader (как на бесплатных, так и на платных учетных записях). Но как это работает?

У них есть пара страницы , что

Как это возможно?

Конечно, он не может просто изменить теги <script> , чтобы использовать async = "true" или defer = "true" , поскольку это сломал бы несколько вещей ...

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

И как разработчик, есть ли что-нибудь еще, о чем мне нужно знать, чтобы мои сайты /скрипты /плагины оставались совместимыми с Rocket Loader?

27 голосов | спросил Simon East 4 AMpFri, 04 Apr 2014 10:53:04 +040053Friday 2014, 10:53:04

1 ответ


22

CloudFlare описывает Rocket Loader как это ...

  

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

     

Rocket Loader выполняет кучу вещей:

     
  1. Он гарантирует, что все скрипты на вашей странице не будут блокировать загрузку содержимого вашей страницы;
  2.   
  3. Загружает все скрипты на вашей странице, в том числе сторонние скрипты, асинхронно;
  4.   
  5. Связывает все запросы скриптов в один запрос, по которому может передаваться несколько ответов;
  6.   
  7. Использует LocalStorage для большинства браузеров и почти всех смартфонов для более разумного хранения сценариев, поэтому они не проверяются, если   необходимо.
  8.   

Итак, это довольно круто, но как оно достигается?

Из того, что я прочитал и обнаружил при запуске CloudFlare + Rocket Loader на моем собственном сайте, он работает примерно так ...

  1. Когда HTML-страница запрашивается с сервера CloudFlare, после загрузки ее с исходного веб-хоста, она перезаписывает все теги скриптов в <script type = " текст /rocketscript "& GT;

  2. Браузеры естественно игнорируют теги сценария, поскольку они не понимают формат «text /rocketscript»

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

  4. Этот скрипт анализирует страницу для любых скриптов с типом «text /rocketscript».

  5. Затем он проверяет, существует ли какой-либо из этих скриптов в локальном хранилище браузера. Если нет, он затем делает запрос AJAX для них (объединенный в логические пакеты) из CloudFlare CDN. Я не совсем уверен, как это работает, как сгруппировать скрипты вместе.

  6. Серверы CDN собирают сценарии (которые могут поступать с нескольких разных серверов: Google, Twitter, Facebook, других CDN и т. д.), либо из их кеша, либо из исходных серверов, а затем объединяют, GZIP перед отправкой их обратно в браузер.

  7. Этот виртуальный браузер , на который они ссылаются, должен быть просто JavaScript, который затем запускает каждый из этих скриптов в правильном порядке, делая такие вещи, как:

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

Я действительно шокирован тем, что он работает (хотя возможно он не всегда ). Но при нормальных обстоятельствах я не думаю, что разработчикам нужно сделать что-то особенное, чтобы сделать их JavaScript совместимым.

Это вики сообщества, поэтому, пожалуйста, отредактируйте и добавьте любую дополнительную информацию, которая отсутствует.

ответил pxwise 25 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 25 Sep 2014 21:30:14 +0400 2014, 21:30:14

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132