DEV Community: Silvana Lima

Exemplo de Coerção de tipos no JavaScript.

Silvana Lima — Thu, 26 Dec 2019 01:15:39 +0000

No JavaScript temos duas formas de coerção.
- Explícita: Quando queremos converter um tipo, como por exemplo Number(value), chamamos isso de Coerção de tipos explícita. Você manda converter um tipo de valor para outro tipo de valor.
- Implícita: Acontece quando o tipo de conversão ocorre como um 'efeito simultâneo' de alguma outra operação, ou seja, não chega a ser algo muito óbvio, neste caso chamamos de Coerção de tipos implícita.

Evitando o uso de uma
desnecessária: DocumentFragment

Silvana Lima — Sun, 29 Sep 2019 19:51:28 +0000

Você já deve ter se deparado com situações que "precisou" criar uma <div> apenas para envolver outras tags e então adicionar essa div ao elemento body. Só porque não queria adicionar essas tags diretamente ao body.
Então, essa div extra que você criou, não está ali por conta de uma real necessidade. 🤨
Envolvemos essas tags em um elemento, porque se adicionamos cada novo elemento diretamente ao body, o código ficaria mais lento, isso porque obrigaria o navegador a passar pelos processos de refluxo para definir o novo layout da tela e depois redesenhar a tela.
Então, para resolver o problema do uso desnecessário da div, podemos usar o método .createDocumentFragment()

Segundo a documentação, as mudanças feitas em um DocumentFragment acontecem fora da tela, portanto não há custo de refluxo e redesenho para construir esse recurso. Consequentemente, as mudanças feitas no document fragment não afetam o documento e nem geram efeito no desempenho que pode ocorrer quando temos mudanças.

Não há nada de muito novo para usar esse recurso, ele se assemelha muito ao nosso velho conhecido document.createElement()

Vejamos o exemplo:

Bem simples! 🤙

Medindo o desempenho do código JavaScript: performance.now()

Silvana Lima — Thu, 26 Sep 2019 19:31:03 +0000

Sabemos que geralmente existem N maneiras de escrever um código para obter um mesmo resultado. E sabemos também que sempre vai existir uma maneira que vai resultar em uma performance melhor.

Para medir a performance de um código JavaScript e até mesmo escolher qual solução JavaScript optar, podemos usar o método performance.now()

Seu uso é bastante simples.
Você vai precisar declarar duas variáveis usando o método performance.now(), uma no começo do seu código e outra no final. Depois disso você fazer o cálculo do valor final - valor inicial.

Confira o código completo nesse exemplo abaixo:

E teremos o resultado:

Para saber mais sobre o método: performance.now()

Essa é uma dica bem rápida e bacana!
Agora você pode comparar seus códigos, escolher a opção mais performática :)

Até a próxima!

DEV Community: Silvana Lima

Exemplo de Coerção de tipos no JavaScript.

Evitando o uso de uma desnecessária: DocumentFragment

Medindo o desempenho do código JavaScript: performance.now()

Evitando o uso de uma
desnecessária: DocumentFragment