SlideShare uma empresa Scribd logo
1 de 31
Baixar para ler offline
Laís Lima
Designer/Front End Developer @ Cosmobots
Javascript por
debaixo dos panos
@laislima.dev @laislimadev@laislima_dev
Por que entender?
É fundamental que você saiba os poderes da linguagem com que
trabalha
Facilitar debug, quanto antes encontrar o problema mais
rápida será a reação
É essencial para o seu currículo! =P
Performance, quanto mais você conhece, mais você sabe os
poderes da linguagem
?
Javascript
engine
O que acontece quando a engine lê seu código
no Browser?
Quando o seu código é executado no browser, são criados:
Global Execution Context
Global Memory
Call Stack
Primeiro devemos saber que:
Javascript é single - threaded
Global
Execution
Context
Global
Memory
Javascript Engine
Call Stack
Como a engine lê seu código
// Legal, temos uma constante, vamos armazenar na Global Memory
const num = 2;
// olha só uma função, vamos armazenar ela na Global memory também
function pow(num) {
return num * num;
}
//Pronto terminei!!
Global
Execution
Context
Global
Memory
Javascript Engine
Call Stack pow:function
num: 2
pow();
Call stack help!
Global
Execution
Context
Global
Memory
Javascript Engine
Call Stack
pow:function
num: 2
pow()
pow:
Executando...
Mais dois contextos são criados
Estes são:
Local Execution Context
Local Memory
Global
Execution
Context
Global
Memory
Javascript Engine
Call Stack
pow:
pow()
pow: Local execution
context
Local memory
Local execution
context
Local memory
Javascript Engines
As engines são responsáveis por fazer com que a máquina entenda o nosso
código Javascript
Algumas delas são
V8 - Chrome e Node JS
Spider Monkey - Mozilla
Chakra - Microsoft Edge
Como a engine parece
Memory Heap Call Stack
Runtime no browser
Memory Heap Call Stack
AJAX - XMLHttpRequest
DOM - document
Timeout - setTimeout
Web API
onClick onLoad onDone
Callback queue
Event loop
Tá,vamos ver como funciona?
console.log('Olá');
setTimeout(() => {
console.log('Tudo bem?');
}, 5000);
console.log('Tchau');
Call Stack Web APIs
Callback queue
Event loop
Browser console
Olá
Tchau
() => {}
() => {}
console.log("Tudo bem?")
Tudo bem?
Timer () => {}
console.log("Olá")setTimeout () => {}console.log("Tchau")
Vamos nos aprofundar mais um pouco...
Entenda sobre o V8, uma engine javascript
É open source e mantido pelo google
https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775
É escrito em C++ (estaticamente tipado
enquanto javascript é dinamicamente
tipado)
Primeira engine projetada para
aumentar a performance da execução do
javascript no navegadorv8.dev
Algumas threads do V8
Existe uma thread principal que busca seu código, compila e então executa
Uma thread para otimizar o código que está sendo executado na principal
threads para lidar com varreduras e garbage collector
Classe oculta
São layouts de objetos que são criados em tempo de execução
se são apontados pelo ponteiro do objeto na memória
Ponteiro
classe oculta
inicial C0
Classe oculta
function Point(x) {
this.x = x;
}
var p1 = new Point(1);
Classe oculta
Ponteiro
classe oculta
inicial C1
para a
propriedade x
classe oculta
inicial C0
Inlining
substituir invocação da função pelo corpo da mesma
Inline Caching
Muitas chamadas para o mesmo método tendem a ocorrer para o
mesmo tipo de objeto.
Código de máquina
V8 compila direto para código de máquina (bytecode),
consegue otimizar o mesmo e trocar em tempo de execução isto
é uma tarefa muito complexa.
Garbage Collector
ao invés de percorrer todo o heap, tentando marcar cada possível objeto, ele apenas marca
parte do heap, e então volta para a execução normal. A próxima parada do GC ai continuar de
onde o passo anterior do Heap parou. isso permite muitas pausas curtas durante a execução
normal.
Dicas de performance
Métodos: Por conta do inline caching chamar o mesmo método
várias vezes...
Propriedades de objetos: Sempre instancie propriedades de
objetos na mesma ordem
Propriedades dinâmicas: adicionando propriedades para um objeto depois da
instanciação vai forçar uma classe oculta a mudar e desacelerar qualquer método que estava
otimizado pela classe oculta anterior. Ao invés disso, atribua todas as propriedades de um
objeto no seu construtor.
Fontes:
https://medium.com/reactbrasil/como-o-javascript-funciona-o-event-loop-e-o-surgimento-da-programa%C3%A7%C3%A3
o-ass%C3%ADncrona-5-maneiras-de-18d0b8d6849a
https://medium.com/reactbrasil/como-o-javascript-funciona-uma-vis%C3%A3o-geral-da-engine-runtime-e-da-call-st
ack-471dd5e1aa30
https://medium.com/reactbrasil/como-o-javascript-funciona-dentro-da-engine-v8-5-dicas-sobre-como-escrever-c%C
3%B3digo-otimizado-e05af6088fd5
https://www.youtube.com/watch?v=p-iiEDtpy6I
https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=370s
https://v8.dev/
Agradecimentos
Pessoas que contribuíram para este conteúdo:
Kamila Santos, https://www.linkedin.com/in/kamila-santos-oliveira
Daniel Martins, https://www.linkedin.com/in/daniel-martins-251b12127
Julio Silva, https://www.linkedin.com/in/silva-julio
Lucas Santos, https://www.linkedin.com/in/lhs-santos/
Obrigada ˆˆ
@laislima.dev @laislimadev@laislima_dev

