Con el avance de los dispositivos tecnológicos y el aumento de capacidad de estos, parecería que en la actualidad cualquier cosa vale a la hora de desarrollar una página web. ¿Framework vs nativo? ¿Programación funcional? ¿Tiempos de procesamiento? ¿Memoria reservada? Un detalle mínimo puede inducirnos a cometer errores que ningún navegador perdonaría. Por ello no podemos olvidar la importancia de la performance, es fundamental repasar todo aquello que puede hacer peligrar nuestra web. Esta charla se centra en los aspectos que muchas veces olvidamos o no tenemos en cuenta a la hora de desarrollar

1. Front Performance
Ana Encinar
Madrid | November 30 - December 1, 2018
Ana Encinar @jnisabe

2. Ana Encinar
Fullstack developer en
@jnisabe

3. Ana Encinar @jnisabe

4. LA WEB
Evolución
× Hypertext document (http 0.9)
× Web page (http 1.0 y 1.1)
× Web application
Ana Encinar @jnisabe

5. Arquitectura del navegador
DOM, CSSOM y JavaScript
Ana Encinar @jnisabe

6. 6 conceptos básicos
Ana Encinar @jnisabe

7. 6 conceptos básicos
1. Tener en cuenta la performance
2. Asegurar la performance
3. Tamaño de los ficheros
4. La performance en JavaScript
5. Gestión de memoria
6. Gestión de recursos del navegador
Ana Encinar @jnisabe

8. Tener en cuenta la performance
Ana Encinar @jnisabe

9. Tener en cuenta la performance
¿Por qué es importante la performance?
× No más 2-3 segundos
Ana Encinar @jnisabe

10. Tener en cuenta la performance
¿Por qué es importante la performance?
× No más 2-3 segundos
× Un problema de rendimiento, es un problema de usabilidad
Ana Encinar @jnisabe

11. Ana Encinar @jnisabe

12. Asegurar la performance básica
Ana Encinar @jnisabe

13. Asegurar la performance básica
A qué llamamos performance básica
× La carga de las hojas estilos al principio del código HTML
× Carga del javascript al final del código HTML
× No bloquear los archivos. async / defer
× Optimización de elementos multimedia
× Imágenes vectoriales
× No base64
× Carga en diferido / lazy load
Ana Encinar @jnisabe

14. Asegurar la performance básica
Optimización de elementos multimedia
× Carga en diferido / lazy load - Data-src
Ana Encinar @jnisabe

15. Asegurar la performance básica
Optimización de elementos multimedia
× Carga en diferido / lazy load - Data-src
× jQuery plugin
Ana Encinar @jnisabe

16. Tamaño de los ficheros
Ana Encinar @jnisabe

17. Minificación js (task runner)
Tamaño de los ficheros
Ana Encinar @jnisabe

18. Performance en javascript
Ana Encinar @jnisabe

19. Performance en javascript
V8 performance
Ana Encinar @jnisabe

20. Performance en javascript
v8/spidermonkey performance
Abstract syntax tree
Ana Encinar @jnisabe

21. Performance en javascript
V8 performance
Ana Encinar @jnisabe

22. × Reflows
Performance en javascript
Ana Encinar @jnisabe

23. × Reflows
× ¿Cuantos eventos tengo en la vista?
× Usabilidad y procesamiento
Performance en javascript
Ana Encinar @jnisabe

24. Performance en javascript
Ana Encinar @jnisabe

25. × Reflows
× ¿Cuantos eventos tengo en la vista?
× Usabilidad y procesamiento
× Framework vs nativo
Performance en javascript
Ana Encinar @jnisabe

26. La optimización de netflix
× ¿Por qué Netflix cambia?
× Muchas conexiones desde móviles
× Conexiones de red lentas
× ¿Qué mejoró?
× Reduce el tiempo de carga un 50%
× Reduce el tamaño fichero js en cliente a menos de 200kb
Performance en javascript
Ana Encinar @jnisabe

27. La optimización de netflix
Performance en javascript
Ana Encinar @jnisabe

28. ¿Mejor o peor?
Performance en javascript
Ana Encinar @jnisabe

29. ¿Qué tipo de programación usar?
Performance en javascript
Programación imperativa
Programación funcional
http://jsben.ch/
Ana Encinar @jnisabe

30. Polyfill Array.prototype.find
Performance en javascript https://www.ecma-international.org/ecma-
262/6.0/#sec-array.prototype.find
Ana Encinar @jnisabe

