32 / 68
POST
DO DIEGO
DEV WEB
32
Cargo:
Criador do
Tableless.com.br e
coordenador de
Front-end na Locaweb
Contato:
diego@
tabeless.com.br
Twitter:
@diegoeis
DIEGO EIS
eralmente, 80% do desempenho
de umwebsite ou produto de
internet está concentrado no
front-end. Todo mundo sabe que
a performance é importante.
Mesmo assim, grande parte das
equipes, por diversos motivos, não tratam
desse assunto como uma feature do projeto.
A grande maioria só pensa emmelhorar a
YHORFLGDGH GR SURMHWR DSHQDV QR ëQDO GR
desenvolvimento, quando seu HTML, CSS e JS
já foram feitos ou, até pior, quando o produto
está publicado e funcionando.
Existemmuitas decisões de UX, por exemplo,
TXH SRGHP LQîXHQFLDU QR GHVHPSHQKR GR
front-end. Esse é um dos motivos de pensarmos
sempre emMobile First, diminuindo as prioridades
e focando no conteúdo e em elementos que são
realmente importantes para o usuário.
Como esse tema é extenso, quero apenas
abordar algumas coisas que julgo serem
importantes para iniciantes. Guarde também esta
frase para uma pesquisa posterior: performance
as a feature. É um termo que tem sido usado para
demonstrar a preocupação com desempenho como
se fosse uma feature do projeto.
OPROCESSO
O browser segue passos importantes antes de
mostrar sua página na tela. É importante conhecer
o que acontece por baixo dos panos para entender
melhor como tunar seu produto. Os passos são:
1.
O browser monta o DOM
(DocumentObjectModel) do documento. O
DOM é uma representação do que será seu
HTML. Ele é essencial para o browser entender
a relação que os elementos têm entre si. Mas
lembre-se: o DOM não é o HTML. O HTML é o
UHVXOWDGR íQDO
2.
O browser monta o CSSOM
(CSS
ObjectModel), que é uma representação, como
o DOM, que guarda as regras de formatação dos
elementos do HTML.
3.
O browser junta as duas árvores
,
o DOM e o CSSOM, em uma única árvore
chamada RenderTree. Nela, o browser monta
uma árvore baseada nos elementos que serão
visíveis para o usuário. Isso quer dizer que
elementos que têm %%display: none%% não
vão constar na RenderTree.
4.
Depois de juntar as duas árvores
,
o browser calcula a geometria dos elementos,
colocando largura e altura. Feito isso, ele
posiciona o elemento na tela. Essa fase
chama-se Layout.
5.
Sabendo o tamanho e a posição
, o browser
entra na fase Paint. É quando ele irá pintar os
HOHPHQWRV H VHXV íOKRV QD WHOD UHQGHUL]DQGR
cores de background, imagens de background,
borda, drop-shadow e outras propriedades.
G
[
EXISTE MUITA
CIÊNCIA NESSE
ASSUNTO QUE
PODE AJUDÁ-LO
A ENTREGAR
UM PRODUTO
MAIS ÁGIL. O
CHROMEDEVTOOLS
AUXILIA NO
MONITORAMENTO
E ANÁLISE DESSE
PROCESSO,
FORNECENDO
DADOS PARA
ENTENDER OS
GARGALOS.
]
DEOLHONO
DESEMPENHO
LW
REVISTA LOCAWEB