Más contenido relacionado Performance na web: o modelo RAIL e outras novidades22. < 14 KB (1 RTT)
inline do CSS ATF
inline do JS ATF
flush ATF
resto do CSS e JS tudo async
23. < 14 KB (1 RTT)
inline do CSS ATF
inline do JS ATF
flush ATF
resto do CSS e JS tudo async
server push
http/2
31. elem1.style.top = elemX.offsetTop + 10 + 'px';
elem2.style.top = elemY.offsetTop + 10 + 'px';
elem3.style.top = elemZ.offsetTop + 10 + 'px';
elem4.style.top = elemW.offsetTop + 10 + 'px';
32. // reads
var topX = elemX.offsetTop;
var topY = elemY.offsetTop;
var topZ = elemZ.offsetTop;
var topW = elemW.offsetTop;
// writes
elem1.style.top = topX + 10 + 'px';
elem2.style.top = topY + 10 + 'px';
elem3.style.top = topZ + 10 + 'px';
elem4.style.top = topW + 10 + 'px';
43. .container {
transition: transform 500ms;
will-change: transform;
}
.container.buscaVisivel {
transform: translateY(100px);
}
.container {
transition: transform 500ms;
transform: translateZ(0);
}
.container.buscaVisivel {
transform: translateY(100px);
}
46. agrupar read / write DOM (fastdom)
animação com CSS
animação GPU (transform / opacity)
48. registre o input em <100ms
o máximo em background
indique progresso se >500ms
51. quebre a tarefa
setTimeout / setImmediate / requestAnimationFrame / requestIdleCallback
coisas pesadas em background
Web Workers
52. // carrega videos assincronamente
var containers = document.querySelectorAll('.elasticMedia-container[data-src]'
for (var i = 0; i < containers.length; i++) {
var src = containers[i].getAttribute('data-src');
containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f
}
53. setTimeout(function(){
// carrega videos assincronamente
var containers = document.querySelectorAll('.elasticMedia-container[data-src]'
for (var i = 0; i < containers.length; i++) {
var src = containers[i].getAttribute('data-src');
containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f
}
}, 500);
54. requestIdleCallback(function(){
// carrega videos assincronamente
var containers = document.querySelectorAll('.elasticMedia-container[data-src]'
for (var i = 0; i < containers.length; i++) {
var src = containers[i].getAttribute('data-src');
containers[i].innerHTML = '<iframe class="elasticMedia" src="' + src + '" f
}
});