Palestra ministrada no meetup Frontendsp sobre browsers internals

1. Browsers: Como vivem?
O que fazem?

2. Quem sou eu?
• Vinicius Cavalcante (@vinicaval)
• Dev@Lambda3
• Ama Js <3
• Jogador de Fifa e Rocket League
• Pai de 3 gatos

3. Agenda
• O que é um browser?
• Como funciona?
• Rede
• Html
• Css
• Js
• Por que eu deveria saber isso?
• Dúvidas?

5. Criador
Sir Tim Berners Lee
• Inventou internet

7. A internet era assim

8. 1994/1995

9. 1994/1995

10. 1994/1995

12. O que é um browser?

13. O que é um browser?

14. O que é um browser?
• Interpretador de HTML
• Interpretador de CSS
• Interpretador/compilador de JS
• Leitor de PDF
• E muito mais

15. Como funciona?

17. Como funciona?

18. Como funciona?
• HTTP Request

19. Como funciona?
• HTTP Response

20. Como funciona?
• Http Status Code
• 1xx – Informações
• 2xx – Sucesso
• 3xx – Redirects
• 4xx – Erros no client
• 5xx – Erros no server

22. Como funciona?
• A engine de renderização recebe os arquivos da camada de rede de
8kb em 8kb

23. Como funciona?
HTML DOM

24. Como funciona?
CSSOM

25. Como funciona?
• webkit

26. Como funciona?
• Gecko

27. Como funciona?

28. Como funciona?

29. Como funciona?

31. Como funciona?
Regras que afetam o layout

32. Como funciona?
Regras que afetam o paint

33. Como funciona?
Ordem de prioridade de CSS:
1 – Browser
2 – Página
3 – Página inline/important

34. Como funciona?
Especificidade de estilos CSS:
A base é 0 0 0 0, quanto mais à esquerda, mais específico.
0 0 0 0
Important/style ID Classes/pseudoclasses elementos

35. Como funciona?
Exemplos:
div.content
div.content a:hover
0 0 1 1
Important/style ID Classes/pseudoclasses elementos
0 0 2 2
Important/style ID Classes/pseudoclasses elementos

36. Como funciona?
• Main Thread
• Roda Js
• Cálculos gerais de HTML/CSS
• Cria o layout da página
• Pinta os elementos
• Carrega os elementos para a compositor thread

37. Como funciona?
• Compositor Thread
• Desenha elementos na tela utilizando a GPU
• Pede pra main thread atualizar elementos visíveis ou quase visíveis de partes
da página
• Vê quais partes da página estão visíveis
• Vê quais partes da página estão “para aparecer” quando o acontece o scroll
• Move partes da página quando acontece o scroll

39. Como funciona?
ECMAScript
- É o padrão de implementação que o Javascript segue.(Como os
padrões W3C para HTML/CSS)

40. Como funciona?
ECMAScript

41. Como funciona?
Virtual DOM x Shadow DOM
- Encapsulamento do DOM
- Menor número de alterações
- Mais rápido

42. Por que eu deveria saber isso?
Animações com CSS
Utilize opacity e transform (GPU)

43. Por que eu deveria saber isso?
Javascript é render blocking

44. Por que eu deveria saber isso?
Javascript é render blocking
• Use async/defer sempre que possível
• Scripts no final do html
• Minimificar tudo

45. Por que eu deveria saber isso?
Qualquer request feita no head vai atrasar o carregamento da página

46. Por que eu deveria saber isso?
Concatene e minimifique CSS
Tenha um styleguide

47. Por que eu deveria saber isso?
Use CSS para ícones simples
Comprima imagens

48. Por que eu deveria saber isso?
Use CSS para ícones simples
Comprima imagens

49. Por que eu deveria saber isso?
Remova css que não está sendo usado (gulp-uncss)

51. Perguntas?

52. Obrigado!
@vinicaval

53. Fontes
https://developers.google.com/web/fundamentals/performance/rendering/
https://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/
https://developers.google.com/web/fundamentals/performance/rail?hl=en
http://arvindr21.github.io/howBrowserWorks/#/
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
https://en.wikipedia.org/wiki/ECMAScript
https://tableless.com.br/faut-tolerant-base-progressive-enhancement/
https://docs.google.com/presentation/d/19R_E5B__kdE55L1bTpS6IFKbYbHq-
PQKKky4do5Yc6A/edit#slide=id.g105c64d69_182
https://speakerdeck.com/bevacqua/high-performance-in-the-critical-path
https://www.fourkitchens.com/blog/article/use-gulp-and-uncss-slim-down-your-css-framework/