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

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

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

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

ด้านล่างนี้ 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 และทีมที่เหลือ