2017-06-07 28 views
7

W procesie modernizacji Knockout dla wersji 4.0 (obecnie na żywo w Monorepo tko), miałem problemy z wydajnością.Optymalizacja nokautu/TKO - Alpha3

Wśród innych zmian niektóre elementy wewnętrznej pętli zostały przekonwertowane na klasy ES6 i powoduje to poważne problemy z wydajnością. Wolę nie cofać tego wysiłku, ponieważ dodaje trochę klarowności do jakiegoś kodu kluczowego, dlatego chciałbym poprosić o kilka informacji na temat poprawy kodu ES6.

Wcześniej skonfigurować kilka prostych próbek do profilowania tutaj:

Knockout Alpha2 - 349ms

Knockout Alpha3 (prerelease) - 622ms

Kod w jsFiddles jest w następujący sposób, a to prototypowy stanowi to spowolnienie jest doświadczony w wielu powiązaniach.

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')) 

Jeśli porównać profile JavaScript, drzewa połączeń są prawie identyczne (np pomimo zmiany ES6). Wygląda na to dodatkowy czas w wobec alfa3 jest na zaproszeniach liści, dzięki czemu trudniej zidentyfikować, więc spekulować na podstawie porównań profilu, że problem jest kilka razy, w tym:

  • jakiegoś braku optymalizacji lub DE -optymowanie zdarza się
  • niektóre pętle zastąpione wolniejszymi, natywnymi połączeniami np. Array.from
  • więcej pośrednich mniejsze zbiory śmieci
  • mniej rodzimy optymalizacja dla ES6isms

W każdym razie ja nie wykorzenione, które, jeśli którykolwiek z nich, jest jeszcze problem - lub gdzie dokładnie mogliby być występujący.

Byłbym bardzo wdzięczny za spostrzeżenia i pomogę określić, gdzie możemy dokonać optymalizacji, aby uzyskać wydajność z powrotem, lub nawet powyżej.

Odpowiedz

0

Aby skonsolidować żadnych odpowiedzi, zacząłem jako odpowiedź wiki:

  • usuwanie nieodpowiednie & niepotrzebnych zależność łańcuchowy z template i if/ifnot/unless/with/else i foreach wiązań - 3074AA9