30 / 68
POST
DO DIEGO
DEV WEB
30
Cargo:
Criador do
Tableless.com.br e
coordenador de
Front-end na Locaweb
Contato:
diego@
tabeless.com.br
Twitter:
@diegoeis
DIEGO EIS
Você sabe o que é CSSOM?
Já deve ter ouvido falar do
Document Object Model
(DOM). É uma representação
do que será o código HTML que
o browser vai renderizar para
o usuário. A maioria dos Devs acha que o
DOM é o próprio HTML. Está errado. Não
caia nessa armadilha. O DOM é apenas uma
árvore, que representa a relação entre os
nós do HTML.
O CSSOM é a mesma coisa, mas para
HVWLORV 7RGR HOHPHQWR +70/ QR íQDO GD
renderização, vai precisar de um estilo que
determinará sua posição, geometria etc. Antes
desse estilo ser aplicado, o CSSOM é criado.
Bem como o DOM, ele é uma representação da
árvore de estilo do documento.
O processo é bem simples. Segue um resumo
para você entender o que o browser faz antes de
mostrar o site para o usuário:
à 2 EURZVHU PRQWD R
DOM
(Document Object
Model) do documento. É 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 EURZVHU PRQWD R
CSSOM
(CSS Object
Model), que é uma representação, como o
DOM, que guarda as regras de formatação dos
elementos do HTML.
à 2 EURZVHU MXQWD DV GXDV £UYRUHV R '20
e o CSSOM, em uma única árvore chamada
RenderTree
. Na RenderTree, 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.
à 'HSRLV GH MXQWDU DV GXDV £UYRUHV R EURZVHU
calcula a geometria dos elementos, colocando
largura e altura. Feito isso, ele posiciona o
elemento na tela. Essa fase se chama
Layout
.
à 6DEHQGR GR VHX WDPDQKR H VXD SRVL©¥R
o browser entra da fase chamada
Paint
. Nessa
IDVH HOH YDL SLQWDU RV HOHPHQWRV H VHXV íOKRV
na tela, renderizando cores de background,
imagens de background, borda, drop-shadow e
outras propriedades.
(VVH SURFHVVR WRGR SRGH íFDU PDLV GHYDJDU
ou mais rápido dependendo de como você serve
seus assets. Todo arquivo CSS linkado em seu
documento vai bloquear a renderização do HTML.
A mesma coisa acontece com os arquivos de JS.
Isso se chama CSS ou JS bloqueante.
Embora seja um assunto básico, que todo
mundo que trabalha com web deveria saber, é
uma matéria muito rica e interessante para passar
um tempo se aprofundando mais. Então, aí vão
alguns termos para você procurar e continuar
RV HVWXGRV UHîRZ UHSDLQW SUHIHWFK UHQGHU WUHH
construction, critical render path.
V
[
OCSSOMÉ A
MESMA COISA,
MAS PARA
ESTILOS. TODO
ELEMENTOHTML,
NO FINAL DA
RENDERIZAÇÃO,
VAI PRECISAR
DE UMQUE
DETERMINARÁ
POSIÇÃO,
GEOMETRIA
]
O BÁSICO DA RENDERIZAÇÃO
CLIENT-SIDE
DOS BROWSERS
LW
REVISTA LOCAWEB