ฉันได้อ่านคำถามมากมายเกี่ยวกับการรีโฟลว์เมื่อเร็วๆ นี้ แต่ฉันไม่เคยสังเกตเห็นปรากฏการณ์นี้มาก่อน ฉันเริ่มศึกษามันอย่างช้าๆ ท้ายที่สุดแล้ว ฉันไม่ได้ใส่ใจกับรายละเอียดประสิทธิภาพมากนักในอดีต เกี่ยวกับการจัดเรียงใหม่ ควรกล่าวง่ายๆ ว่าเป็นการแสดงผลของ DOM (การคำนวณขนาด เค้าโครง ฯลฯ ของแต่ละวัตถุในแผนผังเอกสารผ่าน CSS หรือปัจจัยอื่นๆ) คำอธิบายอาจเป็นแบบด้านเดียว แต่ก่อนอื่นให้กำหนด a แนวคิดง่ายๆ ที่ช่วยให้เกิดความเข้าใจ
อันดับแรก ฉันเห็นลำดับการเขียนของแอตทริบิวต์ CSS ที่แนะนำใน Mozilla บทความนี้อิงจากข้อมูลเท่านั้น ลำดับการแสดงผลของเบราว์เซอร์
รูปแบบพื้นฐานของ mozilla.org
* ดูแลโดยแฟนตาซี
* (คลาสที่กำหนดใน Markup Guide -http://mozilla.org/contribute/writing/markup)
-
/* ลำดับที่แนะนำ:
//แสดงคุณสมบัติ
*แสดง
*รายการสไตล์
*ตำแหน่ง
* ลอย
*ชัดเจน
//คุณลักษณะของตนเอง
*ความกว้าง
*ความสูง
* ระยะขอบ
*ช่องว่างภายใน
* ชายแดน
* พื้นหลัง
//แอตทริบิวต์ข้อความ
* สี
*แบบอักษร
* การตกแต่งข้อความ
* จัดข้อความ
*จัดแนวตั้ง
*พื้นที่สีขาว
* ข้อความอื่น ๆ
* เนื้อหา
"การจัดเรียงภาพ" นี้ชี้ให้เห็นอย่างชัดเจนถึงกระบวนการเรนเดอร์ของเบราว์เซอร์ จากนั้น คุณจะเห็นว่าเบราว์เซอร์ไม่ได้วาง DOM ทั้งหมดอย่างถูกต้องในขั้นตอนเดียวระหว่างกระบวนการโหลด แต่หลังจากการคำนวณอย่างต่อเนื่อง ผลลัพธ์ของการเรนเดอร์มักจะเกิดขึ้นบ่อยครั้ง เปลี่ยนแปลงแล้ว ซึ่งรวมถึงผลกระทบของ js, css ฯลฯ ต่อประสิทธิภาพของ dom