{"id":279,"date":"2017-08-28T15:50:00","date_gmt":"2017-08-28T18:50:00","guid":{"rendered":"https:\/\/cahfelix.tech\/blog\/?p=279"},"modified":"2025-10-25T17:11:03","modified_gmt":"2025-10-25T20:11:03","slug":"entendendo-o-virtual-dom-a-otimizacao-dos-frameworks-modernos","status":"publish","type":"post","link":"https:\/\/cahfelix.tech\/blog\/entendendo-o-virtual-dom-a-otimizacao-dos-frameworks-modernos\/","title":{"rendered":"Entendendo o Virtual DOM: A Otimiza\u00e7\u00e3o dos Frameworks Modernos"},"content":{"rendered":"\n

O Virtual DOM \u00e9 um dos conceitos-chave por tr\u00e1s da performance e da efici\u00eancia de frameworks como React e Vue. Se voc\u00ea j\u00e1 entende a estrutura do Document Object Model (DOM), este artigo ir\u00e1 mostrar por que o Virtual DOM<\/em> existe e como ele resolve os problemas de desempenho na web moderna.<\/p>\n\n\n\n

Coisas importantes de saber antes de come\u00e7armos:<\/h3>\n\n\n\n
    \n
  1. O DOM (Document Object Model) \u00e9 a representa\u00e7\u00e3o dos elementos de uma p\u00e1gina. Se voc\u00ea precisa de uma base s\u00f3lida sobre este conceito, recomendamos a leitura do nosso artigo: Entendendo o DOM: o Cora\u00e7\u00e3o da Web.<\/strong><\/li>\n\n\n\n
  2. O Virtual DOM<\/strong> \u00e9 um mecanismo de software que manipula o DOM Real de forma otimizada.<\/li>\n\n\n\n
  3. Embora n\u00e3o tenha sido inventado pelo React, faremos nossos estudos focados em como ele funciona nesse ecossistema.<\/li>\n<\/ol>\n\n\n\n

    O DOM \u00e9 Lento? Ele se Torna Lento!<\/h3>\n\n\n\n

    O problema n\u00e3o est\u00e1 na velocidade dos objetos do DOM em si, que s\u00e3o r\u00e1pidos. O que torna o processo de manipula\u00e7\u00e3o lento \u00e9 o trabalho subsequente que o navegador \u00e9 for\u00e7ado a fazer toda vez que o DOM \u00e9 alterado<\/strong>.<\/p>\n\n\n\n

    Toda vez que o JavaScript modifica um n\u00f3 do DOM, o navegador precisa executar uma s\u00e9rie de etapas caras e complexas:<\/p>\n\n\n\n

      \n
    1. Recalcular o CSS:<\/strong> Descobrir as regras de estilo que se aplicam aos elementos afetados.<\/li>\n\n\n\n
    2. Layout (Reflow):<\/strong> Recalcular a posi\u00e7\u00e3o e o tamanho exato de cada elemento na tela.<\/li>\n\n\n\n
    3. Paint (Repaint):<\/strong> Repintar (renderizar) a \u00e1rea afetada na tela do navegador.<\/li>\n<\/ol>\n\n\n\n

      Quando voc\u00ea faz uma altera\u00e7\u00e3o simples como:<\/p>\n\n\n\n

      JavaScript<\/p>\n\n\n\n

      document.getElementById('meuElementId').innerHTML = \"New Value\"\n<\/code><\/pre>\n\n\n\n
      O navegador executa todo o ciclo de Rec\u00e1lculo-Layout-Paint. Se sua aplica\u00e7\u00e3o faz dezenas ou centenas de manipula\u00e7\u00f5es diretas no DOM em uma \u00fanica a\u00e7\u00e3o do usu\u00e1rio, esse ciclo de re-renderiza\u00e7\u00e3o for\u00e7ada<\/em> se repete, causando lentid\u00e3o e queda de desempenho. A manipula\u00e7\u00e3o DOM direta e constante \u00e9 ineficiente.<\/strong><\/p>\n\n\n\n
      Compreendendo o Virtual DOM<\/h3>\n\n\n\n
      O que o Virtual DOM faz \u00e9 tentar minimizar todos estes est\u00e1gios, atuando como um intermedi\u00e1rio.<\/p>\n\n\n\n
      Podemos pensar nele como uma c\u00f3pia local do DOM (uma esp\u00e9cie de espelho) mantida em mem\u00f3ria<\/strong> (um objeto JavaScript). Dessa forma, ao inv\u00e9s de tocar o DOM Real diretamente, fazemos as altera\u00e7\u00f5es no Virtual DOM.<\/p>\n\n\n\n
      O React n\u00e3o<\/strong> vai modificar o DOM Real diretamente. Ele far\u00e1 as seguintes etapas:<\/p>\n\n\n\n
        \n
      1. Atualiza\u00e7\u00e3o do VDOM:<\/strong> O React atualiza seu DOM virtual, aplicando as novas mudan\u00e7as de estado.<\/li>\n\n\n\n
      2. Diffing (Compara\u00e7\u00e3o):<\/strong> O React compara o VDOM atual (o novo) com o VDOM anterior. Esse algoritmo encontra a diferen\u00e7a exata (o diff<\/em>) entre os dois estados.<\/li>\n\n\n\n
      3. Patching (Aplica\u00e7\u00e3o Otimizada):<\/strong> O algoritmo encontra o n\u00famero m\u00ednimo de opera\u00e7\u00f5es necess\u00e1rias<\/strong> para que o DOM Real reflita apenas essa diferen\u00e7a.<\/li>\n<\/ol>\n\n\n\n
        A Magia da Sala Desarrumada<\/h4>\n\n\n\n
        Imagine que sua casa \u00e9 o DOM Real.<\/p>\n\n\n\n
          \n
        • Manipula\u00e7\u00e3o Direta (Lenta):<\/strong> Voc\u00ea desarruma a sala, e para corrigir, voc\u00ea derruba a casa inteira e a reconstr\u00f3i. (Recalcula tudo).<\/li>\n\n\n\n
        • Virtual DOM (R\u00e1pida):<\/strong> Voc\u00ea desarruma a sala. O VDOM detecta que apenas<\/em> a sala mudou. Ele envia uma \u00fanica instru\u00e7\u00e3o para o DOM Real: “Mude apenas o conte\u00fado da Sala”.<\/li>\n<\/ul>\n\n\n\n
          Com isso, o navegador \u00e9 for\u00e7ado a fazer o caro ciclo de Layout e Paint apenas uma vez<\/strong> e apenas na \u00e1rea afetada, otimizando drasticamente o desempenho da aplica\u00e7\u00e3o.<\/p>\n\n\n\n
          Concluindo<\/h3>\n\n\n\n
          O Virtual DOM \u00e9 uma t\u00e9cnica e um conjunto de bibliotecas\/algoritmos que permitem aos frameworks (como React e Vue) melhorar o desempenho do front-end. Eles evitam o trabalho direto e constante com o DOM, trabalhando em vez disso com um objeto de JavaScript que imita a \u00e1rvore DOM, garantindo que o DOM Real s\u00f3 seja tocado quando for realmente necess\u00e1rio e apenas no m\u00ednimo essencial.<\/p>\n\n\n\n
          Obrigado por ler \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
          O Virtual DOM \u00e9 um dos conceitos-chave por tr\u00e1s da performance e da efici\u00eancia de frameworks como React e Vue. Se voc\u00ea j\u00e1 entende a estrutura do Document Object Model…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-279","post","type-post","status-publish","format-standard","hentry","category-fundamentos"],"aioseo_notices":[],"featured":false,"read_time":4,"_links":{"self":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":1,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":280,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions\/280"}],"wp:attachment":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}