Trong quá trình hiện đại hóa Knockout cho phiên bản 4.0 (hiện đang sống tại monorepo tko), tôi đã gặp phải một số vấn đề về hiệu suất.Tối ưu hóa Knockout/TKO - Alpha3
Trong số các thay đổi khác, một số vòng lặp bên trong đã được chuyển thành các lớp ES6 và nó gây ra một số vấn đề về hiệu suất chính. Tôi không muốn hoàn tác nỗ lực đó vì nó bổ sung thêm một chút rõ ràng cho một số mã khóa, vì vậy tôi muốn thu hút một số đầu vào về cách cải thiện mã ES6.
tôi đã thiết lập một số mẫu đơn giản cho hồ sơ ở đây:
Knockout Alpha2 - 349ms
Knockout Alpha3 (prerelease) - 622ms
Mã trong jsFiddles được như sau, và đó là nguyên mẫu của sự sụt giảm là trải qua một số ràng buộc.
HTML:
<div id='x'>
<strong>{{ count }}/{{ time }} ms</strong>
<custom-component></custom-component>
</div>
<div id='cc-template'>
cc
{{# unless: finished }}
<custom-component></custom-component>
{{ /unless }}
</div>
Javascript:
let count = ko.observable(0)
let time = ko.observable(false)
const start = performance.now()
const ITERATIONS = 1000
class viewModel {
constructor() {
this.finished = count() > ITERATIONS
count(count() + 1)
time(performance.now() - start)
}
}
ko.components.register("custom-component", {
viewModel, template: {element: 'cc-template'}
})
ko.applyBindings({count, time}, document.getElementById('x'))
Nếu bạn so sánh các cấu Javascript, cây gọi là gần như giống hệt (dù ví dụ những thay đổi ES6). Có vẻ như thêm thời gian trong Alpha3 là ở các cuộc gọi lá, làm cho chúng khó xác định hơn, vì vậy tôi suy đoán dựa trên so sánh hồ sơ rằng vấn đề là một vài lần, bao gồm:
- một số không tối ưu hóa hoặc de -sự tối ưu hóa xảy ra
- một số vòng được thay thế bằng các cuộc gọi bản địa chậm hơn, ví dụ như
Array.from hơn
- bộ sưu tập rác nhỏ trung gian
- ít có nguồn gốc tối ưu hóa cho ES6isms
Trong mọi trường hợp tôi đã không nhổ đi mà, nếu bất kỳ trong số này, là vấn đề được nêu ra - hoặc trong trường hợp chính xác họ có thể xảy ra.
Tôi sẽ biết ơn nhất về thông tin chi tiết và giúp xác định nơi chúng tôi có thể thực hiện tối ưu hóa để có hiệu suất trở lại hoặc thậm chí ở trên, ngang hàng.