o nome disso é performance

895 visualizações

Publicada em

O principal objetivo da palestrar foi tentar mostrar alguns pontos de performance front-end que temos que tomar cuidado. Apenas citei coisas simples e que encontramos no dia a dia que podem ser melhorados. Falei também que a performance começa no seu pensamento, na maneira em que pensamos e projetamos a aplicação em nossa cabeça. Performance é pensar, saber solucionar problemas e evitar os futuros.

Acho esse tema muito importante e por isso pensei em sempre que puder está allimentando o mesmo para futuras palestras.

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
895
No SlideShare
0
A partir de incorporações
0
Número de incorporações
15
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

o nome disso é performance

  1. 1. Hi. I am @pedropolisenso
  2. 2. QUALIDADE EM DESENVOLVIMENTO!
  3. 3. VAMOS AS DICAS!
  4. 4. - USE CSS INLINE OU INCORPORADO EM CASOS ESPECÍFICOS CSS INLINE <div id=”exemplo” style=”background-color: #fc0;”> CSS INCORPORADO <style> background-color: #fc0; </style>
  5. 5. - PREFIRA <link> PARA IMPORTAR SEU CSS LINK <link rel=”stylesheet” type=”text/css” href=”style.css”>
  6. 6. - SEMPRE USE CSS AO TOPO DA PÁGINA <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> - IMPORTE SEUS SCRIPTS AO FINAL DA PÁGINA <script type=”texte/javascript” src=”script.js”></script> </body> </html>
  7. 7. - EVITE IMPORTAR ARQUIVOS EXTERNOS CSS <link rel=”stylesheet” type=”text/css” href=”http://s.glbimg. com/en/ho/static/CACHE/css/139363ed6ee9.css”> JAVASCRIPT <script type=”texte/javascript” src=”http://s.glbimg. com/en/ho/static/CACHE/js/96d91591782a.js”></script>
  8. 8. - COMENTE SEMPRE QUE POSSÍVEL - ORGANIZAÇÃO /* estilo da aplicação */ * { margin: 0; padding: 0; border: 0; } /* header do projeto */ header { width: ; height: ; background: ; }
  9. 9. - MODULARIZE SEMPRE QUE POSSÍVEL - ORGANIZAÇÃO AMBIENTE DE DESENVOLVIMENTO - style.sass - responsive.sass - style.css - responsive.css - style.main.css @import url(‘style.css’) @import url(‘responsive.css’) AMBIENTE DE PRODUÇÃO - style.min.css
  10. 10. - USE E EXPLORE PRÉ-PROCESSADORES - ORGANIZAÇÃO
  11. 11. EVITE @import EM ARQUIVOS DE PRODUÇÃO, PREFIRA A TAG <link> ERRO: O browser não faz download do arquivo e atrasa o carregamento em cascata da aplicação!
  12. 12. - MINIFIQUE SEUS ARQUIVOS CSS * CSSMIN *OPTION: { STYLE: “COMPRESSED” } - USE CSSLINT * Garanta a semântica correta - PS: Use Task Runner para facilitar
  13. 13. - USE CSS SPRITES E EVITE REQUISIÇÕES DESNECESSÁRIAS
  14. 14. - PREFIRA SVG DO QUE JPG, PNG, JPEG
  15. 15. - OTIMIZE SUA IMAGEM COM UMA FERRAMENTAS - IMAGEMIN
  16. 16. - USE O ATRIBUTO ALT=”” - OTIMIZAÇÃO /* notícia sidebar */ <img src=”img/imagem.jpg” alt=”Dilma aumenta salário”>
  17. 17. - EVITE CARREGAR IMAGENS EXTERNAS NA SUA APLICAÇÃO /* meu personagem */ <img src=”http://demosthenes.info/assets/images/thumbnails/homer-simp son.svg” alt=”personagem meu site”>
  18. 18. NUNCA USE!
  19. 19. NUNCA USE? CALMA, NÃO É POR AÍ
  20. 20. DE REPENTE...
  21. 21. - jQuery somente para request - Selecionar elementos do DOM -
  22. 22. - MODULARIZE SEMPRE QUE POSSÍVEL - ORGANIZAÇÃO AMBIENTE DE DESENVOLVIMENTO - script.js - validacao.js - mask.js AMBIENTE DE PRODUÇÃO - script.min.js
  23. 23. Diminua o número de requests!
  24. 24. CONSIDERE EM JAVASCRIPT - MINIFICAR ARQUIVOS DE PRODUÇÃO - USE JSHINT PARA VALIDAÇÃO SINTAXE - CONCATENE ARQUIVOS DE DESENVOLVIMENTO PS: USE TASKS RUNNERS PARA ISSO!
  25. 25. - EVITE RELER VETORES DENTRO DE LOOP’s // Evite isto for(var i = 0; i < objeto.length; i++){ console.log(‘acho que fiz besteira!’); } // Prefira var vetor = objeto.length; for(var i = 0; i < vetor; i++){ console.log(‘fiz melhor!’); }
  26. 26. - EVITE MANIPULAÇÕES DESNECESSÁRIAS // Evite isto for(var i = 0; i < 500; i++){ document.getElementById(‘MinhaLista’).innerHTML += ‘<span>’+ i +’</span>’; } // Prefira var MinhaLista = ‘ ’; for(var i = 0; i < 500; i++){ MinhaLista += ‘<span>’+ i +’</span>’; } document.getElementById(‘MinhaLista’).innerHTML += MinhaLista;
  27. 27. MAS É MUITA COISA
  28. 28. VAMOS AUTOMATIZAR?
  29. 29. CONSIDERE FERRAMENTAS PARA AUTOMATIZAR TUDO!
  30. 30. OS 10 MANDAMENTOS DE PERFORMANCE FRONT-END!
  31. 31. - 4 BEM AVENTURADO OS QUE MINIFICAM SEUS ARQUIVOS - 1 USAR SVG E NÃO JPG SOBRE TODAS AS COISAS - 3 USE UM PADRÃO PARA TODO SEMPRE - 2 SEJA SOLUCIONADOR DE PROBLEMAS - 5 PREOCUPE-SE COM A OTIMIZAÇÃO DA APLICAÇÃO - 6 PARE, PENSE E SAIBA PROJETAR - 7 IGNORE O IE - 9 AUTOMATIZE A APLICAÇÃO - 8 USE PATTERNS EM JAVASCRIPT SEMPRE QUE POSSÍVEL - 10 NÃO ACOMODE-SE, ESTUDE!
  32. 32. PageSpeed - Google
  33. 33. Yslow - Yahoo
  34. 34. Web Page Test
  35. 35. Browser Diet
  36. 36. LINKS USADOS COMO REFERÊNCIA => ARTIGOS - http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/ - http://www.uolhost.com.br/blog/top-10-formas-de-melhorar-a-performance-de-um-website#rmcl - http://youmightnotneedjquery.com/ - https://irlabr.wordpress.com/apostila-de-ihc/parte-1-ihc-na-pratica/6-usabilidade-e-suas-metas/ - https://www.youtube.com/watch?v=OnCHjU_eAkE - http://loopinfinito.com.br/2013/09/24/throttle-e-debounce-patterns-em-javascript/ => AWESOMES - https://github.com/davidsonfellipe/awesome-wpo - https://github.com/willianjusten/awesome-svg
  37. 37. Obrigado! email: pedropolisenso@gmail.com Redes: @pedropolisenso

×