เรายินดีอย่างยิ่งที่พบว่าการดำเนินการ DOM ทั่วไปบางอย่างมีประสิทธิภาพมากขึ้น การเปลี่ยนแปลงเกิดขึ้นที่ระดับ WebKit ซึ่งช่วยเพิ่มประสิทธิภาพให้กับทั้ง Safari (JavaScriptCore) และ Chrome (V8)
Kentaro Hara วิศวกรของ Chrome ได้เพิ่มประสิทธิภาพโค้ดภายใน WebKit 7 รายการ ผลลัพธ์ด้านล่างนี้แสดงให้เห็นว่าการเข้าถึง DOM ของ JavaScript เร็วขึ้นเพียงใด
สรุปการเพิ่มประสิทธิภาพ DOM
- ประสิทธิภาพของ
div.innerHTMLและdiv.outerHTMLเพิ่มขึ้น 2.4 เท่า (V8, JavaScriptCore) - ประสิทธิภาพ
div.innerTextและdiv.outerTextใน Chromium/Mac เพิ่มขึ้น4 เท่า (V8/Mac) - การเข้าถึงพร็อพเพอร์ตี้ CSS เพิ่มขึ้น35% (JavaScriptCore)
- ประสิทธิภาพของ
div.classList,div.datasetและdiv.attributesเพิ่มขึ้นสูงสุด 10.9 เท่า (V8) - ประสิทธิภาพของ
div.firstElementChild,lastElementChild,previousElementSiblingและnextElementSiblingเพิ่มขึ้น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%
สตริงพร็อพเพอร์ตี้ CSS (เช่น .fontWeight, .backgroundColor) จะแปลงเป็นรหัสจำนวนเต็มใน WebKit 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 และทีมที่เหลือ