Olá André, muito boa a sua pergunta porque indica que você não se preocupe apenas com a manutenção e legibilidade do seu código, mas a performance.

A primeira forma é mais segura e tente a introduzir menos bugs, porque se recalculamos tudo temos certeza que o valor total refletirá o total de itens. Porém, como você notou, há um peso computacional.

A segunda forma, a que você propõe é interessante porque manipula menos o DOM e por conseguinte torna seu código mais rápido. Daí, vou compartilhar o que o arquiteto do Facebook que criou o React (framework que faz o chat do facebook funcionar) disse em uma de suas palestras: que prefere a simplicidade no lugar da performance, mas quando a performance não tem grande impacto.

No seu exemplo, a primeira forma tente a introduzir menos bugs porque recalculamos tudo, mais lenta, mas um lento que não é percebido em termos práticos, daí a preferência por essa abordagem.

Porém, se houvesse problema de performance, aí a gente consideraria a segunda forma.

Espero ter lançado uma luz sobre a sua reflexão.

Abraço do Flávio Almeida!

Oi Flávio esclareceu sim minhas dúvidas a respeito, só continuo ainda pensativo, pois pretendo atuar em um projeto mobile que utiliza o framework phonegap. Sendo que já é conhecida a perda de desempenho quando comparado a uma aplicação nativa, então tudo o que eu puder fazer para melhorar a performance seria de melhor agrado. Mas em contrapartida poderia aumentar a chance de ocorrerem bugs.

Sendo assim, acredito que devo analisar cada momento da aplicação que ocorrerem situações como essas, para avaliar qual seria melhor aproveitada.

Aproveitando o tópico, o jquery possui uma função chamada clone, que pode copiar um bloco de códigos. Em umas aulas de phonegap (que foge o escopo daqui), eu possuo um bloco html oculto, seria como se fosse um item de um carrinho de compras. E então no meu código javascript, através do jquery faço uso dessa função clone para copiar esse bloco oculto e então adicionar ao carrinho de compras, eu considero meio que "feio" possuir esse código oculto no html.

Essa função clone do jquery possui um melhor desempenho do que eu criar o bloco html utilizando o jquery, conforme fazemos na aula 4 ao adicionar uma propaganda?

Só um teste para saber, de "achismo", não sei.

O que o .clone faz é criar um novo DOM Node do zero com base nos dados do elemento clonado. Se ele não fizesse isso, ele teria uma referência para o elemento e se você adicionasse ele em outro lugar do DOM, ele mudaria o elemento de posição. Porém, creio que esse procedimento é apenas uma açúcar sintático para evitar que você tenha que criar o objeto na mão e copiar suas propriedades uma a uma, com pouco impacto na performance, mas não sei, só um teste.