Local blog for Spanish speaking developers in LATAM
10 años de velocidad en Chrome
viernes, 5 de octubre de 2018
La velocidad ha sido uno de los
cuatro principios básicos
de Chrome desde su lanzamiento, diez años atrás. Siempre quisimos permitir que los desarrolladores web brindaran a sus usuarios experiencias web rápidas y atractivas. En el cumpleaños número 10 de Chrome, pensamos que sería divertido observar lo que hemos hecho para mejorar la velocidad durante estos años y lo que haremos a continuación.
Muchos componentes del navegador contribuyen a la velocidad
V8
es el motor JavaScript y WebAssembly de Chrome. Teniendo en cuenta que las páginas web usan cada vez más JavaScript, un motor rápido es un pilar importante para respaldar esto. Durante estos años, hemos trabajado en un
nuevo canal de ejecución JavaScript
para V8, y lanzamos
Ignition
(un nuevo intérprete) y
TurboFan
(un compilador de optimización). Esto nos permitió mejorar el rendimiento entre un 5 y un 10% en el banco de pruebas del velocímetro.
La transmisión de secuencias de comandos
nos permitió analizar JavaScript en un subproceso en segundo plano no bien comenzaba a descargarse, lo que mejoró la carga de páginas hasta en un 10%. Luego agregamos la
compilación en segundo plano
, lo que nos permitió reducir el tiempo de compilación del subproceso principal hasta en un 20%.
Nuestro trabajo en el proyecto
Orinoco
permitió la recolección simultánea de elementos no usados, lo que liberó el subproceso principal y redujo los bloqueos. Con el tiempo, también comenzamos a enfocarnos en el
rendimiento de JavaScript en el mundo real
, lo que nos permitió
duplicar el rendimiento del tiempo de ejecución de React.js
y mejorar el rendimiento de bibliotecas como Vue.js, Preact y Angular hasta en un 40%. La recolección de elementos no usados en paralelo, simultánea e incremental redujo 100 veces los bloqueos provocados por la recolección de elementos no usados desde la implementación inicial de V8. También implementamos
WebAssembly
, lo cual permitió a los desarrolladores ejecutar código que no fuera JavaScript en la Web con un rendimiento previsible, y lanzamos el compilador de referencia
Liftoff
a fin de garantizar tiempos de inicio reducidos para las apps WASM. Estos nuevos componentes son solo los más recientes de un
esfuerzo de 10 años
que ha mejorado el rendimiento de V8 lanzamiento tras lanzamiento y brindado una mejora de 20 veces en la aceleración con el transcurso de los años.
Puntajes de V8 Bench en varias versiones de Chrome durante estos años. V8 Bench es el antecesor del banco de pruebas de Octane. Lo utilizamos para este cuadro debido a que, a diferencia de Octane, puede ejecutarse en todas las versiones de Chrome, incluida la inicial, Chrome Beta.
Chrome también ha desempeñado un papel clave en el proceso de ayudar a mejorar los protocolos de red y las capas de transporte a través de
SPDY
,
HTTP/2
y
QUIC
. El propósito de SPDY fue abordar limitaciones de HTTP/1.1 y se convirtió en la base para el protocolo HTTP/2, que hoy es compatible con todos los navegadores modernos. En paralelo, el equipo ha realizado iteraciones de manera activa en QUIC, cuyo objetivo es mejorar aún más la latencia y la experiencia del usuario, y ahora se apoya en un esfuerzo activo de IETF. Los beneficios de QUIC son notables para los servicios de video, como YouTube. Los usuarios notificaron un
30% menos de repeticiones de almacenamientos en búfer
al mirar videos a través de QUIC.
El siguiente elemento es el
canal de representación
de Chrome. Este canal es responsable de garantizar que las páginas web reaccionen a las acciones de los usuarios y se representen a una velocidad de 60 fotogramas por segundo (fps). Para mostrar contenido a 60 fps, Chrome dispone de
16 ms para representar cada fotograma
. Esto incluye la ejecución de JavaScript, el estilo, el diseño, el color y el envío de píxeles a la pantalla del usuario. En esos 16 ms, cuanto menos tiempo use Chrome más tiempo tendrán los desarrolladores web para deleitar a sus usuarios. Entre las mejoras de nuestro canal de representación se han incluido la o
ptimización de la manera en que identificamos los elementos que se deben volver a diseñar en una página
y un mejor seguimiento visual de los conjuntos no superpuestos. Esto redujo hasta en un 35% el tiempo necesario para pintar nuevos fotogramas en la pantalla.
En 2015, el equipo de Chrome introdujo un modelo de rendimiento centrado en el usuario llamado
RAIL
. Recientemente lo
actualizamos
.
¿Qué ocurre con el consumo de memoria? Entre Chrome 63 y 66, se observó una mejora aproximada del 20 al 30% en el consumo de memoria del proceso del representador. Ahora que llegó el aislamiento de sitios, esperamos continuar explorando maneras avanzar en esto. Ignition y TurboFan
redujeron
el consumo total de memoria de V8 entre un 5 y un 10% en los dispositivos y las plataformas compatibles con V8. Un trabajo de investigación que realizamos este año también reveló fugas de memoria que afectaban al 7% de los sitios en la Web y que ya están completamente corregidas. Muchos componentes contribuyen a la velocidad de Chrome; entre otros, DOM, CSS y los sistemas de almacenamiento como IndexedDB. Para obtener más información las mejoras que logramos en el rendimiento, consulta con frecuencia el blog de Chromium.
Ofrecer a los desarrolladores web más recursos para medir y optimizar sus páginas web
Comprender el punto en el que se deben comenzar a implementar mejoras en tu sitio puede ser un proceso tedioso. Para ayudarte, exploramos varias herramientas que permiten comprender las señales de
lab
y la experiencia
real
de tus usuarios. Durante estos años, el panel Performance de
Chrome DevTools
se convirtió en una alternativa eficaz para visualizar el desglose paso a paso de la visualización de las páginas web en un entorno de lab. Para continuar reduciendo la fricción en el descubrimiento de
oportunidades de rendimiento
que tenían los sitios, luego trabajamos en
Lighthouse
, una herramienta que permite analizar la calidad de tu sitio web y te proporciona mediciones claras del rendimiento del sitio, además de orientación específica para mejorar la experiencia de tus usuarios. Lighthouse permite el acceso directamente desde el panel Audits de DevTools y puede ejecutarse desde la línea de comandos o integrarse con otros productos de desarrollo, como
WebPageTest
.
Lighthouse en ejecución en el panel Audits de Chrome DevTools
Para complementar los datos de lab proporcionados por Lighthouse, lanzamos el
Informe sobre la experiencia del usuario en Chrome
con el objetivo de ayudar a los desarrolladores a obtener acceso a métricas de campo para la experiencia de los usuarios en la realidad, como
First Contentful Paint
y
First Input Delay
. Ahora, los desarrolladores pueden compilar sus propios informes personalizados de rendimiento del sitio y realizar un seguimiento del progreso en millones de orígenes usando el
panel CrUX
.
También introdujimos varias capacidades para plataformas web con el fin de ayudar a los desarrolladores a optimizar la carga de sus sitios. Enviamos
Resource Hints
y
<link rel=preload>
para permitir que los desarrolladores informen, de forma temprana, al navegador los recursos cuya carga es prioritaria. Chrome fue uno de los primeros navegadores en implementar compatibilidad con enfoques que ahorran bytes como
Brotli para compresión
,
WOFF2 para fuentes web más pequeñas
y la
compatibilidad con WebP
para imágenes.
Nos entusiasma ver que cada vez más navegadores admitan estas características a medida que pasa el tiempo. Chrome implementó
service workers
, que permiten el almacenamiento en caché sin conexión y aportan resistencia de red para visitas repetidas a páginas. Nos complace ver la amplia
y moderna compatibilidad de los navegadores
con la característica.
De hecho, Búsqueda de Google ahora usa service worker y
precarga de navegación
para el almacenamiento en caché oportuno en búsquedas repetidas. Esto redujo dos veces los tiempos de carga de páginas para visitas repetidas.
Cuando miramos hacia el futuro, también nos entusiasma el potencial que tienen los estándares emergentes, como la carga diferida nativa para imágenes e iframes y los formatos de imagen como
AV1
, para ayudar a entregar contenido a los usuarios de forma eficiente.
Disfruta más la Web en tu plan de datos con Chrome
Durante los últimos 10 años, el tamaño de las páginas web no ha
dejado de crecer
, pero para muchos usuarios que se conectan por primera vez, los datos pueden ser extremadamente costosos o dolorosamente lentos. A fin de brindar ayuda, con el correr de los años Chrome lanzó características que tienen en cuenta los datos, como el ahorro de datos de Chrome. El ahorro de datos optimiza páginas de forma inteligente, lo cual permite ahorrar hasta un 92% del consumo de datos.
En adelante, exploraremos nuevas maneras de ayudar a ahorrar datos. Para los usuarios con las conexiones más lentas, hemos estado trabajando en
Chrome para Android
, que permite una optimización de páginas más inteligente para mostrar contenido esencial de forma anticipada. Estas transformaciones de páginas se cargan mucho más rápido que la página completa, y continuaremos mejorando la fidelidad, la cobertura y el rendimiento.
También hemos experimentado con la implementación de mecanismos de seguridad para los usuarios con limitaciones de datos o de red. Por ejemplo, contemplaremos incluir la
carga diferida nativa
en Chrome, y también ofreceremos a los usuarios la opción de detener las solicitudes adicionales de una página cuando utilice una gran cantidad de datos.
Este es solo el comienzo...
En conjunto, estos cambios ayudan a los desarrolladores y a los negocios a proporcionar contenido útil a sus usuarios de forma más rápida. Sabemos que aún queda trabajo por hacer. ¡Brindo por 10 años más de mejoras en el rendimiento de la carga de páginas!
Publicado por Addy Osmani, agente de mantenimiento de JavaScript
Labels
.app
.dev
.txt
#AMP
#CPU
#DeveloperStudentClubs
#DevFest
#DragonBall
#DSC
#Forsety
#ForsetySecurity
#freeandopen
#GCP
#Google
#GoogleCloud
#GoogleCloudPlatform
#GoogleLaunchpad
#iio2009
#Kubernetes
#MaterialDesign
#OneCommunity
#Security
#TensorFlow
#UPGlobal
#UpLatam
#WithGoogle
+page
10 YEARS
2013
2019
64 bits
A/B Testing
AA
Accelerator
Action on Goolge
actionbar
Actions
Actions Console
AdMob
Ads
adwords
adwords api
AI
AIY
ajax
alarmmanager
ALFA
almacenamiento
alojamiento de proyectos en google code
AMP
AMP Conf
AMP Project
amp-date-picker
amphtml
Analytics
Andorid
android
Android (operating System)
Android 3.1
android 3.3
android 4.2
android 9
Android 9 Pie
Android App Bundle
android design
Android Dev Summit
Android Developers
android Jetpack
Android P
Android SDK
Android Studio
Android Things
Android Wear
AndroidDevStory
androititlan
angelina jolie
Annotation
Announcements
anuncios
API
API Analytics YouTube
Apigee
APIs
Aplicaciones
aplicaciones chrome
app
app engine
App Indexing
app invites
App Server
applications
AppQuality
apps
Apps Script
AR
ARCore
arte
ATLAS
AWP
backend
Base64
batch
Bava
Betatesting
Better Ads Standars
bigdata
BigQuery
Biometrics
blink
bootcamp
BOT
BQ
Business
búsqueda ajax
by Google
byCases
byCommunity
byDevelopers
byGoogle
C++
CALENDAR
Cardboard
case
caso de éxito
Casos de éxito
casos destacados
CCOSS
Century Fox
chat
chrome
chrome web store
chromebook
chromecast
chromium
Cinéfilos
cloud
Cloud Anchors
CLOUD endpoints
Cloud Firestore
Cloud Functions
Cloud IoT Core
Cloud Next
Cloud Scheduler
Cloud services
cloud test lab
Cloud Text-to-Speech
Cloud Translation
CMD en vivo
coconut
code
code-in
code.org
CodeLabs
código
código abierto
Colab
colombia
Communities
Comunidades
concurso google
conference
contenedores
convocatoria
Coordinate
crashlytics
CRE
crear aplicaciones ajax
creatividad
Crowdsource
CSS
cws
daniela robles
dart
dart sdk
dartium
dartlang
Dataset
DCL
denis labelle
desarrolladores
Desarrolladores Google
desarrolladores LatAm
Desarrollar
Design
Design Sprint
Destacados
dev
Dev.f
DevArt
DevBus
DevBusLatAm
Developer Bus
Developer Summit
DeveloperConsole
developers
DevFest
devoxx
dialogflow
diseño UX
Distribuir
DNS
DOM
domain
DonkeyCar
doubleclick
Drive SDK
Drivers
ecommerce
ecosistema
elections
elizalde
Emoticons
emprendedores
empresas
engagement
english
Enhanced Campaigns
enterprise
eventos
Events
evolución de aplicaciones
Excel
ExpertosDicen
Faas
Family
FanBridge
FCM
FCP
Featured
fido
find people
Fintech
firebase
Firebase Cloud Messaging
firebase summit
flu trends
Flutter
Flutter 1.0
flutter 1.7
flutter developers
Flutter Live
FlutterLive
FoundersLab
Freebase
Fuction
Fuctions
Full-Stack
functional programming
G Suite Dev Show
G+
g+ goto gal
G+GotoGal
GAE
game
games
GCloud
gcm
GCP
GCS
GDA
GDE
GDG
GDH
GDL
GDLevent
GDS
Get Inspired
get.app
GitHub
GLP
gmail
golang
GOMO
Google
Google Accelerator
Google AdMob SDK
Google AdWords
Google Analytics
Google APIS
Google App Engine
Google Apps
Google Apps Script
Google Art Project
Google Assistant
google calendar
google cast
Google Charts
Google Chrome
Google Cloud
Google Cloud Console
Google Cloud Messaging
Google Cloud Next
Google Cloud Platform
Google Cloud Platform Newsletter
google cloud platforn
Google Cloud Storage
google code-in
Google Compute Engine
Google Dataset
Google Developer Groups
google developers
Google Developers Academy
google developers expert
Google Developers Hackademy
google dns
Google Drawings
Google Drive
Google Earth
Google for games
Google Forms
google geo
Google Home
google i/o
google i/o extended
google io
Google Keep
Google Kubernetes Engine
Google Launchapad
Google Launchpad
Google Maps
google maps coordinate
Google Maps Platform
Google Mexico
Google Nose
google now
Google Person Finder
google places api
Google Play
Google Play Books
Google Play Developer API
google play games
Google Play Movies
Google Play Protect
Google Play Services
Google Plus
Google Science Fair
google search
Google Sheets
google sign in
Google Top Geek
Google+
Google+ Communities
Google+ Hangouts
google+ sign-in
GoogleAPI
googlecloud storage
GoogleCloudPlatform
googledevs
GooglePlay
Googleplex
Goolge Lunchpad
GTG
Hackademy
hackers
Haiko
Haití
hangouts
Hangouts Remote Desktop
hardcode
Heello
honeycomb
HTML
HTML5
HTTPS
I/O
IA
IAM
IETF
IFAI
in app purchases
in-app
ingles
Ingress
instagram
integración de soluciones
interactive post
Interesante
International
International Women’s Day
IO
io15
io18
io19
iOS
IoT
istio
IU
IVR
J2EE
java
JavaScript
jelly bean
JS
JSON
Juegos
juegos html5
Kit ML
Knative
kotlin
kUBERNATES
Kubernetes
LATAM
latamRegionSur
Launchpad
Launchpad Studio
Lenovo Mirage Solo
lightbox
linux
lucero galindo
machine learning
Made with Code
Mapdata
Mapeo
maps
Maps Ad Unit
Maps API
Maps Engine
Market
Marketing
Marshmallow
MATERIAL DESIG
Material Design
mejores apps 2013
México
michelle marie
MIT
MIT Global Start-up Labs
MIT-AITI
ML
ML Kit
mobile
monetizar
mongoDB
MOOC
Motorola
Mountain View
móvil
MQTT
mr.white
mTLS
natalie villalobos
Navigation
NBA JAM
NES
Next Big Sound
Next Level
nfc
Niantic
Nik
NINTENDO
node.js
NoSQL
nube
OAuth2
Objective-C
OClock
open source
OPenApi
OS
OSS
Paas
PageSpeed
PagesSpeed
parallel18
patrones
patters
performance
permisos
Pipeline API
Pixability
pixel
Píxel
play
Play Console
Playtime
Podcast
pollito pio
Polymer
por lote
Posse
Prediction API
primer
Producto
programación
Propositos
Protocol Buffers
proyecto 20%
Push API
PYMES
python
Q
Q4
quickoffice
Rasberry Pi Zero WH
Raspberry Pi
Realtime
Reflectly
register
Release
Resources
robots.txt
Safe
SDK
Search
Security
seedbank
seguridad
SEO
servidores
Showyou
sign-in
SNES
SO
social media
Spain
SpLATAM
SQL
SQLite
Start
startup grind
Startup Launch
startup weekend
startup weekend for the planet
startupbus
startups
StayAtHome
story
Street View
subtitles
success
sw
SyScan
tablet
Tablet Optimization Tips
tabletas
takeaction
Tango
tendencias 2013
TensorFlow Developer Summit
testing
TextView
TF JAM
The Garage
The Venture City
tips G+
tips gmail
TLD
TLS
Top Experts
Top Geek
top level domain
TopExpert
topics
traducciones
Transparency Report
triggers
Tubular Labs
twilio
Tyka
TypeScript
UAC
udacity
ui
Umbrales
UNAM
unity
Unity3D
universal search
UX
Vector
VectorDrawable
video juegos
vidIQ
ViewPager
Visual Progress
Voicekit
VPC
VR
VSCode
web
Web hosting
Web móvil
WebAssembly
with google
Wizdeo
WizTracker
Women at Google
Women Techmakers
workmanager
WTM
XKCD
XML
Yifat Cohen
youtube
YouTube Analytics API
YouTube API
YouTube Data API
YouTube One Channel
YouTube Player API
Archive
2024
sept
2023
nov
oct
sept
ago
jun
may
abr
mar
ene
2022
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2021
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
2020
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2019
dic
nov
oct
sept
ago
jun
may
abr
mar
feb
ene
2018
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
2017
nov
sept
ago
jul
jun
may
abr
ene
2016
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2015
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2014
dic
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2013
dic
nov
oct
ago
jul
jun
may
abr
mar
feb
ene
2012
dic
nov
oct
sept
ago
jul
2011
nov
oct
may
mar
2010
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2009
dic
nov
sept
ago
jul
jun
may
abr
mar
feb
ene
2008
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2007
dic
Feed
Desarrolladores
Eventos y Comunidad
Casos Destacados
Dicen los Expertos
Google Accelerator