Mais conteúdo relacionado

Mais procurados

Phpreact flisol-fb-2014
Phpreact flisol-fb-2014Phpreact flisol-fb-2014
Phpreact flisol-fb-2014
Adler Medrado
 
Introdução ao java fx e visage
Introdução ao java fx e visageIntrodução ao java fx e visage
Introdução ao java fx e visage
jesuinoPower
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
Giovanni Bassi
 

Mais procurados (20)

Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
Programação Orientada a Testes
Programação Orientada a TestesProgramação Orientada a Testes
Programação Orientada a Testes
 
Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021Usando Git na Unity - Gaming For All 2021
Usando Git na Unity - Gaming For All 2021
 
Entendendo Conceitos Caching com PHP
Entendendo Conceitos Caching com PHPEntendendo Conceitos Caching com PHP
Entendendo Conceitos Caching com PHP
 
Jugvale
JugvaleJugvale
Jugvale
 
Sobre TDD - Tech Friday da Everis Uberlândia
Sobre TDD - Tech Friday da Everis UberlândiaSobre TDD - Tech Friday da Everis Uberlândia
Sobre TDD - Tech Friday da Everis Uberlândia
 
Phpreact flisol-fb-2014
Phpreact flisol-fb-2014Phpreact flisol-fb-2014
Phpreact flisol-fb-2014
 
Performance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.jsPerformance do ASP.NET Core, um comparativo com Node.js
Performance do ASP.NET Core, um comparativo com Node.js
 
JEE nas nuvens: uma introdução ao openshift
JEE nas nuvens:  uma introdução ao openshiftJEE nas nuvens:  uma introdução ao openshift
JEE nas nuvens: uma introdução ao openshift
 
Deixando de ser moleque com PHP
Deixando de ser moleque com PHPDeixando de ser moleque com PHP
Deixando de ser moleque com PHP
 
Por que Node JS?
Por que Node JS?Por que Node JS?
Por que Node JS?
 
Implementando APIs multiplataforma com ASP.NET Core 2.0 - .NET Conf Local 201...
Implementando APIs multiplataforma com ASP.NET Core 2.0 - .NET Conf Local 201...Implementando APIs multiplataforma com ASP.NET Core 2.0 - .NET Conf Local 201...
Implementando APIs multiplataforma com ASP.NET Core 2.0 - .NET Conf Local 201...
 
A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!A importância de DDD e o Domain Model na construção de APIs!
A importância de DDD e o Domain Model na construção de APIs!
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
 
Introdução ao java fx e visage
Introdução ao java fx e visageIntrodução ao java fx e visage
Introdução ao java fx e visage
 
Vagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizadoVagrant - ambiente de desenvolvimento virtualizado
Vagrant - ambiente de desenvolvimento virtualizado
 
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
 
Tdd com Node.js
Tdd com Node.jsTdd com Node.js
Tdd com Node.js
 
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
.NET Core 2.0, .NET Standard 2.0 e ASP.NET Core 2.0: uma visão geral
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
 

Semelhante a Javascript por debaixo dos panos

Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Vinicius Reis
 
Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2
PrinceGuru MS
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
Carlos Santos
 
Java Fundamentos
Java FundamentosJava Fundamentos
Java Fundamentos
Wilson Lima
 

Semelhante a Javascript por debaixo dos panos (20)

Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Java 01
Java 01Java 01
Java 01
 
NodeJS Under the Hood - Concurrency and Multithreading
NodeJS Under the Hood - Concurrency and MultithreadingNodeJS Under the Hood - Concurrency and Multithreading
NodeJS Under the Hood - Concurrency and Multithreading
 
Trabalhando com Threads em JAVA
Trabalhando com Threads em JAVATrabalhando com Threads em JAVA
Trabalhando com Threads em JAVA
 
Introdução ao Node.js
Introdução ao Node.jsIntrodução ao Node.js
Introdução ao Node.js
 
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
Hangout  Tempo Real Eventos - Nodejs - Os Primeiros PassosHangout  Tempo Real Eventos - Nodejs - Os Primeiros Passos
Hangout Tempo Real Eventos - Nodejs - Os Primeiros Passos
 
Esta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com RailsEsta começando a programar para a web? Então começe com Rails
Esta começando a programar para a web? Então começe com Rails
 
Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2
 
Node.js para desenvolvedores .NET
Node.js para desenvolvedores .NETNode.js para desenvolvedores .NET
Node.js para desenvolvedores .NET
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
Introdução aos computadores e à World Wide Web
Introdução aos computadores e à World Wide WebIntrodução aos computadores e à World Wide Web
Introdução aos computadores e à World Wide Web
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVA
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Java Fundamentos
Java FundamentosJava Fundamentos
Java Fundamentos
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta Performance
 
TypeScript - Campus party 2013
TypeScript - Campus party 2013TypeScript - Campus party 2013
TypeScript - Campus party 2013
 
Criando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & DockerCriando Webservice REST com NodeJS, NoSQL & Docker
Criando Webservice REST com NodeJS, NoSQL & Docker
 
TDC2018SP | Trilha Arq .Net - Performance e feature
TDC2018SP | Trilha Arq .Net - Performance e featureTDC2018SP | Trilha Arq .Net - Performance e feature
TDC2018SP | Trilha Arq .Net - Performance e feature
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigital
 
Node.js
Node.jsNode.js
Node.js
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 

Javascript por debaixo dos panos