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
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.
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 experiência do usuário 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 página 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. SVGS para logos.
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
ivargrimstad
lhespanha
pluu
murabayashi
joker1007
%20-%20%E3%82%B3%E3%83%94%E3%83%BC.png){kind=avatar}
picopico
taowata
daisukeshinoku
ogiwarat
suzukihoge
m_coder
tapompom
andyhume
schacon
cassininazir
3n
lara
rasmusluckow
jcasabona
michaelherold
davidbonilla
destraynor
zenorocha
kevinliebholz