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)
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”
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.
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.
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.
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.
LAYOUT / REFLOW Layout é o processo recursivo que começa da raiz da arvore() 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.
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
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
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.
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.
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.
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.
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
anabastos
antonicg
shibe23
honey32
jrsaruo
maepon
yamotuki
pospome
kizuku_miyagi
mfunaki
stewemetal
amixedcolor
okaharuna
frogandcode
eitanlees
holman
zakiyama
notwaldorf
jmmastey
kneath
yeseniaperezcruz
danielanewman
maltzj
jonrohan
addyosmani