Navegadores por de baixo dos panos - Intercon2018

ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto
e cientista da computação pela PUC-SP anabastos.me

JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR LAMBDA.IO t.me/lambdastudygroup github.com/lambda-study-group meetup.com/Lambda-I-O-Sampa- Meetup

NAVEGADORES POR DE BAIXO DOS PANOS

Estrutura high level do navegador Fluxo renderização de paginas web
Otimizações de critical render path

Qual a função do navegador?

Apresentar o conteúdo requisitado de um servidor de acordo com
a especificação do HTML CSS(W3C) e servindo em uma janelinha

COMPONENTES PRINCIPAIS DO NAVEGADOR

USER INTERFACE BROWSER ENGINE RENDERING ENGINE NETWORKING JS INTERPRETER UI
BACKEND

USER INTERFACE

BACKEND

BROWSER ENGINE Intermedia UI e a engine de renderização Responsavel
por persistência dados(Cookies, LocalStorage, IndexedDB). Web APIs(canvas, WebSocket, Animation, WebWorkers, WebGL)

BACKEND

RENDERING ENGINE

WEBKIT GECKO BLINK TRIDENT

THE MAIN FLOW

anabastos.me

BACKEND

Parsear o URL(procolo, dominio) Request DNS (anabastos.me => 63.245.208.161) Abre
uma conexão TCP Envia uma requisição HTTP

SERVERZINHO HTTP/1.1 200 OK Content-Type: text/html RESPONSE

SERVERZINHO HTTP/1.1 200 OK Content-Type: text/css RESPONSE

O conteúdo requisitado é carregado em pequenos chunks.

CONCURRENT REQUESTS

style.css index.html dog.png britneySpears- toxic.mp3 ?????

FLUXO DE RENDERIZAÇAO

h1 [] [ text “Olá mundo”] p [ class =”alert”]
[ text “tudo bem?”] <h1>Olá</h1> <img src=”dog.png”> h1 [] [ text “Olá mundo”] p [ class =”alert”] [ text “tudo bem?”] h1 { color: red; }

BYTES 3C 62 6F 64 79 3E 48 65 6C
6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C 2F 21 73 70 61 6E E 77 6F 72 6C 64 21 3C 2F 21 73 70 61 6E E 77 6F 72 6C 64 21 3C 2F 21 73 70 61 6E 3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 E 77 6F 72 6C 64 21 3C 6E E 77 6E E8 77 B2 6E E 77 6E E8 77 B2 B1 CHARACTERS(UTF-8) <html><head></head> <body> <h1>Olá</h1> <p>tudo bem?</p> </body> </html>

PARSER Construção da árvore de renderização

PARSEAR Parsear significa traduzir uma estrutura para algo que o
código possa usar. O resultado geralmente é um árvore de nós que representam a estrutura dos documentos

GRAMMARS REGRAS DE SYNTAX QUE O DOCUMENTO DEVE SEGUIR DE
ACORDO COM A LINGUAGEM TODA LINGUAGEM TEM UMA GRAMATICA DETERMINISTICA(VOCABULARIO) ISSO SE CHAMA “CONTEXT FREE GRAMMAR”

A engine começa a parsear o HTML e converte-lo a
“Nós da DOM” Esses DOM nós se tornam uma arvore chamada “content tree”.