31. Bucles
× Coste de O(N)
× El coste se hace mayor en operaciones
grandes
× Fácil de depurar
Recursividad
× Un if tiene coste equivalente O(1)
× Un algoritmo recursivo O(T(S1;S2))
× Muy útil en estructuras con forma de
árbol. El DOM tiene estructura de árbol
× No es fácil de depurar
Performance en javascript
Bucles vs recursividad
Ana Encinar @jnisabe

32. if
× El coste se hace mayor en operaciones
grandes
switch
× En casos de muchas comprobaciones, se
vuelve óptimo.
Performance en javascript
if vs switch
Ana Encinar @jnisabe

33. Performance en javascript
condicionales; bloque, optimización prematura, ternarias…
Ana Encinar @jnisabe

34. Las librerías y proyectos ajenos
NO siempre te salvan la vida.
NO te engañes
Ana Encinar @jnisabe

35. Descarga el hilo principal de
funcionalidad, y aprovecha los
workers
Ana Encinar @jnisabe

36. × Web worker
× No tiene acceso al DOM
× Sirve para descargar lógica
del hilo principal
× Workers Service
× Permite gestionar solicitudes
de red
× Push
× Background sync
× https
Performance en javascript
Workers Service vs web workers
Ana Encinar @jnisabe

37. Ana Encinar @jnisabe

38. Ana Encinar @jnisabe

39. Gestión de memoria
Ana Encinar @jnisabe

40. Algoritmo de referencias
Algoritmo de barrido
Gestión de memoria
Ana Encinar @jnisabe

41. Herramientas para detectarlo
Heap Profiles en Chrome
Jshint
Jslint
Gestión de memoria/Recolector de basura
Ana Encinar @jnisabe

42. Ana Encinar @jnisabe

43. Ana Encinar @jnisabe

44. Gestión de recursos del
navegador
Ana Encinar @jnisabe

45. HTTP1
Una conexión, 1 petición
× Cuello de botella
Mayor trafico de red, no hay priorización.
HTTP2
Peticiones en paralelo
× Multiplexación
IE: límite 2 peticiones en paralelo
Chrome, Firefox: 6 peticiones en paralelo (
versiones antiguas). 16 peticiones (últim.
Versiones)
Gestión de recursos del navegador
Ana Encinar @jnisabe

46. HTTP2; optimizaciones
Priorización
× Preload
× Prefetch
Server push
× Servidor SPDY (Firefox, Opera y Chrome)
× Push de servidor no de aplicación
× Gasto de recursos innecesario
Gestión de recursos del navegador
Ana Encinar @jnisabe

47. HTTP2; optimizaciones
server push– pros y contras
PROS
× Tiempo de obtención de recurso menor
CONTRAS
× Si el cliente ya tiene los recursos en
caché, la carga es un desperdicio
× La aplicación debe decidir si debe
empujar el recurso, no puede saber si el
cliente tiene el recurso
Gestión de recursos del navegador
Ana Encinar @jnisabe

48. Ejemplo server push
Gestión de recursos del navegador
Ana Encinar @jnisabe

49. Lighthouse – web test tool
Herramientas para testear
Ana Encinar @jnisabe

50. Resumen
Ana Encinar @jnisabe
• Carga de página en 2-3 segundos para no perder usuarios
• Ficheros minificados tanto css y javascript como el html
• Tener en mente el Abstract syntax tree de nuestro código
• v8 vs spiderMonkey
• Reflows
• Delegación de eventos. Debounce necesarios
• Estudiar el contexto en el que se usa un framework
• Uso de workers
• Cuidar la memoria en el navegador
• Mejoras de http2
• Cuidado con el número de request en paralelo

51. Links
× Workers
× https://www.loxodrome.io/post/web-worker-performance/
× https://github.com/runspired/webworker-performance
× Testing tools
× https://progressivetooling.com/
× Documentación Chrome dev tools
× https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
× https://developers.google.com/web/tools/chrome-devtools/speed/get-started
× https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-
snapshots
× https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-
profiler
× https://developers.google.com/web/tools/chrome-devtools/memory-problems/
× https://developers.google.com/web/tools/puppeteer/#next-steps
× https://developers.google.com/web/fundamentals/performance/rail

52. Gracias!
Ana Encinar @jnisabe

53. ¡Buscamos gente!
Maquetador web
Less,sass, html, css3…
Backend developer
Java, spring framework, AWS, elasticsearch,
microservicios…
DevOps Engineer
Prometheus, Terraform, Vagrant/Docker,
SonarQube
Ana Encinar @jnisabe
Encuentra las ofertas en nuestro
linkedin o
idealista.com/empleo/ofertas
:-)

54. ¿Preguntas?
Ana Encinar @jnisabe

55. Ana Encinar @jnisabe