Rocket Loader của CloudFlare thực sự hoạt động như thế nào (và làm thế nào nhà phát triển có thể đảm bảo khả năng tương thích)?

31

CloudFlare có một công nghệ đột phá mang tên Rocket Loader (cả trên tài khoản miễn phí và trả phí). Nhưng làm thế nào để nó thực sự hoạt động?

Họ có một vài các trang mà mô tả công nghệ , nhưng không có nhiều chi tiết kỹ thuật. Một tính năng quan trọng là nó làm cho tất cả tải Javascript theo kiểu không chặn (không đồng bộ) , đây là một kỳ tích không thể tin được! Điều này có nghĩa là HTML / CSS có thể được hiển thị mà không cần chờ tập lệnh tải và chạy.

Sơ đồ nạp tên lửa CloudFlare

Làm thế nào là có thể?

Chắc chắn nó không thể đơn giản thay đổi tất cả <script>các thẻ để sử dụng async="true"hoặc defer="true"vì điều này sẽ phá vỡ một số thứ ...

  1. Các tập lệnh vẫn cần tải theo đúng thứ tự (ví dụ: bạn không thể tải các plugin jQuery cho đến khi thư viện jQuery được tải.)
  2. document.write()các lệnh gọi trong các tập lệnh này cần phải hoạt động ( rõ ràng chúng không làm gì trong các tập lệnh async điển hình ).
  3. Điều gì về sự kiện DOMContentLoaded? Nếu một số tập lệnh được tải sau khi điều này được kích hoạt, trình xử lý sự kiện của chúng không bị kích hoạt?

Và là một nhà phát triển, tôi còn cần phải biết gì nữa để đảm bảo các trang web / tập lệnh / plugin của tôi vẫn tương thích với Rocket Loader không?

javascript  cdn  optimization  cloudflare 
— Đông Simon
nguồn

Câu trả lời:

26

CloudFlare mô tả Rocket Loader như thế này ...

Rocket Loader là trình tải JavaScript không đồng bộ có mục đích chung được kết hợp với trình duyệt ảo nhẹ, có thể chạy bất kỳ mã JavaScript nào sau window.onload một cách an toàn.

Rocket Loader thực hiện một loạt điều:

  1. Nó đảm bảo rằng tất cả các tập lệnh trên trang của bạn sẽ không chặn nội dung trang của bạn tải;
  2. Tải tất cả các tập lệnh trên trang của bạn, bao gồm các tập lệnh của bên thứ ba, không đồng bộ;
  3. Gói tất cả các yêu cầu tập lệnh thành một yêu cầu mà qua đó nhiều phản hồi có thể được truyền phát;
  4. Sử dụng LocalStorage trên hầu hết các trình duyệt và gần như tất cả các điện thoại thông minh để lưu trữ tập lệnh thông minh hơn để chúng không bị tải lại trừ khi cần thiết.

Thật tuyệt, nhưng làm thế nào để đạt được nó?

Từ những gì tôi đã đọc và phát hiện ra khi chạy CloudFlare + Rocket Loader trên trang web của riêng tôi, nó hoạt động gần như thế này ...

  1. Khi một trang HTML được yêu cầu từ máy chủ CloudFlare, sau khi tải nó từ máy chủ web gốc, nó sẽ viết lại tất cả các thẻ script vào <script type="text/rocketscript">

  2. Trình duyệt tự nhiên bỏ qua các thẻ script vì chúng không hiểu định dạng "text / rocketscript"

  3. CloudFlare cũng đưa một cloudflare.min.jstập lệnh bổ sung vào trang thực hiện phép thuật ( xem phiên bản được định dạng ở đây ). Đây là tập lệnh duy nhất được trình duyệt tải ban đầu (không đồng bộ).

  4. Tập lệnh này phân tích trang cho bất kỳ tập lệnh nào có loại "văn bản / tên lửa".

  5. Sau đó, nó sẽ kiểm tra xem có bất kỳ tập lệnh nào trong số này đã tồn tại trong bộ nhớ cục bộ của trình duyệt hay không. Nếu không, nó sẽ tạo một yêu cầu AJAX cho chúng (được kết hợp trong các gói logic) từ CDN của CloudFlare. Tôi không chắc chắn làm thế nào nó hoạt động ra làm thế nào để nhóm các kịch bản lại với nhau.

  6. Các máy chủ CDN thu thập các tập lệnh (có thể đến từ nhiều máy chủ khác nhau: Google, Twitter, Facebook, các CDN khác, v.v.), từ bộ đệm của họ hoặc từ các máy chủ gốc, sau đó kết hợp, thu nhỏ và GZIP chúng trước khi gửi lại vào trình duyệt.

  7. Thứ trình duyệt ảo mà họ đề cập đến chỉ đơn giản là một số JavaScript sau đó chạy từng đoạn script này theo đúng thứ tự, thực hiện những việc như:

    • Bắt tất cả các cuộc gọi đến document.write()và đưa nội dung đó vào đúng vị trí trên trang. (Có thể bằng cách ghi đè write()chức năng của trình duyệt bằng một tùy chỉnh?)
    • Đang tải lại các sự kiện như DOMContentLoaded và tải .

Tôi thực sự khá sốc khi nó hoạt động (mặc dù có lẽ nó không luôn luôn như vậy ). Nhưng trong các trường hợp thông thường, tôi không nghĩ các nhà phát triển cần phải làm gì đặc biệt để làm cho JavaScript của họ tương thích.

Đây là một wiki cộng đồng, vì vậy vui lòng chỉnh sửa và thêm bất kỳ chi tiết bổ sung nào còn thiếu.

— 99%
nguồn
2
Như đã lưu ý ở trên, điều này có thể dẫn đến các vấn đề và do đó có thể cần phải bị vô hiệu hóa, vì vậy hãy kiểm tra trước khi triển khai.
— dan
Các trình duyệt ảo có thể là một DOM bóng giống như những người sử dụng bởi các khuôn khổ hiện đại như Backbone, góc, Ember, Knockout vv
— kaiser
3
Nếu chúng ta đi đến bất kỳ trang kích hoạt đám mây nào có bật tên lửa này, chúng ta có thể thấy trong bảng điều khiển document.writethực sự đã bị thay đổi. Tôi nhận được function (b,d,e,g,h){if(u.getActivated())return c.apply(f,arguments);try{return j[a].apply(f,arguments)}catch(i){return j[a](b,d,e,g,h)}}như là giá trị chuỗi. Vì vậy, giả thuyết document.writeđã được ghi đè là thực sự chính xác.
— user3459110
Bản dịch tiếng Ý của bài đăng trên, nếu có ai đó bị giới thiệu: klayz.com/community/,
— Glauco Zega
5
Một điều tôi nhận thấy là trình nạp tên lửa sử dụng document.write. Kể từ Chrome 53, DevTools đưa ra các cảnh báo cho các câu lệnh document.write () có vấn đề và việc sử dụng nó gây ra cảnh báo. Trên thực tế, việc sử dụng document.write () của CloudFlare sẽ bị Chrome 53 + chặn trên kết nối 2G. Xem Nhà phát triển Chrome để biết thêm thông tin dành cho nhà phát
— triển.google.com/web/updates/2016/08/ Kẻ
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.