Análisis del navegador web moderno (parte 1)

Mariko Kosaka

CPU, GPU, memoria y arquitectura de varios procesos

En esta serie de blogs de 4 partes, analizaremos el interior del navegador Chrome, desde la arquitectura de alto nivel hasta los detalles de la canalización de procesamiento. Si alguna vez te preguntaste cómo el navegador convierte tu código en un sitio web funcional o no estás seguro de por qué se sugiere una técnica específica para mejorar el rendimiento, esta serie es para ti.

En la primera parte de esta serie, analizaremos la terminología informática principal y la arquitectura de varios procesos de Chrome.

En el núcleo de la computadora se encuentran la CPU y la GPU

Para entender el entorno en el que se ejecuta el navegador, necesitamos conocer algunos componentes de la computadora y qué hace.

CPU

CPU
Figura 1: 4 núcleos de CPU como empleados de oficina sentados en cada escritorio manejando las tareas a medida que ingresan

En primer lugar, se muestra el Centen Cental de unit o CPU. La CPU puede considerarse el cerebro de la computadora. Un núcleo de CPU, al que se representa un oficinista, puede manejar diversas tareas una por una a medida que ingresan. Puede manejar desde matemáticas hasta arte y además sabe cómo responder a una llamada de cliente. Antes, la mayoría de las CPUs eran un solo chip. Un núcleo es como otra CPU que vive en el mismo chip. Con frecuencia, en el hardware moderno se obtiene más de un núcleo, lo que da más potencia de procesamiento a tus teléfonos y laptops.

GPU

GPU
Figura 2: Muchos núcleos de GPU con una llave inglesa que sugiere que pueden realizar una tarea limitada

Grafíos: Proceso de nit o GPU es otra parte de la computadora. A diferencia de la CPU, esta GPU es buena para manejar tareas simples, pero funciona con varios núcleos al mismo tiempo. Como su nombre lo sugiere, primero se desarrolló para controlar gráficos. Es por esto que, en el contexto de los gráficos, "usar GPU" o "respaldado por GPU" se asocia con la renderización rápida y la interacción fluida. En los últimos años, con el procesamiento acelerado por GPU, es posible realizar cada vez más procesamiento solo en la GPU.

Cuando inicias una aplicación en tu computadora o teléfono, la CPU y la GPU son las que la potencian. Por lo general, las aplicaciones se ejecutan en la CPU y la GPU mediante mecanismos que proporciona el sistema operativo.

Hardware, SO, aplicación
Figura 3: Tres capas de arquitectura de computadora. Hardware de máquinas en la parte inferior, Sistema operativo en el medio y Aplicación en la parte superior.

Ejecuta el programa sobre procesos y subprocesos

proceso y subprocesos
Figura 4: Proceso como cuadro de límite, subprocesos como peces abstractos que nadan dentro de un proceso

Otro concepto que se debe comprender antes de profundizar en la arquitectura del navegador es el de procesos y subprocesos. Un proceso se puede describir como el programa en ejecución de una aplicación. Un subproceso es el que se encuentra dentro del proceso y ejecuta cualquier parte del programa de su proceso.

Cuando inicias una aplicación, se crea un proceso. El programa puede crear subprocesos para ayudarlo a hacer el trabajo, pero eso es opcional. El sistema operativo le proporciona al proceso una “slab” de memoria para trabajar, y el estado de toda la aplicación se conserva en ese espacio de memoria privada. Cuando cierras la aplicación, el proceso también desaparece y el sistema operativo libera la memoria.

proceso y la memoria
Figura 5: Diagrama de un proceso con espacio de memoria y almacenamiento de datos de la aplicación

Un proceso puede pedirle al sistema operativo que inicie otro proceso para ejecutar diferentes tareas. Cuando esto sucede, se asignan diferentes partes de la memoria para el nuevo proceso. Si es necesario que dos procesos se comuniquen, pueden hacerlo mediante Inter Process Communication (IPC). Muchas aplicaciones están diseñadas para funcionar de esta manera, de modo que si un proceso de trabajo no responde, se puede reiniciar sin detener otros procesos que ejecutan diferentes partes de la aplicación.

