Front Performance

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

Ana Encinar
Fullstack developer en
@jnisabe

LA WEB
Evolución
× Hypertext document (http 0.9)
× Web page (http 1.0 y 1.1)
× Web application

Arquitectura del navegador
DOM, CSSOM y JavaScript

6 conceptos básicos

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

Tener en cuenta la performance

¿Por qué es importante la performance?
× No más 2-3 segundos

¿Por qué es importante la performance?
× No más 2-3 segundos
× Un problema de rendimiento, es un problema de usabilidad

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

Optimización de elementos multimedia
× Carga en diferido / lazy load - Data-src

Optimización de elementos multimedia
× Carga en diferido / lazy load - Data-src
× jQuery plugin

Tamaño de los ficheros

Minificación js (task runner)
Tamaño de los ficheros

Performance en javascript

V8 performance

v8/spidermonkey performance
Abstract syntax tree

× Reflows

× Reflows
× ¿Cuantos eventos tengo en la vista?
× Usabilidad y procesamiento

× Reflows
× ¿Cuantos eventos tengo en la vista?
× Usabilidad y procesamiento
× Framework vs nativo

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

La optimización de netflix

¿Mejor o peor?

¿Qué tipo de programación usar?
Programación imperativa
Programación funcional
http://jsben.ch/

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

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
Bucles vs recursividad

if
× El coste se hace mayor en operaciones
grandes
switch
× En casos de muchas comprobaciones, se
vuelve óptimo.
if vs switch

condicionales; bloque, optimización prematura, ternarias…

Las librerías y proyectos ajenos
NO siempre te salvan la vida.
NO te engañes

Descarga el hilo principal de
funcionalidad, y aprovecha los
workers

× 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
Workers Service vs web workers

Gestión de memoria

Algoritmo de referencias
Algoritmo de barrido
Gestión de memoria

Herramientas para detectarlo
Heap Profiles en Chrome
Jshint
Jslint
Gestión de memoria/Recolector de basura

Gestión de recursos del
navegador

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

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

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

Ejemplo server push

Lighthouse – web test tool
Herramientas para testear

Resumen
• 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

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

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

¿Preguntas?

Front Performance

Recomendados

Recomendados

Más contenido relacionado

Similar a Front Performance

Similar a Front Performance (20)

Último

Último (20)

Front Performance