CHARACTERS(UTF-8) <html><head>...</head> <body> <h1>Olá Intercon</h1> <p>tudo bem?</p></body></html> CONSTRUÇÅO DE ÁRVORE
TOKENIZAÇÅO ANALISE LEXICA ANALISE SINTATICA { PARSER

ANALISE LEXICA (SE O VOCABULARIO FAZ SENTIDO) ANALISE SINTATICA (SE
FAZ SENTIDO) Oi Ash87h12d Oi tudo bom? ? oi tudo

ANALISE LEXICA Com as regras da gramática quebra o código
em tokens internamente que definem suas propriedades e regras.

Eu vou no intercon Pronome Verbo Contração Substantivo

Dentro do HTML tenho inicio de tags, fim de tags,
nomes de tributos e valores de atributos

<body>Hello</body> startTag Text endTag

Eu vou no intercon <body>Hello</body> HTML BODY ‘Hello’ ?

[ text “tudo bem?”] <h1>Olá</h1> <img src=”dog.png”> <h1> </h1> l á StartTag: h1 EndTag: h1 Character Character Character O TOKENS <img> ImageTag

<htm> span { clor: #FFFF } consolr.log

Esses tokens são enviados para o construtor da árvore que
os reconhece e monta a nossa DOM.

ANALISE SINTATICA É responsável por construir uma árvore de nós
analisando se a estrutura do documento está de acordo com as regras sintáticas

HTMLHtmlElement HTMLBodyElement HTMLHeaderElement HTMLHeadElement Olá <h1> </h1> l á O
<img> HTMLImageElement

[ text “tudo bem?”] <div> <h1>Olá</h1> <div> <img src=”dog1.png”> <img src=”dog2.png”> </div> </div>

HTMLHtmlElement HTMLBodyElement HTMLHeadElement HTMLHeaderElement Olá HTMLDivElement HTMLImageElement HTMLDivElement HTMLImageElement

O resultado final de todo esse processo é o Document
Object Model, ou "DOM", da nossa página simples, que é usado pelo navegador para todos os demais processamentos da página.

BYTES CHARACTERS CONSTRUÇÅO DE ÁRVORE TOKENIZAÇÅO

Enquanto a DOM estava sendo renderizada nosso style.css é encontrado
referenciado em nosso head. Assim como o HTML precisamos converter o CSS pelo mesmo processo desta vez criando um “CSS Object Model” ou CSSOM

“Flex” e o”Bison” são parser generators do WebKit para parsear
automaticamente de arquivos com gramática CSS. As regras de objetos CSS contêm seletores e a declaração dos objetos correspondentes a gramática CSS.

[ text “tudo bem?”] h1 { color: red } CSSStyleElement CSSRule Selectors h1 Declaration Color red

No momento de calcular os estilos da página o navegador
começa com a regra mais aplicável(body) e logo em seguida vai refinando para as regras mais específicas.

BYTES CHARACTERS CONSTRUÇÅO DE ÁRVORE TOKENIZAÇÅO JAVASCRIPT CSS

DOM CSSDom

Com a DOM e a CSSOM juntos o navegador consegue
criar a árvore de renderização. O navegador pinta cada nó da pagina. Todo esse processo toma tempo e pode impactar na performance da pagina web.

DOM CSSDom Render Tree ATTACHMENT

BODY IMG H1 Color: Red; HEAD HTML RENDER TREE

LAYOUT / REFLOW Layout é o processo recursivo que começa
da raiz da arvore(<html>) e continua recursivamente por toda a hierarquia do HTML computando informação geométrica de que cara render requer Dando as exatas coordenadas de onde cada nó deve aparecer na tela.

BODY IMG H1 Color: Red; HEAD HTML RENDER TREE Posição:
(0,0) Dimensão: Viewport Dimensão: Block

BACKEND

PAINTING A camada UI Backend tem o papel de atravessar
cada elemento da render tree desenhando usando toda a UI da página.

BYTES CHARACTERS CONSTRUÇÅO DE ÁRVORE TOKENIZAÇÅO JAVASCRIPT

BACKEND

SPIDERMONKEY V8

O javascript pode criar e modificar todo o DOM ou
o CSSOM. Quando o analisador do HTML encontra uma tag “script” ela para toda a construção da DOM e só retoma quando conclui a execução.

Para melhorar a experiencia do usuario o engine de renderização
vai tentar mostrar o conteúdo na tela assim que possível então não espera que outro HTML seja parseado até começar a construir a página

OK DE QUE ISSO IMPORTA?

CRITICAL RENDER PATH

Série de eventos envolvendo baixar resources html css e scripts,
processar e renderizar o primeiro pixel na tela.

Se a pagina html contêm algum script altamente bloqueante o
render start, o tempo levado para receber o primeiro byte de dados para o URL primário, vai ser atrasado

A primeira visualização da página ou o que o usuário
vê é crítica para experiência do usuário. Tentar otimizar cada passo no critical render path vai acelerar o processos de renderização

OTIMIZAR?

PRIORIDADES

Otimizando a ordem de cada recurso crítico baixado e fazendo
lazy-loading recursos não críticos podemos minimizar o tempo de total do critical render path.

Digamos que você tem um arquivo Javascript: <script src="test.js"></script> Esse
script também é bloqueante na renderização do navegador pois aguarda até que o recurso seja retornado.

ASYNC vs DEFER

Tanto o HTML quanto o CSS são recursos bloqueantes, ou
seja, não existe sem renderização sem que ambos tenham uma arvore de renderização.

MEDIA CSS

PRELOAD vs PREFETCH

INITIAL PAYLOAD

Minimizar o tamanho dos bytes de resources críticos pode reduzir
o overhead no processo de renderização

IMAGENS Existem técnicas de otimização de imagens para reduzir o
load time da página(compressão, escala, CSS sprites) Prefira efeitos CSS como sombras ou gradientes para evitar imagens.

Diminuir o tamanho do código de bibliotecas

React -> Preact Ramda -> Rambda Lodash -> UnderWater Immutable
-> Immutable-Light

Diminuir o tamanho dos pacotes a serem carregados

WEBPACK

node_modules

DUPLICAÇAO DE CODIGO

SplitChunksPlugin Separa código que é da aplicação e o que
é utilitário Listando bibliotecas como “vendor” faz com que se crie um arquivo individual que o browser consegue cachear o conteúdo com mais facilidade.

Pra lidar com código bloqueante Javascript...

CODE SPLITTING & LAZY LOAD

O code splitting permite que você divida seu código em
pequenos bundles que podem ser carregados sob demanda ou em paralelo. Com isso você tem bundles menores e controle de prioridade sobre seus recursos.

/home /about /contact Pagina Inicial () => import('./About') () =>
import('./Contact)

ensure Dynamic Import está em stage3 da proposal para o
js Plugin Babel (syntax-dynamic-import) require.ensure([/* dependencies */], require => { const Foo = require('foo'); }, error => { // handle error }, 'custom-bundle-name');

Web Developers Google - Critical Rendering Path developers.google.com/web/fundamentals/performance/critical-re ndering-path/ How
browsers work internally - Tali Garsiel - Front-Trends 2012 vimeo.com/44182484 How Browsers Work: Behind the scenes of modern web browsers html5rocks.com/en/tutorials/internals/howbrowserswork

OBRIGADA :) speakerdeck.com/anabastos anabastos.me github.com/anabastos @naluhh @anapbastos

Navegadores por de baixo dos panos - Intercon2018

Navegadores por de baixo dos panos - Intercon2018

More Decks by Ana Luiza Portello

Other Decks in Programming

Featured

Transcript