จะเกิดอะไรขึ้นถ้าเราจัดการ DOM ใน requestAnimationFrame?

เมื่อไรก็ตามที่มันมีบางอย่า DOM หุ้นเหมือนฤติกรรมโรคจิต--การแทรเป็น DOM อีลีเมนต์จะกระตุ้นเป็น reflow และส่วนใหญ่ตามมาด้ repaint

ภาพเขียนการกระทำเกิดขึ้น asynchronously ดังนั้น"ปุ่ม"น่าจะเข้าใจอยู่ในทางนั้น คนแรกของคุณรหัสจาวาสคริปต์จะทำให้เสร็จก่อนหน้านั้นที่จริงมันจะเกิดขึ้น

ถ้าพวกเราก็จัดการเพื่อทำ DOM ยหุ้นอยู่ในนี้ rAF(แก้ไข:แล้วก็คิวอีก rAF ตอนท้าย)ซึ่งตัวกระตุ้นเป็น reflow everytime และนั่นเป็น repaint เราจะติดอยู่ในๆโดยไม่มีอันที่จริการแสดงผลอะไรบนหน้าจอ

ที่ต้องการสำหรับ repaint accumulate และไม่ synchronously นส่วนเติมเต็ม. คนแรกของคุณต้องมีสิ่งที่ไขรหัสสมบูรณ์จนกระทั่งเรียกสแต็กว่างเปล่า ดังนั้นไม่มีทางๆอยู่ที่นี่

หรือเป็นคดีที่ครั้งนึงเบราว์เซอร์ได้ตัดสินใจเพื่อทำ repaint มันจะอยู่กับมันและปรับใช้อะไรคืบหน้าเรื่องที่เกิดขึ้นใน RAF เรียกกลับในอีก repaint?

ใช่แล้ว ตอนที่ RAF เรียกกลับคือโทรมาว่ารหัสได้ตรวจสอบครั้งสุดท้ายโอกาสที่จะทำให้ปรับปรุงที่ DOM ซึ่งอาจจะ accumulate ไกลกว่านี้ที่ต้องการสำหรับภาพวาด ถ้าอยู่ในนั้นเรียกกลับคุณยังลงทะเบียนอีกเรียกกลับขึ้น RAF มันจะไม่ใช่ประมวลผลในตอนนั้นแต่หลัง:อยู่ที่ตำแหน่ง ต่อ เวลานั้นเบราว์เซอร์จะเตรียมพร้อมของมัน repaint งาน--ไม่ใช่ปัจจุบันหนึ่ง

ตัวอย่างเช่นประยุกต์@item text character set

เอาเป็นว่าคุณมีรหัส:

requestAnimationFrame(update);

myElement.style.backgroundColor = "silver"; // This queues a need for repaint

function update() {
    // This queues a need for repaint
    myElement.style.width = Math.floor(Math.random() * 100) + "px";
    requestAnimationFrame(update);
}

ตอนนี้ executes เราไปตามลำดับ:

1. update นั่นจดทะเบียนในชื่อของมือเรียกกลับ
2. เบื้องหลังเปลี่ยนชุต้องการสำหรับ repainting
3. ที่ callstack กลายเป็นว่างเปล่า
4. เบราว์เซอร์เริ่มต้นของมัน repaint งานแต่ต้องเข้าไปในบัญชีนั่นคือจดทะเบียนเรียกกลับมา ดังนั้นมันเอานี่ลงทะเบียน(เพราะมันควรจะเดียวที่หนีไปครั้งนึงและ executes update ก่อนที่จะทำอย่างอื่น
5. ความกว้างของเปลี่ยนชุต้องการสำหรับ repainting. รายการของเปลี่ยนแปลงตอนนี้รวมถึงการเบื้องหลังเปลี่ยนแปลงและนี่ความกว้างเปลี่ยนแปลงและมีเรียงลดหลั่นลูกเล่นที่จะถูกคำนวณไว้แล้ว (ยังไงนี่เป็นตัวแทนคือราต้องพึ่งเบราว์เซอร์)
6. คน update ฟังก์ชันนั่นจดทะเบียนในชื่อของมือเรียกกลับอีกครั้ง
7. เบราว์เซอร์แล้วเช็คว่ามันจะต้องทำอย่างเป็นส่วนหนึ่งของ repaint องงานและ performs ทั้งหมดนั่นคือต้องการที่จะ visualise งผลกระทบของพื้นหลังและความกว้างของการเปลี่ยนแปลง
8. สีงานจบสิ้น ทุกอย่างที่เหลืออยู่คือที่จดทะเบียน update เรียกกลับมา
9. ตอนที่เบราว์เซอร์ performs ของมันต่อวาดวังวนเราเริ่มต้นอีกครั้งจากขั้นตอน 4 แต่ตอนนี้ไม่มีรายการในคิวการพิมพ์พื้นหลัง-เปลี่ยนอีกแล้ว สำหรับที่เหลือมันจะเป็นคนเดียวกับการประมวลผล