de procesamiento de trabajadores y la IPC
Figura 6: Diagrama de procesos independientes de comunicación a través de IPC

Arquitectura del navegador

Entonces, ¿cómo se crea un navegador web a partir de procesos y subprocesos? Podría ser un proceso con muchos subprocesos diferentes o muchos procesos diferentes con algunos subprocesos que se comunican a través de IPC.

arquitectura del navegador
Figura 7: Diferentes arquitecturas de navegador en proceso / diagrama de subprocesos

Lo importante a tener en cuenta aquí es que estas diferentes arquitecturas son detalles de implementación. No existe una especificación estándar sobre cómo se podría crear un navegador web. El enfoque de un navegador puede ser completamente diferente del otro.

En esta serie de blogs, usaremos la arquitectura reciente de Chrome, que se describe en la Figura 8.

En la parte superior, se encuentra el proceso del navegador que se coordina con otros procesos que se encargan de diferentes partes de la aplicación. Para el proceso del renderizador, se crean varios procesos y se asignan a cada pestaña. Hasta hace muy poco, Chrome le otorgaba un proceso a cada pestaña, siempre que era posible, y ahora intenta darle a cada sitio su propio proceso, incluidos los iframes (consulta Aislamiento de sitios).

arquitectura del navegador
Figura 8: Diagrama de la arquitectura de varios procesos de Chrome. Se muestran varias capas en Proceso del procesador para representar a Chrome que ejecuta varios procesos del procesador para cada pestaña.

¿Qué proceso controla cada uno?

En la siguiente tabla, se describe cada proceso de Chrome y lo que controla:

Proceso y qué controla
Navegador Controla la parte "chrome" de la aplicación, incluida la barra de direcciones, los favoritos y los botones para ir hacia atrás y hacia adelante.
También controla las partes invisibles y con privilegios de un navegador web, como las solicitudes de red y el acceso a archivos.
Procesador Controla todo lo que está dentro de la pestaña en la que se muestra un sitio web.
Complemento Controla cualquier complemento utilizado por el sitio web, como Flash.
GPU Maneja tareas de la GPU aislada de otros procesos. Se divide en procesos diferentes porque las GPU controlan las solicitudes de varias apps y las dibujan en la misma plataforma.
Procesos de Chrome
Figura 9: Diferentes procesos que apuntan a distintas partes de la IU del navegador

Existen aún más procesos, como el de extensión y los procesos de utilidad. Si deseas ver cuántos procesos se están ejecutando en tu Chrome, haz clic en el ícono del menú de opciones en la esquina superior derecha, selecciona Más herramientas y, luego, selecciona Administrador de tareas. Se abrirá una ventana con una lista de procesos que están en ejecución y cuánta CPU/memoria usan.

Beneficios de la arquitectura de varios procesos en Chrome

Anteriormente, mencioné que Chrome utiliza un proceso de múltiples procesadores. En el caso más simple, puedes imaginar que cada pestaña tiene su propio proceso de renderización. Supongamos que tienes 3 pestañas abiertas y que un proceso de renderizado independiente ejecuta cada una.

Si una pestaña deja de responder, puedes cerrar la pestaña que no responde y continuar sin cerrar las demás. Si todas las pestañas se están ejecutando en un proceso, cuando una pestaña deja de responder, ninguna de las pestañas responde. Es triste.

procesador múltiple para pestañas
Figura 10: Diagrama que muestra varios procesos que ejecutan cada pestaña

Otro beneficio de separar el trabajo del navegador en varios procesos es la seguridad y la zona de pruebas. Dado que los sistemas operativos proporcionan una forma de restringir los privilegios de los procesos, el navegador puede aislar en una zona de pruebas ciertos procesos de ciertas funciones. Por ejemplo, el navegador Chrome restringe el acceso arbitrario a los archivos para los procesos que controlan entradas arbitrarias del usuario, como el proceso del renderizador.

