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