เพิ่มประสิทธิภาพให้กับ DOM ได้อย่างมาก - InsideHTML ของ WebKit นั้นทำงานเร็วขึ้น 240%

Sam Dutton

Twitter GitHub Glitch Mastodon หน้าแรก

เราดีใจที่ได้เห็นว่าการดำเนินการ DOM ทั่วไปบางอย่างนั้นพุ่งสูงขึ้นมาก การเปลี่ยนแปลงเกิดขึ้นในระดับ WebKit โดยเป็นการปรับปรุงประสิทธิภาพสำหรับทั้ง Safari (JavaScriptCore) และ Chrome (V8)

วิศวกร Chrome Kentaro Hara ได้ทำการเพิ่มประสิทธิภาพโค้ด 7 อย่างภายใน WebKit ผลลัพธ์ด้านล่างซึ่งแสดงให้เห็นว่าการเข้าถึง JavaScript DOM รวดเร็วขึ้นมากแค่ไหน

สรุปการเพิ่มประสิทธิภาพ DOM

• div.innerHTML และ div.outerHTML ประสิทธิภาพเพิ่มขึ้น 2.4 เท่า (V8, JavaScriptCore)
• ประสิทธิภาพdiv.innerTextและdiv.outerTextใน Chromium/Mac ภายใน 4x (V8/Mac)
• พร็อพเพอร์ตี้ CSS เข้าถึงการปรับปรุงขึ้น 35% (JavaScriptCore)
• ประสิทธิภาพของ div.classList, div.dataset และ div.attributes เพิ่มขึ้นสูงสุด 10.9 เท่า (V8)
• div.firstElementChild, lastElementChild, previousElementSibling และ nextElementSibling Perf เพิ่มขึ้น 7.1 เท่า (V8)
• การเข้าถึงแอตทริบิวต์ DOM ของ V8 เพิ่มขึ้น4 ~ 5% (V8)

ด้านล่างนี้ Kentaro Hara ให้รายละเอียดเกี่ยวกับแพตช์บางส่วนที่ทำขึ้น ลิงก์ไปยังข้อบกพร่องของ WebKit พร้อมกรอบการทดสอบเพื่อให้คุณทำการทดสอบด้วยตัวเอง การเปลี่ยนแปลงเกิดขึ้นระหว่าง WebKit r109829 กับ r111133 โดยไม่รวม Chrome 17 และ Chrome 19

ปรับปรุงประสิทธิภาพของ div.innerHTML และ div.outerHTML ขึ้น 2.4 เท่า (V8, JavaScriptCore)

ลักษณะการทำงานก่อนหน้าใน WebKit:

• สร้างสตริงสำหรับแต่ละแท็ก
• เพิ่มสตริงที่สร้างขึ้นต่อท้าย Vector<string> โดยแยกวิเคราะห์แผนผัง DOM
• หลังจากแยกวิเคราะห์ ให้จัดสรรสตริงที่มีขนาดเป็นผลรวมของสตริงทั้งหมดใน Vector<string>
• เชื่อมต่อสตริงทั้งหมดใน Vector<string> แล้วแสดงผลเป็น innerHTML

ลักษณะการทำงานใหม่ใน WebKit: 1. จัดสรร 1 สตริง เช่น S 1. เชื่อมต่อสตริงสำหรับแต่ละแท็กกับ S โดยค่อยๆ แยกวิเคราะห์แผนผัง DOM 1. แสดงผล S เป็น innerHTML

กล่าวโดยสรุปคือ แทนที่จะสร้างสตริงจำนวนมากแล้วมาเชื่อมต่อเข้าด้วยกัน แพตช์จะสร้างสตริงขึ้นมา 1 สตริง แล้วต่อท้ายสตริงทีละน้อย

ปรับปรุงประสิทธิภาพของ div.innerText และ div.outerText ใน Chromium/Mac ขึ้น 4 เท่า (V8/Mac)

แพตช์เพิ่งเปลี่ยนขนาดบัฟเฟอร์เริ่มต้นสำหรับการสร้าง innerText การเปลี่ยนขนาดบัฟเฟอร์ครั้งแรกจาก 2^16 เป็น 2^15 ช่วยปรับปรุงประสิทธิภาพของ Chromium/Mac ขึ้น 4 เท่า ความแตกต่างนี้ขึ้นอยู่กับระบบ Malloc ที่สำคัญ

ปรับปรุงประสิทธิภาพการเข้าถึงพร็อพเพอร์ตี้ CSS ใน JavaScriptCore ขึ้น 35%

หมายเหตุ: การเปลี่ยนแปลงนี้มีผลกับ Safari ไม่ใช่ Chrome

สตริงพร็อพเพอร์ตี้ CSS (เช่น .fontWeight, .backgroundColor) จะแปลงเป็นรหัสจำนวนเต็มใน WebKit Conversion นี้มีขนาดใหญ่ แพตช์นี้แคชผลลัพธ์ Conversion ในแผนที่ (เช่น สตริงพร็อพเพอร์ตี้ => รหัสจำนวนเต็ม) เพื่อไม่ให้เกิด Conversion หลายครั้ง

การทดสอบทำงานอย่างไร

เมตริกระยะเวลาการเข้าถึงพร็อพเพอร์ตี้ ในกรณีของ innerHTML (การทดสอบประสิทธิภาพใน bugs.webkit.org/show_bug.cgi?id=81214) การทดสอบจะวัดเวลาในการเรียกใช้โค้ดต่อไปนี้:

for (var i = 0; i < 1000000; i++)
    document.body.innerHTML;

การทดสอบประสิทธิภาพจะใช้เนื้อหาขนาดใหญ่ที่คัดลอกมาจากข้อกำหนด HTML

ในทำนองเดียวกัน การทดสอบการเข้าถึงพร็อพเพอร์ตี้ CSS จะวัดเวลาของโค้ดต่อไปนี้

var spanStyle = span.style;
for (var i = 0; i < 1000000; i++) {
    spanStyle.invalidFontWeight;
    spanStyle.invalidColor;
    spanStyle.invalidBackgroundColor;
    spanStyle.invalidDisplay;
}

ข่าวดีคือ Kentaro Hara เชื่อว่าจะเพิ่มประสิทธิภาพให้กับแอตทริบิวต์และวิธีการอื่นๆ ที่สำคัญของ DOM ได้มากยิ่งขึ้น

แสดงได้เลย!

ขอขอบคุณ Haraken และทุกคนในทีม

หมายเหตุ: นำการสาธิตออกแล้ว