Debido a que los procesos tienen su propio espacio de memoria privado, a menudo contienen copias de la infraestructura común (como V8, que es el motor de JavaScript de Chrome). Esto significa más uso de memoria, ya que no se pueden compartir como lo harían si fueran subprocesos dentro del mismo proceso. Para ahorrar memoria, Chrome establece un límite en la cantidad de procesos que puede iniciar. El límite varía según la cantidad de memoria y potencia de CPU que tenga tu dispositivo, pero cuando Chrome lo alcanza, comienza a ejecutar varias pestañas del mismo sitio en un solo proceso.

Ahorro de más memoria: mantenimiento en Chrome

Se aplica el mismo enfoque al proceso de navegación. Se están realizando cambios de arquitectura en Chrome para ejecutar cada parte del programa del navegador como un servicio que permita dividirlo en diferentes procesos o agruparlos en uno.

La idea general es que cuando Chrome se ejecuta en hardware potente, puede dividir cada servicio en diferentes procesos, lo que brinda más estabilidad. Sin embargo, si está en un dispositivo con restricción de recursos, Chrome consolida los servicios en un proceso que ahorra espacio en la memoria. Antes de este cambio, se usó un enfoque similar de consolidación de procesos para reducir el uso de memoria en plataformas como Android.

Servicio de Chrome
Figura 11: Diagrama del servicio de mantenimiento de Chrome que traslada diferentes servicios a varios procesos y un solo proceso de navegador

Procesos del renderizador por fotograma: aislamiento de sitios

El aislamiento de sitios es una función que se introdujo recientemente en Chrome y que ejecuta un proceso de renderizado independiente para cada iframe entre sitios. Hablamos sobre un proceso de renderizado por modelo de pestaña que permitió que los iframes entre sitios se ejecutaran en un solo proceso del renderizador y compartiera espacio de memoria entre diferentes sitios. Ejecutar a.com y b.com en el mismo proceso de renderización puede parecer aceptable. La Política del mismo origen es el modelo de seguridad principal de la Web; se asegura de que un sitio no pueda acceder a los datos de otros sitios sin consentimiento. Uno de los objetivos principales de los ataques de seguridad es omitir esta política. El aislamiento de procesos es la forma más eficaz de separar sitios. Con Meltdown y Spectre, se hizo aún más evidente que necesitamos separar los sitios mediante procesos. Con el aislamiento de sitios habilitado en computadoras de escritorio de forma predeterminada a partir de Chrome 67, cada iframe entre sitios de una pestaña obtiene un proceso de renderizado independiente.

aislamiento de sitios
Figura 12: Diagrama del aislamiento de sitios; varios procesos de renderizado que apuntan a iframes dentro de un sitio

Habilitar el aislamiento de sitios ha sido un esfuerzo de ingeniería que lleva varios años. El aislamiento de sitios no es tan simple como asignar diferentes procesos de renderizado, sino que cambia fundamentalmente la forma en que los iframes se comunican entre sí. Abrir Herramientas para desarrolladores en una página con iframes que se ejecutan en diferentes procesos significa que las Herramientas para desarrolladores debían implementar trabajo en segundo plano para que pareciera fluida. Incluso ejecutar Ctrl + F simple para encontrar una palabra en una página implica buscar en diferentes procesos del procesador. Puedes ver el motivo por el que los ingenieros de navegadores hablan sobre el lanzamiento del aislamiento de sitios como un hito importante.

Conclusión

En esta publicación, abarcamos una vista de alto nivel de la arquitectura de navegadores y sus beneficios. También abarcamos el mantenimiento y el aislamiento de sitios en Chrome, que están profundamente relacionados con la arquitectura de varios procesos. En la próxima publicación, comenzaremos a analizar qué sucede entre estos procesos y subprocesos para mostrar un sitio web.

¿Te gustó la publicación? Si tienes alguna pregunta o sugerencia para la próxima publicación, me encantaría escuchar tu opinión en @kosamari en Twitter.

A continuación: Qué sucede en la navegación