Otimização é Tudo. Entenda como.

Olá, eu sou o Kirey e como o CEO da NMBAH sou exigente até demais com os apps lançados, e isso faz alguns deles nem se quer saírem, exatamente por não estarem perfeitos o suficiente. Eu valorizo robustez como um todo, e hoje trago dicas de como Otimizar apps web, e como esse trabalho é feito na NMBAH, primeiramente: Você deve entender que por mais que a tecnologia tenha evoluído, ela não é perfeita, seu código é gerenciado em hierarquia, os do topo são executados primeiro, e os de baixo são executados em ordem, descendo as linhas, uma coisa que vejo muitos apps pecarem é o tamanho do código Pode parecer que não, mas tamanho importa, e quanto mais linhas seu código tiver, mais Lento e Pesado ele vai se tornar, e primeiramente para otimizá-lo você deve tirar a Identação. Identação é oque consideram "organização" mas pelo contrário isso atrasa os projetos, porque o código fica extremamente extenso e largo, com linhas sendo puladas, espaços ou Tab; Espaços são caracteres, se você enche seu código de Espaços o computador do usuário ainda vai ler eles, o computador não pula a leitura dos espaços, eles são lidos como qualquer caractere comum, porém sem executar nenhum gatilho, em binário o espaço é uma coluna "vazia" especificamente: 00100000 Seu computador precisa de tempo pra processar esse binário, como se estivesse lendo qualquer outro caractere e o hábito de encher o script de espaços o torna lento, e quando mais espaço tiver entre uma palavra, script ou caractere e outro, mais Demorado é essa leitura Pode parecer insignificante, mas não estamos falando de 1 Espaço, eles podem ser mais de 20 Mil se for um app complexo e grande, e a melhor forma de otimizar isso é colar os caracteres ao máximo uns nos outros como: @keyframes popIn { 0%{transform:scale(0.8);opacity:0;} 100%{transform:scale(1);opacity:1;}} Isso não quebra o código, e embora Visualmente nada pareça ter mudado, vários Milisegundos foram economizados no processamento, e se seu servidor estiver usando Tab é pior ainda, pois o Tab é um caractere mais pesado, ele pesa mais que o espaço, porquê É um espaço, só que mais largo, e como ocupa mais espaço, geralmente tem mais zeros ou uns, variando o modelo. Isso não compromete seu desempenho, pelo contrário, você move os olhos bem menos, gastando menos tempo scrollando, arrastando e até editando, além de que isso melhora sua Cognição, já que seu cérebro trabalha mais, processando mais dados e sendo forçado a gerenciá-los separadamente, te ajudando a ser mais apto na detecção de Erros. Outra forma essencial de otimização é que o código seja o mais claro possível Para containers que abrem uma única vez: openModal.addEventListener('click', () => { modal.classList.remove('hide'); modal.classList.add('show'); }); Para otimizar o processo e fazer um botão que possa ser clicado múltiplas vezes abrindo e fechando em função True/False: function toggleModal() { const modal = document.getElementById('modal'); modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex'; modal.classList.remove('hide'); } Lembrando que o display tenha: !important Principalmente nas classes Hide e Show, que podem facilitar muito seu trabalho, como dito Hide é menor que Hidden, gasta menos processamento, tempo, e funciona da mesma forma, igualmente ao Show. Outra coisa que faz toda a diferença é na forma como você define os objetos: Isto é executado em 0.10000ms ↓ function toggleConsole() { const consoleBox = document.getElementById('console-box'); consoleBox.style.display = consoleBox.style.display === 'flex' ? 'none' : 'flex'; } Isto é executado em 0.9993 ms ↓ function toggleCo(){const c=document.getElementById('co');c.style.display=c.style.display==='flex'?'none':'flex'; } Isso é essencial principalmente quando seu app quer ser Inclusivo, e é oque a NMBAH faz, até mesmo pessoas com celulares fracos devem conseguir usar o app, além do Peso do arquivo ser menor, a execução é mais rápida porquê a CPU gasta menos tempo lendo. Embora o número seja pequeno, você pode economizar Segundos da vida do seu usuário. Principalmente se o código é grande. Embora não seja significante pra um usuário que tenha um bom computador, a diferença será significante pra um dev pobre no Brasil usando um celular de plástico com um processador de 2016. Cada pequeno detalhe importa. Afinal, nem todo dispositivo tem o mesmo desempenho, e alguns lêem mais devagar, e o processo pode ser otimizado. No exemplo do CSS, compactá-lo significa que a página vai demorar alguns Milisegundos a menos para carregar, e isso Importa, principalmente quando o usuário está com pressa e precisa fazer algo com urgência, o espaçamento pode atrasar o carregamento de Janelas, Textos e até Efeitos, já que os espaços não são ignorados, embora não executem nada. Outra forma muito interessante de otimizar é o gerenciamento em hierarquia dos scripts, isso significa fornecer o script somente quando o usuário precisa dele

Apr 19, 2025 - 20:03

Olá, eu sou o Kirey e como o CEO da NMBAH sou exigente até demais com os apps lançados, e isso faz alguns deles nem se quer saírem, exatamente por não estarem perfeitos o suficiente.

Eu valorizo robustez como um todo, e hoje trago dicas de como Otimizar apps web, e como esse trabalho é feito na NMBAH, primeiramente:

Você deve entender que por mais que a tecnologia tenha evoluído, ela não é perfeita, seu código é gerenciado em hierarquia, os do topo são executados primeiro, e os de baixo são executados em ordem, descendo as linhas, uma coisa que vejo muitos apps pecarem é o tamanho do código

Pode parecer que não, mas tamanho importa, e quanto mais linhas seu código tiver, mais Lento e Pesado ele vai se tornar, e primeiramente para otimizá-lo você deve tirar a Identação.

Identação é oque consideram "organização" mas pelo contrário isso atrasa os projetos, porque o código fica extremamente extenso e largo, com linhas sendo puladas, espaços ou Tab;

Espaços são caracteres, se você enche seu código de Espaços o computador do usuário ainda vai ler eles, o computador não pula a leitura dos espaços, eles são lidos como qualquer caractere comum, porém sem executar nenhum gatilho, em binário o espaço é uma coluna "vazia" especificamente: 00100000

Seu computador precisa de tempo pra processar esse binário, como se estivesse lendo qualquer outro caractere e o hábito de encher o script de espaços o torna lento, e quando mais espaço tiver entre uma palavra, script ou caractere e outro, mais Demorado é essa leitura

Pode parecer insignificante, mas não estamos falando de 1 Espaço, eles podem ser mais de 20 Mil se for um app complexo e grande, e a melhor forma de otimizar isso é colar os caracteres ao máximo uns nos outros como:

@keyframes popIn {
0%{transform:scale(0.8);opacity:0;}
100%{transform:scale(1);opacity:1;}}

Isso não quebra o código, e embora Visualmente nada pareça ter mudado, vários Milisegundos foram economizados no processamento, e se seu servidor estiver usando Tab é pior ainda, pois o Tab é um caractere mais pesado, ele pesa mais que o espaço, porquê É um espaço, só que mais largo, e como ocupa mais espaço, geralmente tem mais zeros ou uns, variando o modelo.

Isso não compromete seu desempenho, pelo contrário, você move os olhos bem menos, gastando menos tempo scrollando, arrastando e até editando, além de que isso melhora sua Cognição, já que seu cérebro trabalha mais, processando mais dados e sendo forçado a gerenciá-los separadamente, te ajudando a ser mais apto na detecção de Erros.

Outra forma essencial de otimização é que o código seja o mais claro possível

Para containers que abrem uma única vez:

openModal.addEventListener('click', () => {
modal.classList.remove('hide');
modal.classList.add('show'); });

Para otimizar o processo e fazer um botão que possa ser clicado múltiplas vezes abrindo e fechando em função True/False:

function toggleModal() {
const modal = document.getElementById('modal');
modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex';
modal.classList.remove('hide'); }

Lembrando que o display tenha: !important
Principalmente nas classes Hide e Show, que podem facilitar muito seu trabalho, como dito Hide é menor que Hidden, gasta menos processamento, tempo, e funciona da mesma forma, igualmente ao Show.

Outra coisa que faz toda a diferença é na forma como você define os objetos:

Isto é executado em 0.10000ms ↓

function toggleConsole() { const consoleBox = document.getElementById('console-box'); consoleBox.style.display = consoleBox.style.display === 'flex' ? 'none' : 'flex'; }

Isto é executado em 0.9993 ms ↓

function toggleCo(){const c=document.getElementById('co');c.style.display=c.style.display==='flex'?'none':'flex'; }

Isso é essencial principalmente quando seu app quer ser Inclusivo, e é oque a NMBAH faz, até mesmo pessoas com celulares fracos devem conseguir usar o app, além do Peso do arquivo ser menor, a execução é mais rápida porquê a CPU gasta menos tempo lendo.

Embora o número seja pequeno, você pode economizar Segundos da vida do seu usuário. Principalmente se o código é grande.

Embora não seja significante pra um usuário que tenha um bom computador, a diferença será significante pra um dev pobre no Brasil usando um celular de plástico com um processador de 2016.

Cada pequeno detalhe importa. Afinal, nem todo dispositivo tem o mesmo desempenho, e alguns lêem mais devagar, e o processo pode ser otimizado.

No exemplo do CSS, compactá-lo significa que a página vai demorar alguns Milisegundos a menos para carregar, e isso Importa, principalmente quando o usuário está com pressa e precisa fazer algo com urgência, o espaçamento pode atrasar o carregamento de Janelas, Textos e até Efeitos, já que os espaços não são ignorados, embora não executem nada.

Outra forma muito interessante de otimizar é o gerenciamento em hierarquia dos scripts, isso significa fornecer o script somente quando o usuário precisa dele, geralmente a tecnologia atual já faz isso, e não é muita preocupação, mas por precaução pode se usar:

 onclick="loadChat()">Abrir Chat
 id="chat-container">

<script>
function loadChat() { if (!window.chatLoaded) {
const script = document.createElement('script');
script.src = 'chat.js'; 
script.onload = () => {
window.chatLoaded = true;
initChat();  };
document.body.appendChild(script); } else {
initChat(); }}
</script>

Esse método economiza processamento e evita carregar scripts inúteis antes da hora. Só adiciona o chat.js ao DOM quando realmente for usado, o que reduz o tempo de carregamento e consumo de memória.

Essa abordagem também pode ser chamada de lazy loading, e é ouro pra apps otimizados, principalmente se você tiver múltiplos módulos raramente usados. Serve tanto pra scripts pesados quanto leves, e evita carregar um arsenal de coisas que talvez o usuário nem toque. E quando tocar, carrega somente o devido script.

Isso pode ser feito assim também:

 onclick="loadChat()">Abrir Chat

<script>
function loadChat() {
if (!window.chatLoaded) {
const rawScript = document.getElementById('chat-script').textContent;
const script = document.createElement('script');
script.textContent = rawScript;
document.body.appendChild(script);
window.chatLoaded = true; }}
</script>

<script type="text/plain" id="chat-script">
console.log("Chat carregado");
function initChat() {
const div = document.createElement("div");
div.textContent = "Welcome! No messages yet.";
document.body.appendChild(div); }
initChat();
</script>

Isso impede que o script seja executado quando a página carregar, todo o CSS e HTML será renderizado, mas o conteúdo interno não existe nesse carregamento, mas quando o usuário clicar para Abrir, o conteúdo vai existir e será carregado.

Isso pode ser Invertido, quando o chat for carregado, você insere um script que bloqueia os scripts da Home, ou seja, tá na Ponto A, ele existe. Clicou no botão, Ponto A deixa de existir e Ponto B passa a existir.

Podendo ser aplicado em larga escala.