# O que todo desenvolvedor front-end deve saber sobre renderização de páginas web

> Entenda como navegadores renderizam páginas web. Guia essencial sobre DOM, CSSOM e otimização de performance que todo dev front-end precisa saber.

URL: https://dpw.dev/miscelanea/desenvolvedor-frontend-renderizacao-paginas-web/  
Publicado em: 2014-10-13  
Categoria: miscelanea  
Tags: basico-da-web, performance, planejamento  
Autor: Tárcio Zemel

Saber mais sobre **renderização de páginas web** e como isso é importante para o **desenvolvimento web** é crucial -- e espanta o fato de 100% dos desenvolvedores front-end não aprenderem isso logo nos primeiros dias de seus estudos. Vários artigos cobrindo o assunto estão disponíveis, mas a informação é dispersa e, de certa forma, fragmentada.

> Artigo baseado em [What Every Frontend Developer Should Know About Webpage Rendering](http://frontendbabel.info/articles/webpage-rendering-101/).

A renderização tem de ser otimizada desde o início, quando o layout da página está sendo definido, e ser tão crucial quanto o papel de estilos e scripts têm na renderização de páginas. É interessantíssimo que profissionais/estudiosos da área conheçam certos truques para evitar alguns problemas de desempenho.

## Como navegadores renderizam página web

![](/images/blog/desenvolvedor-frontend-renderizacao-paginas-web/desenvolvedor-frontend-renderizacao-paginas-web-browser-paint.webp)

Resumidamente, estas são as ações de um browser ao renderizar uma página:

- O DOM (Document Object Model) é montado a partir do código HTML recebido de um servidor
- Os estilos são carregados e analisados (parsed)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml