Performance em javascript

Guilherme Bortolin Serrano
Bacharel em Desenho Industrial (ULBRA)
Pós graduado em Gestão Empreendedora (SENAC)
Empreendedor
Programador / Hacker

We should forget about small
efficiencies, say about 97% of the time:
premature optimization is the root of all
evil
"
Tony Hoare ~1975
Nós devemos desconsiderar ajustes para pequenas performance, digamos
que em 97% do tempo a otimização prematura é a raiz de todo o mal

Qual o custo da otimização?
- Aumento de tempo de desenvolvimento inicial
- Pode prejudicar a leitura do código:
- Mais difícil fazer novas implementações
- Mais difícil dar manutenção no código
(principalmente em equipe)

Pensar cedo em otimização
- Melhora planejamento para otimizações futuras
- Evita "surpresas" no lançamento do produto em
produção

Abandono de página = prejuízo
https://blog.kissmetrics.com/loading-time/?wide=1

Ganhos reais
- Experiência do usuário
- + felicidade
- + vendas
- + ROI
- + pageviews
- - abandono de página / ação
- Outros "menos importantes"
- Economia de banda, redução de custo com servidor...

"Uso Internet Explorer
em uma VM"
@chrisb

Chrome DEV Tools
https://developer.chrome.com/devtools/docs/cpu-profiling

Repaint
O repaint acontece quando mudanças são feitas em elementos que alteram a visualização mas não
afetam o layout.
- Outline
- Visibility
- Background color
- etc
* A Opera diz que o repaint é custoso pois a visibilidade de todos os elementos da árvore do DOM.
DOM

Reflow
DOM
O reflow acontece quando existem mudanças no layout da página (largura, padding, posicionamento)
e a alteração de um elemento se extende aos childs e aos parents.

a alteração de um elemento se extende aos childs e aos parents - a alteração de um elemento se extende aos
childs e aos parents - a alteração de um elemento se extende aos childs e aos parents - a alteração de um
elemento se extende aos childs e aos parents - a alteração de um elemento se extende aos childs e aos parents -
elemento se

O que causa um reflow?
Resize da janela
Alteração de fonte
Adicionar ou remover uma stylesheet
Alteração de conteúdos (como o usuário escrever em um input…)
Ativação de pseudoclass como :hover
Manipulação do atributo classe
Manipulação do DOM
Calcular offsetWidth ou offsetHeight
Definir um atributo de uma propriedade de estilo
Praticamente tudo que é legal fazer com JS.
DOM

<body>
<div class=”error”>
<h4>My Module</h4>
<p><strong>Error:</strong>Description of the error…</p>
<h5>Corrective action required:</h5>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
</div>
</body>
DOM

<body>
<h4>My Module</h4>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
</div>
</body>
DOM
reflow

<body>
<h4>My Module</h4> <p><strong>Error:</strong>Description of the error…</p>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
</div>
</body>
DOM
reflow -> child

<body><div class=”error”>
<h4>My Module</h4>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol></div>
</body>
DOM
reflow -> parent

<body><div class=”error”> <h4>My Module</h4>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol></div>
</body>
DOM
reflow -> child

Uma captura rara
DOM
em imagem de um reflow

Altere o DOM somente
quando for necessário
DOM

Evitando manipulação do DOM
for (var i = 0; i < 100; i++) {
document.getElementById("teste").innerHTML += "<span>" + i + "</span>";
}
// Manipula o DOM a cada iteração :(
DOM

Evitando manipulação do DOM
var myList = "";
for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}
document.getElementById("teste").innerHTML = myList;
// Concatena uma string e manipula o DOM apenas uma vez :)
DOM

Evitando cálculo de offset
var div = document.getElementById("to-measure"),
lis = document.getElementsByTagName('li'),
i, len;
for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = div.offsetWidth + 'px';
}
DOM
http://jsbin.com/aqavin/2/quiet

i, len;for (i = 0, len = lis.length; i < len; i++) {
lis[i].style.width = div.offsetWidth + 'px';
}
DOM
reflow, reflow, reflow...

widthToSet = div.offsetWidth,
i, len;
lis[i].style.width = widthToSet + 'px';
}
DOM

widthToSet = div.offsetWidth,
i, len;
lis[i].style.width = widthToSet + 'px';
}
DOM
cache do offsetWidth
sem reflow :)

Literals
var arr = [];
var obj = {};
var arr = new Array();
var obj = new Object();

Function vs Inline*
function a(x,y){
return x + y;
}
a("4", "5");
"4" + "5"
* sempre considere o custo de manutenção / leitura

