Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cache, além do CTRL + F5

Cache, além do CTRL + F5

Evento: ThoughtWorks Internal Meetup

Apresentação reformulada sobre cache, explicando um pouco sobre como funcionava no passado e como é feito hoje, quais as limitações, ferramentas e técnicas que podemos utilizar para melhorar a usabilidade e performance de uma aplicação

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

November 26, 2020
Tweet

Transcript

  1. Cache Além do CTRL + F5

  2. Quem Sou • Designer por formação • Front-end, Animações, Segurança

    • Ciclista
  3. Agenda 1. Onde o cache pode ser útil

  4. Agenda 1. Onde o cache pode ser útil 2. Como

    era feito no passado
  5. Agenda 1. Onde o cache pode ser útil 2. Como

    era feito no passado 3. Como é feito hoje
  6. Agenda 1. Onde o cache pode ser útil 2. Como

    era feito no passado 3. Como é feito hoje 4. Estratégias
  7. – Uma pessoa que você conhece “Deve ser cache.”

  8. – A mesma pessoa do slide anterior “Limpa o cache

    que resolve.”
  9. Onde o cache pode ser aplicado?

  10. Servidor

  11. Servidor • NGINX como um proxy para servidor de cache

    • Chave no cabeçalho da requisição HTTP (Cache- Control, Last-Modified)
  12. Rede

  13. Rede • CDN (Content Delivery Network)

  14. Aplicação

  15. Aplicação • Técnicas como Memoization • Ferramentas como Memcached e

    Redis • Web API’s (AppCache, Service Workers, Storage)
  16. Cliente • Chave no cabeçalho da requisição HTTP (Cache- Control,

    Last-Modified) • Na camada do navegador
  17. Camada do Navegador

  18. UX OFFLINE

  19. UX OFFLINE PERFORMANCE

  20. UX OFFLINE PERFORMANCE NO BOLSO DE ALGUÉM

  21. Cache no passado AppCache

  22. None
  23. None
  24. None
  25. AppCache • Simples arquivo de texto ou qualquer outra extensão.

    Por exemplo: .dale • O mime-type do arquivo que era importante • Por padrão utilizava-se a extensão .appcache • Só atualiza o cache quando o manifesto for alterado
  26. caniuse.com/#search=appcache

  27. 5mb

  28. Mp3 de faroeste caboclo ~8mb

  29. Uma Música de 4min no Spotify ~6.5mb

  30. Cache hoje Service Workers e Cache API

  31. None
  32. Cache API • É uma API. • Permite utilizar diferentes

    abordagens de cache. • As requisições HTTP são cacheadas como um par de (requisição/resposta) • Pode cachear qualquer tipo de arquivo que seja transferido via HTTP
  33. caniuse.com/#search=service%20worker

  34. 2 1 3

  35. 1 2 3

  36. < 50mb

  37. Zoom ~48mb

  38. Sublime Text ~45mb

  39. Estratégias

  40. Primeiro vai na rede se tudo der errado, vai no

    cache
  41. None
  42. Primeiro vai no cache se tudo der errado, vai na

    rede
  43. None
  44. None
  45. None
  46. None
  47. Fallback genérico o importante é exibir algo pro usuário

  48. None
  49. None
  50. Exibe o do cache e depois vai na rede

  51. None
  52. None
  53. None
  54. – Alguém que eu não lembro “Otimização prematura é a

    raiz de todo o mal.”
  55. Referências • alistapart.com/article/request-with-intent-caching- strategies-in-the-age-of-pwas • medium.com/datadriveninvestor/all-things-caching-use-cases- benefits-strategies-choosing-a-caching-technology-exploring • developers.google.com/web/fundamentals/instant-and-offline/ offline-cookbook

    • hackernoon.com/client-network-server-and-application-caching- on-the-web • blog.bitsrc.io/understanding-service-workers-and-caching- strategies • serviceworke.rs/caching-strategies
  56. Obrigado!