Rocket Loader ของ CloudFlare ใช้งานได้จริงอย่างไร (และนักพัฒนาสามารถมั่นใจได้ถึงความเข้ากันได้) อย่างไร

CloudFlareมีเทคโนโลยีล้ำสมัยที่เรียกว่าRocket Loader (ทั้งในบัญชีฟรีและบัญชีที่ชำระเงินแล้ว) แต่มันใช้งานได้จริงอย่างไร

พวกเขามีคู่ของหน้าเว็บที่อธิบายเทคโนโลยีแต่ไม่มากของรายละเอียดทางเทคนิค หนึ่งในคุณสมบัติที่สำคัญคือมันทำให้การโหลด Javascript ทั้งหมดในแบบที่ไม่มีการบล็อก (แบบอะซิงโครนัส)ซึ่งค่อนข้างเป็นเรื่องที่น่าทึ่ง! นี่หมายความว่า HTML / CSS สามารถแสดงผลได้โดยไม่ต้องรอให้สคริปต์โหลดและรัน

เป็นไปได้อย่างไร?

แน่นอนว่ามันไม่สามารถเปลี่ยน<script>แท็กทั้งหมดเพื่อใช้งานได้async="true"หรือdefer="true"อย่างนี้จะทำให้หลาย ๆ อย่าง ...

1. สคริปต์ยังคงต้องโหลดตามลำดับที่ถูกต้อง (ตัวอย่างเช่นคุณไม่สามารถโหลดปลั๊กอิน jQuery ได้จนกว่าห้องสมุด jQuery จะโหลดแล้ว)
2. document.write()การเรียกใช้สคริปต์เหล่านี้จำเป็นต้องใช้งาน ( เห็นได้ชัดว่าสิ่งเหล่านี้ไม่ได้ทำในสคริปต์ async ทั่วไป )
3. แล้วเหตุการณ์ DOMContentLoaded ล่ะ หากสคริปต์บางตัวโหลดขึ้นหลังจากสิ่งนี้เริ่มทำงานตัวจัดการเหตุการณ์ของพวกเขาจะไม่แสดงผลหรือไม่

และในฐานะนักพัฒนามีอะไรอีกบ้างที่ฉันต้องระวังเพื่อให้แน่ใจว่าไซต์ / สคริปต์ / ปลั๊กอินของฉันยังคงใช้งานได้กับ Rocket Loader?

CloudFlare อธิบาย Rocket Loader เช่น นี้ ...

Rocket Loader เป็นตัวโหลด JavaScript แบบอะซิงโครนัสที่ใช้งานทั่วไปพร้อมกับเบราว์เซอร์เสมือนที่มีน้ำหนักเบาซึ่งสามารถเรียกใช้โค้ด JavaScript ใด ๆ ได้อย่างปลอดภัยหลังจากหน้าต่าง

Rocket Loader ทำสิ่งต่างๆมากมาย:

1. ช่วยให้มั่นใจได้ว่าสคริปต์ทั้งหมดในหน้าของคุณจะไม่ปิดกั้นเนื้อหาของหน้าเว็บจากการโหลด
2. โหลดสคริปต์ทั้งหมดในหน้าของคุณรวมถึงสคริปต์บุคคลที่สามแบบอะซิงโครนัส
3. รวมคำขอสคริปต์ทั้งหมดไว้ในคำขอเดียวที่สามารถตอบสตรีมได้หลายครั้ง
4. ใช้ LocalStorage บนเบราว์เซอร์ส่วนใหญ่และสมาร์ทโฟนเกือบทั้งหมดเพื่อจัดเก็บสคริปต์อย่างชาญฉลาดยิ่งขึ้นเพื่อที่จะไม่ถูกเรียกคืนเว้นแต่จำเป็น

มันเจ๋งดี แต่มันทำได้อย่างไร

จากสิ่งที่ฉันได้อ่านและค้นพบจากการใช้งาน CloudFlare + Rocket Loader บนเว็บไซต์ของฉันเองมันใช้งานได้ประมาณนี้ ...

1. เมื่อมีการร้องขอหน้า HTML จากเซิร์ฟเวอร์ CloudFlare หลังจากโหลดหน้าเว็บจากโฮสต์เว็บต้นทางมันจะเขียนแท็กสคริปต์ทั้งหมดลงใน <script type="text/rocketscript">

2. เบราว์เซอร์จะเพิกเฉยต่อแท็กสคริปต์เนื่องจากพวกเขาไม่เข้าใจรูปแบบ "text / rocketscript"

3. CloudFlare ยังแทรกcloudflare.min.jsสคริปต์เพิ่มเติมลงในหน้าซึ่งใช้เวทย์มนตร์ ( ดูเวอร์ชั่นที่จัดรูปแบบที่นี่ ) นี่เป็นสคริปต์เดียวที่เบราว์เซอร์โหลดครั้งแรก (แบบอะซิงโครนัส)

4. สคริปต์นี้วิเคราะห์หน้าสำหรับสคริปต์ใด ๆ ที่มีประเภท "text / rocketscript"

5. จากนั้นตรวจสอบว่ามีสคริปต์ใด ๆ เหล่านี้อยู่ในที่เก็บข้อมูลภายในของเบราว์เซอร์หรือไม่ หากไม่เป็นเช่นนั้นจะทำการร้องขอ AJAX สำหรับพวกเขา (รวมอยู่ในชุดรวมแบบลอจิคัล) จาก CloudFlare CDN ฉันไม่แน่ใจว่ามันทำงานอย่างไรในการจัดกลุ่มสคริปต์ด้วยกัน

6. เซิร์ฟเวอร์ CDN รวบรวมสคริปต์ (ซึ่งอาจมาจากเซิร์ฟเวอร์ที่แตกต่างกันหลายแห่ง: Google, Twitter, Facebook, CDNs อื่น ๆ ) ไม่ว่าจะเป็นแคชหรือจากเซิร์ฟเวอร์ต้นทางจากนั้นรวมลดขนาดและ GZIP ก่อนส่งกลับ ไปยังเบราว์เซอร์

7. นี้เบราว์เซอร์เสมือนสิ่งที่พวกเขาอ้างถึงก็ต้องมีบาง JavaScript ที่จากนั้นก็วิ่งแต่ละสคริปต์เหล่านี้ในลำดับที่ถูกต้องทำสิ่งต่างๆเช่น:

   • การรับสายทั้งหมดdocument.write()และฉีดเนื้อหานั้นไปยังตำแหน่งที่ถูกต้องบนหน้าเว็บ (อาจเป็นไปได้โดยการเขียนทับwrite()ฟังก์ชั่นของเบราว์เซอร์ด้วยแบบกำหนดเอง?
   • Retriggering เหตุการณ์เช่นDOMContentLoadedและโหลด

จริง ๆ แล้วผมตกใจมากที่มันทำงาน (แม้ว่าบางทีมัน ไม่ได้ เสมอ ) แต่ภายใต้สถานการณ์ปกติฉันไม่คิดว่านักพัฒนาจะต้องทำอะไรเป็นพิเศษเพื่อให้ JavaScript ของพวกเขาทำงานร่วมกันได้

นี่คือวิกิชุมชนดังนั้นโปรดแก้ไขและเพิ่มรายละเอียดเพิ่มเติมที่หายไป