Function vs Inline*
a("4", "5"); "4" + "5"

Function vs Inline*
a("4", "5"); "4" + "5"
Questione: essa diferença
compensa manutenção do
código?

var texts = [
"foo bar foo bar foo bar",
"foobarfoobarfoobar",
"foo asdfasdfasdf bar"
]
REGEX

var texts = [
"foo bar foo bar foo bar",
"foobarfoobarfoobar",
"foo asdfasdfasdf bar"
]
REGEX
cache normalmente é uma boa ideia

exec(); VS match(); VS test();
var oRegex = /({:([0-9]):})/;
var str = "asdf{:1:}jal{:2:}sdk{:3:}fj_8{:4:}kjdk";
REGEX

for();
function indexOfFor(ar,v){
for (var i = 0,l=ar.length; i < l; i++) {
if (ar[i] === v) {
return i;
}
}
return -1;
}
Array

for(); while();
if (ar[i] === v) {
return i;
}
}
return -1;
}
function indexOfWhile(ar,v){
var i=-1, imax = ar.length;
while (++i < imax) {
if (ar[i] === v)
return i;
}
return -1;
}
Array

for(); while(); indexOf();
if (ar[i] === v) {
return i;
}
}
return -1;
}
function indexOf(ar,v){
return ar.indexOf(v);
}
function indexOfWhile(ar,v){
var i=-1, imax = ar.length;
while (++i < imax) {
if (ar[i] === v)
return i;
}
return -1;
}
Array

Iterações
for (i = 0; i < arr.length; i++) {
// calcula o length a cada iteração
}
// bad, bad, no donut for you! :(
Array

Iterações com cache
for (i = 0; i < arr.length; i++) {
// calcula o length a cada iteração
}
// bad, bad, no donut for you! :(
for (i = 0, len = arr.length; i < len; i++) {
// calcula o length uma vez e cacheia
// a variável "len"
}
// :D
Array

parseInt();
parseInt(12.9);
Math

parseInt();
Math.floor();
parseInt(12.9); Math.floor(12.9);
Math

~~
Bitwise
Bitwise
Bitwise
Bitwise
Bitwise
Math
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators

parseInt();
Math.floor();
~~
parseInt(12.9);
~~(1 * "12.9");
// :(:
// NOT NOT (coisa estranha, magia negra, etc)
Math.floor(12.9);
Math

~~ (NOT NOT)
var r = 1234567890.99
~~(r)
// 1234567890
var r = 12345678901.99
~~(r)
// -539222987
// ?
Math

getElementById();
document.getElemntById('teste');
jQuery

getElementById(); $('#');
document.getElemntById('teste'); $('#teste');
jQuery

getElementById(); $('#');
document.getElemntById('teste');
395x mais rápido!
$('#teste');
jQuery

$('.') vs querySelectorjQuery
suporte

$('.') vs querySelectorjQuery
Mais de 14 vezes mais rápido

.empty() VS .html('')
.empty(); .html('');
jQuery

.empty() VS .html('')
.empty();
2 x mais rápido
.html('');
:(
jQuery

Ações no seletor
$('.lorem').class('cached');
$('.lorem').html('cached');
$('.lorem').click(function(){
console.log('click');
});
jQuery

Ações no seletor - cache
$('.lorem').class('cached');
$('.lorem').html('cached');
$('.lorem').click(function(){
});
// :(
var el = $('.lorem');
el.class('cached');
el.html('cached');
el.click(function(){
});
// RAZOÁVEL
jQuery

Ações no seletor
chain
$('.lorem')
.class('cached')
.html('cached')
.click(function(){
});
jQuery

find()
div>(ul#list>(li.item1+li.item2))
div
ul#list
li.item1
li.item2
ul#list2
li
li
jQuery

find()
$test1 = $('#list li.test1');
jQuery

find()
$test1 = $('.test1');
$test2 = $('.test2');
// Se tem classe repetida pode
perder o sentido / performar pior
jQuery

find()
$list = $('#list');
$test1 = $list.find('li.test1');
$test1 = $('.test1');
$test2 = $('.test2');
jQuery

find()
$list = $('#list');
$test1 = $('.test1');
$test2 = $('.test2');
$list = $('#list');
$test1 = $list.find('.test1');
$test2 = $list.find('.test1');
jQuery

OBRIGADO!
@gserrano
guilherme@gssolutions.com.br
hacklab.club

Performance em javascript

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Performance em javascript

Similar to Performance em javascript (20)

More from Guilherme Serrano

More from Guilherme Serrano (6)

Performance em javascript