ฉันจะลดต้นทุนในการโหลดไลบรารี JS ขนาดใหญ่ได้อย่างไร

หากฉันใช้ห้องสมุด Javascript ขนาดใหญ่สำหรับหน้าของฉันฉันจะแน่ใจได้อย่างไรว่านี่จะไม่ทำให้การใช้งานเว็บไซต์ของผู้ใช้แย่ลง?

มี 4 สิ่งที่คุณสามารถทำได้

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

และคนอื่น ๆ ได้แนะนำ:

• Apache จะจัดการการบีบอัด (และการแคชเนื้อหาที่ถูกบีบอัด) โดยอัตโนมัติซึ่งทำให้การจัดการไฟล์ง่ายขึ้นอย่างมาก
• การทำให้ JavaScript สามารถแคชได้อย่างถูกต้องจะให้ประโยชน์อย่างมาก
• โดเมน Wildcard (ที่มีหลาย ๆ URI) จะช่วยให้การเชื่อมต่อพร้อมกันมากขึ้น การดึงข้อมูลล่วงหน้าไม่ได้มีไว้สำหรับภาพ /

หากคุณกำลังใช้ไลบรารีทั่วไป (เช่น jQuery, Prototype หรือ Dojo) คุณสามารถถ่ายโอนไฟล์ไปยัง Google และทำให้พวกเขาสามารถให้บริการได้สิ่งนี้จะให้ประโยชน์หลายประการแก่คุณ:

• คุณไม่ต้องกังวลกับการลดขนาดและการซิปเป็นต้น
• ไม่ใช่แบนด์วิธของคุณ
• ไฟล์เหล่านี้มาจากโดเมนที่แตกต่างกันดังนั้นคุณสามารถ (อย่างน้อยบางส่วน) ในการแก้ปัญหาข้อ จำกัด ของการขนาน 2 คำขอต่อชื่อโฮสต์
• หากคุณโชคดีผู้ใช้เยี่ยมชมไซต์อื่น ๆ ที่ใช้ไลบรารีเดียวกันจากผู้ให้บริการรายเดียวกันอยู่แล้วดังนั้นพวกเขาจึงมีอยู่ในแคชเบราว์เซอร์แล้ว

หมายเหตุ: เวอร์ชันที่คุณขอสามารถมีผลกระทบอย่างมากต่อคุณสมบัติการแคช: การขอ jQuery 1.4.2 จะให้ไฟล์ที่สามารถแคชสำหรับคุณเป็นเวลาหนึ่งปี แต่ 1.4 สามารถแคชได้เพียงหนึ่งชั่วโมงเท่านั้น

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

นอกเหนือจากคำตอบข้างต้นคุณสามารถใช้Google Closure Compilerเพื่อบีบอัดและเพิ่มประสิทธิภาพ JS ของคุณโดยอัตโนมัติในขณะที่ทำงานร่วมกับห้องสมุดบุคคลที่สามอื่น ๆ (jQuery, YUI, mootools ฯลฯ )

หากคุณมีองค์ประกอบของหน้าจำนวนหนึ่งและเข้าถึงโดเมนแยกต่างหากคุณสามารถพิจารณาโฮสต์ไฟล์สแตติกทั้งหมดรวมถึงไฟล์ JS ขนาดใหญ่ในโดเมนที่สอง

ดังที่ Steve Souders บันทึกไว้ในบล็อกเว็บไซต์ประสิทธิภาพสูงของเขา -

... ในบางสถานการณ์การใช้ทรัพยากรเป็นจำนวนมากซึ่งมีการดาวน์โหลดบนโดเมนเดียวและแบ่งเป็นหลายโดเมน ฉันเรียกโดเมนนี้ว่าการแบ่งส่วน การทำเช่นนี้ช่วยให้สามารถดาวน์โหลดทรัพยากรเพิ่มเติมแบบคู่ขนานลดเวลาในการโหลดหน้าเว็บโดยรวม

ที่อื่นเขาเขียน ..

เบราว์เซอร์เปิดการเชื่อมต่อในจำนวนที่ จำกัด ต่อโดเมน ... การแบ่งหรือการแบ่งส่วนการร้องขอข้ามสองโดเมนเมื่อเทียบกับหนึ่งโดเมนจะทำให้หน้าเร็วขึ้นโดยเฉพาะใน IE 6 & 7