🥇 Otimizando Knockout.js

Hoje estou trabalhando em um projeto que requer atualizações em centenas de elementos DOM quando uma visualização do meu aplicativo móvel HTML5 é carregada.

Em qualquer outro projeto, com apenas 10 ou 20 elementos para atualizar, escrevo algo assim:

element = document.getElementById("myDOMelement");

app.models.applyBindings(
    { 
        myData: myData
    },
    element
);

Mas usar esse código, quando existem centenas de ligações, é muito doloroso para o desempenho do aplicativo.

Uma boa alternativa é consultar uma coleção limitada de elementos para atualizar e, somente quando necessário (ex: quando os elementos ocultos aparecerem), faça o resto da atualização.

Primeiro, você vincula uma coleção de elementos filtrados:

elements = document.querySelectorAll("#myDOMelement > .myField > [data-bind]");

for (i = 0; i < elements.length; i++) {
    app.models.applyBindings(
        { 
            myData: myData
        },
        elements[i]
    ); 
}

E então, por exemplo, quando o usuário clica em um botão que mostra o restante dos campos, você pode vincular o restante:

elements = document.querySelectorAll("#myDOMelement > .myHiddenField > [data-bind]");

for (i = 0; i < elements.length; i++) {
    app.models.applyBindings(
        { 
            myData: myData
        },
        elements[i]
    ); 
}

Usando essa abordagem, você pode vincular apenas os elementos exatos que você precisa vincular, alcançando uma boa otimização de desempenho.

Related Posts