2a:["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"performance.mark funciona como marcadores inteligentes. Ele te permite sinalizar pontos específicos no fluxo da aplicação, como \"início do request\" e \"fim do render\". Depois, use performance.measure para calcular a duração exata entre esses pontos, tornando visível quanto tempo cada etapa leva — direto no DevTools."}] 2b:["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-yellow-500/10 border-yellow-500/20 text-yellow-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-yellow-400","children":[["$","span",null,{"children":"⚠️"}],"Atenção"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Não se esqueça de limpar seus marks após usá-los em loops ou funções recorrentes para evitar acúmulo e leitura errada nos DevTools."}]]}]]}] 2c:["$","section","4",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Performance Observer: Coleta automática e ativa de performance no navegador"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Ao invés de medir tudo na mão, o Performance Observer age como um vigia. Ele recebe eventos nativos de performance assim que eles acontecem. Assim, você pode analisar qualquer evento em tempo real, inclusive em produção, e criar painéis ou logs detalhados para suas métricas vitais."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-green-500/10 border-green-500/20 text-green-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-green-400","children":[["$","span",null,{"children":"✅"}],"Atenção"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Observers funcionam inclusive em ambientes além do DevTools, tornando possível coletar dados de usuários reais — sem afetar experiência."}]]}]]}]]]}] 2d:["$","section","5",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Entry Types: Como aproveitar eventos, long tasks e além"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Com Entry Types você captura diferentes categorias de eventos: event para medir o tempo de resposta de interações do usuário, longtask para detectar travamentos flagrantes e outras categorias como navigation ou resource para ir além do trivial."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-yellow-500/10 border-yellow-500/20 text-yellow-400","children":[["$","h3",null,{"className":"font-semibold mb-3 flex items-center gap-2 text-yellow-400","children":[["$","span",null,{"children":"⚠️"}],"Atenção"]}],["$","div",null,{"className":"text-gray-300 leading-relaxed","children":[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Cuide para ouvir somente os tipos de entrada que realmente importam para seu caso. Capturar tudo pode gerar volumes massivos de dados e afetar o desempenho da análise."}]]}]]}]]]}] 2e:["$","section","6",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Event: Quanto tempo seu app demora para reagir de verdade"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Entry type event é voltado para medir interação: mostra, por exemplo, quanto tempo levou do clique do usuário ao resultado visível. Com esses dados, você descobre onde otimizar para deixar tudo mais ágil no que realmente importa."}],["$","div","1",{"className":"border rounded-xl p-6 mb-8 bg-blue-500/10 border-blue-500/20 text-blue-400","children":[["$","h3",null,{"className":"font-semib