หัวข้อ
- #การเพิ่มประสิทธิภาพเบราว์เซอร์
- #การโหลดเพจ
- #การโหลดทรัพยากร
โดยทั่วไปแล้ว เบราว์เซอร์จะเรนเดอร์ตามลำดับต่อไปนี้
- การแยกวิเคราะห์ HTML (จากบนลงล่าง head -> body) :
1. การแยกวิเคราะห์ HTML และการสร้าง DOM
2. การโหลดและการใช้ CSS (การบล็อกการเรนเดอร์)
3. การโหลดและการรันสคริปต์ (การบล็อกการเรนเดอร์)
4. การเรนเดอร์เนื้อหาของส่วน <body> (รูปภาพ ข้อความ ฯลฯ)
การควบคุมลำดับความสำคัญของทรัพยากรของเบราว์เซอร์สามารถเพิ่มประสิทธิภาพความเร็วในการโหลดหน้าเว็บได้
ฉันต้องการบันทึกแอตทริบิวต์หลักต่อไปนี้ที่สามารถปรับปรุงลำดับการเรนเดอร์ด้านล่างได้
- JavaScript: async, defer, module
- CSS: preload, media
- รูปภาพ: loading="lazy", srcset, sizes
- อื่นๆ: prefetch, preconnect, dns-prefetch
JavaScript
async : ดาวน์โหลดแบบขนานกับการแยกวิเคราะห์ HTML และรันทันทีหลังจากดาวน์โหลดเสร็จสมบูรณ์ หากทรัพยากรใดๆ บนหน้าเว็บเกี่ยวข้องกับ js นี้ ควรลบแอตทริบิวต์ async
defer : ดาวน์โหลดแบบขนานกับการแยกวิเคราะห์ HTML และรันหลังจากการแยกวิเคราะห์ HTML เสร็จสมบูรณ์ = ลำดับได้รับการรับประกัน หากต้องการรันหลังจากที่ HTML ทั้งหมดเรนเดอร์แล้ว ควรเพิ่มแอตทริบิวต์ defer
โดยทั่วไปแล้ว เบราว์เซอร์จะโหลด HTML ก่อน หากมีแหล่งที่มาของสคริปต์ในแท็ก head การเรนเดอร์จะถูกบล็อก การเพิ่มแท็กทั้งสองข้างต้นสามารถป้องกันการบล็อกการเรนเดอร์ HTML ได้
CSS
styleshee : ค่าเริ่มต้น เป็นองค์ประกอบที่บล็อกการเรนเดอร์ ใช้เมื่อจำเป็นต้องโหลด CSS
preload : ดาวน์โหลดล่วงหน้าโดยไม่บล็อกการเรนเดอร์ จะเปลี่ยนเป็น stylesheet เมื่อเกิดเหตุการณ์ onload และใช้สไตล์
media: เรนเดอร์เมื่อตรงตามเงื่อนไขขนาดหน้าจอ
รูปภาพ
loading="lazy" : โหลดรูปภาพเมื่อปรากฏบนหน้าจอ (เมื่อตำแหน่งการเลื่อนอยู่ใกล้กับองค์ประกอบที่มีรูปภาพ)
srcset : เลือกรูปภาพที่ดีที่สุดตามขนาดหน้าจอ (การเพิ่มประสิทธิภาพขนาดรูปภาพ)
sizes : ให้คำแนะนำแก่เบราว์เซอร์ในการเลือกรูปภาพที่เหมาะสมตามขนาดของวิวพอร์ต
ในกรณีของแท็ก img ตัวสุดท้าย เมื่อมีรูปภาพที่มีความกว้าง 480px และ 1024px แอตทริบิวต์ size จะทำให้แสดงรูปภาพขนาด 480px เมื่อ max-width เป็น 600px และแสดงรูปภาพขนาด 1024px ในกรณีอื่นๆ
* ในอีคอมเมิร์ซ เนื่องจากมีรูปภาพหลายสิบรูปในหน้าเดียว การลดขนาดของรูปภาพจึงมีประสิทธิภาพมาก
ตัวอย่างเช่น ในหน้าผลลัพธ์การค้นหาจะมีรูปภาพอย่างน้อย 20 รูปขึ้นไป และการค้นหาจะดำเนินการ 100,000 ครั้งต่อวัน...
อื่นๆ
rel="prefetch": ดาวน์โหลดทรัพยากรล่วงหน้าก่อนที่จะเปลี่ยนไปยังหน้าอื่นเพื่อปรับปรุงความเร็วในการโหลดของหน้าถัดไป
rel="preconnect": ตั้งค่าการเชื่อมต่อเครือข่ายล่วงหน้าสำหรับลิงก์เฉพาะ (วิดีโอขนาดใหญ่ แบบอักษร ฯลฯ)
rel="dns-prefetch": ค้นหา DNS ของทรัพยากรภายนอกเพื่อโหลดทรัพยากรได้เร็วขึ้น (ส่วนใหญ่คือ CDN ภายนอก)
* preconnect กับ dns-prefetch
preconnect คือการเชื่อมต่อ TCP (DNS - การยืนยัน TCP - การยืนยัน TLS) ดังนั้นจึงเป็นการทำงานที่หนักซึ่งใช้ทรัพยากรของเบราว์เซอร์ ใช้เมื่อต้องโหลดทรัพยากรภายนอกอย่างรวดเร็ว (เมื่อทรัพยากรมีความสำคัญมากและการเรนเดอร์ที่รวดเร็วมีความสำคัญ)
dns-prefetch เป็นเพียงการค้นหา DNS เท่านั้น ดังนั้นจึงเป็นการทำงานที่เบากว่า เหมาะสำหรับทรัพยากรที่ไม่สำคัญและจะโหลดในภายหลัง
ความคิดเห็น0