Tăng mạnh hiệu suất DOM - innerHTML của WebKit nhanh hơn 240%

Sam Dutton

Chúng tôi rất vui mừng khi thấy rằng một số hoạt động của DOM phổ biến đã tăng tốc nhanh chóng. Những thay đổi này ở cấp độ Tin nhắn theo thời gian thực, giúp tăng hiệu suất cho cả Safari (JavaScriptCore) và Chrome (V8).

Kỹ sư Chrome Kentaro Hara đã thực hiện 7 cách tối ưu hoá mã trong WebM; bên dưới là kết quả, cho thấy khả năng truy cập DOM JavaScript nhanh hơn bao nhiêu:

Tóm tắt về mức tăng hiệu suất của DOM

Dưới đây, Kentaro Hara cung cấp thông tin chi tiết về một số bản vá mà anh đã thực hiện. Các liên kết này đến các lỗi Tại đây với các trường hợp kiểm tra, vì vậy bạn có thể tự mình thử kiểm tra các kiểm thử. Các thay đổi được thực hiện giữa ASan r109829 và r111133: Chrome 17 không bao gồm các thay đổi đó; Chrome 19 thì có.

Cải thiện hiệu suất của div.innerHTML và div.outerHTML thêm 2,4 lần (V8, JavaScriptCore)

Hành vi trước đó trong WebM:

  • Tạo một chuỗi cho mỗi thẻ.
  • Thêm một chuỗi đã tạo vào Vector<string>, phân tích cú pháp cây DOM.
  • Sau khi phân tích cú pháp, hãy phân bổ một chuỗi có kích thước là tổng của tất cả các chuỗi trong Vector<string>.
  • Hãy nối tất cả các chuỗi trong Vector<string> rồi trả về dưới dạng innerHTML.

Hành vi mới trong STDEV: 1. Phân bổ một chuỗi, giả sử S. 1. Nối một chuỗi cho mỗi thẻ với S, phân tích cú pháp cây DOM dần dần. 1. Trả về S dưới dạng innerHTML.

Tóm lại, thay vì tạo nhiều chuỗi rồi nối chúng lại, bản vá sẽ tạo một chuỗi rồi sau đó thêm các chuỗi tăng dần.

Cải thiện hiệu suất của div.innerText và div.outerText trong Chromium/Mac lên 4 lần (V8/Mac)

Bản vá chỉ thay đổi dung lượng bộ nhớ đệm ban đầu để tạo innerText. Việc thay đổi kích thước bộ nhớ đệm ban đầu từ 2^16 thành 2^15 giúp cải thiện hiệu suất của Chromium/Mac lên 4 lần. Sự khác biệt này phụ thuộc vào hệ thống Malloc cơ bản.

Cải thiện 35%hiệu suất truy cập vào thuộc tính CSS trong JavaScriptCore

Chuỗi thuộc tính CSS (ví dụ: .fontWeight, .backgroundColor) được chuyển đổi thành mã nhận dạng số nguyên trong STDEV. Lượt chuyển đổi này có quy mô lớn. Bản vá lưu các kết quả chuyển đổi trong bản đồ vào bộ nhớ đệm (tức là chuỗi thuộc tính => mã nhận dạng số nguyên), do đó, lượt chuyển đổi sẽ không được thực hiện nhiều lần.

Các bài kiểm thử hoạt động như thế nào?

Chúng đo lường thời gian truy cập vào tài sản. Trong trường hợp innerHTML (thử nghiệm hiệu suất trong bugs.webkit.org/show_bug.cgi?id=81214), thử nghiệm chỉ đo lường thời gian để chạy mã sau:

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

Quy trình kiểm tra hiệu suất sử dụng một phần nội dung lớn được sao chép từ thông số HTML.

Tương tự, bài kiểm thử quyền truy cập vào thuộc tính CSS đo lường thời gian của mã sau:

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

Tin vui là Kentaro Hara tin rằng các thuộc tính và phương thức DOM quan trọng khác sẽ có thể cải thiện hiệu suất hơn nữa.

Hãy tải lên nào!

Xin chúc mừng Haraken và những thành viên còn lại trong nhóm.