Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Engines e runtimes do JavaScript

Engines e runtimes do JavaScript

O que são engines (motores) do JavaScript, também chamados de engines de TypeScript, e como funcionam. Entenda o funcionamento do Just In Time Compilation e, por fim, o que são e como funcionam os runtimes.

Avatar for Leonardo Zuin

Leonardo Zuin

May 09, 2025
Tweet

More Decks by Leonardo Zuin

Other Decks in Programming

Transcript

  1. Agenda • O que são motores (engines) do JavaScript; •

    Principais engines; • O que são runtimes do JavaScript; • Principais runtimes; • Conclusão.
  2. O que são motores (engines) do JavaScript • São interpretadores

    que analisam e executam código escrito em JS; • Converte o código JS para código de máquina que é interpretado pelo hardware; • Inicialmente eram apenas interpretadores (conversores), mas hoje têm performance melhorada pelo JIT; • Geralmente são desenvolvidos e mantidos pelos grandes browsers; • EcmaScript Engine também é um nome correto.
  3. O que são engines de JS • Parser: realiza análise

    lexical (escrita) no código JS, verifica erros e quebra em ASTs; • ASTs (Abstract Syntax Tree): uma árvore de comandos baseado no código, de forma que possa ser compreendido pelo Interpreter (playground AST); • Interpreter: realiza as primeiras interpretações do código a nível de máquina, lendo os ASTs gerados.
  4. O que são engines de JS • Profiler: é uma

    análise do motor para identificar que partes do código podem ser otimizadas para melhor performance; • Compiler: o compilador por fim gera o código de máquina que será executado pelo hardware. É aqui também que a engine realiza o JIT para garantir melhor performance.
  5. Principais engines • A página da Wikipédia sobre JavaScript Engines

    lista pouco mais de 40 que existem ou existiram no mercado; • Mas, como desenvolvedores FrontEnd, esses são os principais motores que devemos conhecer.
  6. Principais engines - V8 • De longe o mais usado

    atualmente, pois é o motor JS oficial do Chrome (seu criador); • Foi adotado também pelo NodeJS e Deno (ambos server side).
  7. Principais engines - SpiderMokey • Criado para o Firefox; •

    Foi o primeiro a implementar o JIT; • O MongoDB migrou do V8 para SpiderMonkey em sua versão 3.2.
  8. Principais engines - JavaScritpCore • Mais voltado para o ecossistema

    Apple; • Mudou de nome algumas vezes, é conhecido também como Nitro.
  9. Principais engines - Hermes • Criado pela Meta especificamente para

    o React Native; • Inicialmente, o React Native usava também o JavaScriptCore.
  10. Compilação Just In Time • Parsing: geração de ASTs (como

    vimos); • Compilation: transforma os ASTs em código de máquina; • Execution: execução do código; • Optimization: durante a execução, a engine verifica se há hot paths (trechos com chamadas frequentes) e os optimiza, injetando o novo código na compilação. Dessa forma, o processo todo é uma mistura de compilação AOT (ahead of time) e JIT. Fonte: https://www.freecodecamp.org/news/javascript-engine-and-runtime- explained/
  11. Compilação Just In Time • A função soma é um

    hot path/hot function e a engine vai otimizá-la, por exemplo, removendo verificações de tipagem desnecessárias, garantindo uma execução mais rápida; • Já no segundo caso, a engine pode aplicar uma deotimização (deoptmization) pois há um tipo diferente sendo informado para a função soma, portanto se faz necessário que exista as verificações para evitar erros. Fonte: ChatGPT
  12. O que são runtimes de JS • Pense no runtime

    como o ambiente que une tudo o que é necessário para a execução de um código JS; • Nos browsers, por exemplo, o runtime une, além do JS em si, as Web APIs e a fila de callbacks; • const mapped = array.map(…) <= JavaScript • document.getElementById(…) <= Não JavaScript, mas sim Web APIs (runtime) • O mesmo se aplica para runtimes server- side, como o site do NodeJS afirma: "It is independent from the underlying JavaScript runtime (for example, V8) and is maintained as part of Node.js itself" (ref.) Fonte: https://www.freecodecamp.org/news/javascript-engine- and-runtime-explained/
  13. Principais runtimes - Cliente • Do lado do cliente, os

    runtimes são representados pelos navegadores num geral; • Isso vale para desktops e dispositivos móveis, tudo o que executa JS localmente.
  14. Principais runtimes - Servidor • Já no servidor, o runtime

    mais popular é o NodeJS; • O Deno foi lançado oficialmente em 2020 pelo mesmo criador do NodeJS; • Curiosidade: vídeo do criador dizendo o que se arrepende do NodeJS.
  15. Conclusão • As engines são os motores de EcmaScript que

    interpretam, compilam e otimizam código JS para código de máquina; • Os mais comuns são: V8, SpiderMonkey e JavaScriptCore; • Os runtimes são o ambiente onde os motores funcionarão, juntamente com outras APIs e fila de execução; • Os mais comuns são: browsers em geral (client side) e NodeJS, DenoJS, Bun (server side).
  16. Referências • https://developer.mozilla.org/en- US/docs/Glossary/Engine/JavaScript • https://en.wikipedia.org/wiki/JavaScript_engine • https://www.educative.io/blog/javascript- engines •

    https://reactnative.dev/docs/hermes • https://www.freecodecamp.org/news/javascript- engine-and-runtime-explained/ • https://nodejs.org/api/n-api.html#node-api • https://www.youtube.com/watch?v=M3BM9TB- 8yA