Análisis del navegador web moderno (parte 1)

Mariko Kosaka

CPU, GPU, memoria y arquitectura de procesos múltiples

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

En la primera parte de esta serie, analizaremos la terminología esencial de Chrome arquitectura multiprocesos.

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

Para comprender el entorno en el que se ejecuta el navegador, necesitamos comprender algunas las partes de la computadora y lo que hacen.

CPU

CPU
Figura 1: 4 núcleos de CPU como oficinistas sentados en cada escritorio manejando tareas a medida que se realizan.

El primero es la Unit unit o CPU de Central. La CPU puede considerarse como en el cerebro de una computadora. Un núcleo de CPU, representado aquí como un trabajador de oficina, puede realizar muchas tareas diferentes. una por una a medida que ingresan. Puede controlar todo, desde matemáticas hasta arte, y sabe cómo responder. a la llamada de un cliente. Antes, la mayoría de las CPU eran un solo chip. Un núcleo es como otra CPU que el mismo chip. En el hardware moderno, a menudo se obtiene más de un núcleo, lo que proporciona más potencia de procesamiento. a tus teléfonos y laptops.

GPU

GPU
Figura 2: Muchos núcleos de GPU con llave inglesa que sugieren que controlan una tarea limitada

Otra parte de la computadora consiste en procesar unit, o GPU gráficas. A diferencia de la CPU, La GPU es buena para manejar tareas simples, pero en varios núcleos al mismo tiempo. Como el nombre sugiere, primero se desarrolló para manejar gráficos. Por eso, en el contexto de los gráficos "usando 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 cálculos en Solo la GPU.

Cuando inicias una aplicación en tu computadora o teléfono, la CPU y la GPU son las que encienden la aplicación. Por lo general, las aplicaciones se ejecutan en la CPU y la GPU con mecanismos proporcionados por la Sistema operativo.

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

Ejecutar el programa en Process y Thread

proceso y subprocesos
Figura 4: Proceso como cuadro delimitador, con subprocesos como peces abstractos nadando dentro de un proceso

Otro concepto que debes comprender antes de sumergirte en la arquitectura del navegador es el proceso y el subproceso. Un proceso puede describirse como el programa en ejecución de una aplicación. Un hilo es el que vive dentro del proceso y ejecuta cualquier parte del programa de su proceso.

Cuando inicias una aplicación, se crea un proceso. Es posible que el programa cree conversaciones para ayudarlo. sí, pero es opcional. El sistema operativo le da al proceso una “tabla” de memoria para trabajar y todos los estados de la aplicación se mantienen en ese espacio de memoria privado. Cuando cierres en una aplicación de prueba, el proceso también desaparece y el sistema operativo libera la memoria.

proceso y memoria
Figura 5: Diagrama de un proceso que usa espacio de memoria y almacena datos de la aplicación

Un proceso puede pedirle al sistema operativo que inicie otro proceso para ejecutar diferentes tareas. Cuando esta de memoria, se asignan diferentes partes de la memoria al proceso nuevo. Si dos procesos necesitan pueden hacerlo a través de la Communicación de curso (IPC). Muchas aplicaciones están diseñados para funcionar de esta manera de modo que, si un proceso de trabajador no responde, se pueda reiniciar sin detener otros procesos que ejecutan diferentes partes de la aplicación.

proceso de trabajador e IPC
Figura 6: Diagrama de procesos independientes que se comunican a través de IPC

Arquitectura del navegador

Entonces, ¿cómo se crea un navegador web usando procesos y subprocesos? Bueno, podría ser un proceso con muchos diferentes subprocesos o procesos distintos con algunos subprocesos que se comunican por IPC.

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

Es importante tener en cuenta que estas diferentes arquitecturas son detalles de implementación. No hay una especificación estándar sobre cómo se puede crear un navegador web. El enfoque de un navegador puede ser completamente diferente de otra.

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

En la parte superior está 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 cada pestaña. Hasta hace poco, Chrome le daba a cada pestaña un proceso cuando podía; ahora intenta dar 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 Las capas múltiples se muestran en Proceso del renderizador para representar que Chrome ejecuta varios procesos del renderizador para cada pestaña.

¿Qué proceso controla qué?

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

Proceso y qué controla
Navegador Controla "chrome" incluida la barra de direcciones, los marcadores, las direcciones hacia adelante.
También controla las partes invisibles y con privilegios de un navegador web, como las solicitudes de red y el acceso a los archivos.
Procesador Controla todo lo que esté dentro de la pestaña donde se muestra un sitio web.
Complemento Controla los complementos que usa el sitio web, por ejemplo, Flash.
GPU Controla tareas de GPU aisladas de otros procesos. Se divide en diferentes procesos porque las GPU manejan 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 de utilidad. Si quieres 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 en ese momento. y cuánta CPU o memoria usan.

El beneficio de la arquitectura multiprocesos en Chrome

Anteriormente, mencioné que Chrome usa varios procesos de renderizado. En el caso más sencillo, puedes Imagina que cada pestaña tiene su propio proceso de renderizado. Supongamos que tienes 3 pestañas abiertas y cada una de ellas está abierta por un proceso de renderizado independiente.

Si una pestaña no responde, puedes cerrarla y seguir adelante sin dejar de responder. otras pestañas activas. Si todas las pestañas se ejecutan en un proceso, cuando una deja de responder, todas las pestañas no responden. Eso es triste.

varios procesadores 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 en una zona de pruebas. Dado que los sistemas operativos proporcionan una forma de restringir las interacciones privilegios, el navegador puede poner a prueba ciertos procesos de ciertas funciones. Por ejemplo, el navegador Chrome restringe acceso arbitrario a archivos para procesos que manejan 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 (como V8, el motor de JavaScript de Chrome). Esto implica un mayor 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 en función de cuánta memoria y potencia de CPU tenga tu dispositivo, pero cuando Chrome del límite, se empieza a ejecutar varias pestañas del mismo sitio en un solo proceso.

Ahorro de más memoria: Servicio en Chrome

El mismo enfoque se aplica al proceso del navegador. Chrome está experimentando cambios en la arquitectura para ejecutar cada parte del programa del navegador como un servicio, lo que permite dividirlo en distintos procesos o agregar en uno.

La idea general es que cuando Chrome se ejecuta en hardware potente, puede dividir cada servicio en diferentes procesos, lo que brinda mayor estabilidad, pero, si usas un dispositivo con limitaciones de recursos, Chrome y consolida los servicios en un solo proceso que ahorra espacio en la memoria. Enfoque similar de consolidación procesos para reducir el uso de memoria en plataformas como Android antes de este cambio.

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

Procesos del renderizador por fotograma: Aislamiento de sitios

El aislamiento de sitios es un Se introdujo una función en Chrome que ejecuta un proceso de renderización independiente para cada iframe entre sitios. Hemos hablado de un proceso del renderizador por modelo de pestaña que permitía Se deben ejecutar iframes en un solo proceso de renderización con el uso compartido del espacio de memoria entre diferentes sitios. Ejecutar a.com y b.com en el mismo proceso de renderizado puede parecer aceptable. La Política del Mismo Origen es el modelo de seguridad central de la Web; se asegura de que un sitio no pueda acceder a los datos de otros sitios sin consentimiento. Omitir esta política es uno de los objetivos principales de los ataques de seguridad. El aislamiento de procesos es la manera más eficaz de separar los 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 las computadoras de escritorio de forma predeterminada desde Chrome 67, cada iframe entre sitios en una pestaña recibe un proceso de renderizado independiente.

aislamiento de sitios
Figura 12: Diagrama del aislamiento de sitios Varios procesos del renderizador que apuntan a iframes de un sitio

Habilitar el aislamiento de sitios fue un esfuerzo de ingeniería de varios años. El aislamiento de sitios no es tan simple como asignar diferentes procesos de renderizado; cambia fundamentalmente la forma en que los iframes se comunican entre sí entre sí. Abrir Herramientas para desarrolladores en una página con iframes ejecutándose en diferentes procesos significa que las Herramientas para desarrolladores tuvieron que implementar trabajo tras bambalinas para que parezca fluido. Incluso si ejecutas una simple combinación de teclas Ctrl+F, palabra de una página significa buscar en diferentes procesos de renderizado. Puedes ver el motivo ingenieros de navegadores consideran que el lanzamiento del aislamiento de sitios es un hito importante.

Conclusión

En esta publicación, vimos una visión de alto nivel de la arquitectura de los navegadores y abordamos los beneficios de arquitectura multiprocesos. También abordamos el servicio de mantenimiento y el aislamiento de sitios en Chrome, que es estrechamente relacionada con la arquitectura multiprocesos. En la próxima publicación, comenzaremos a analizar en qué consisten entre estos procesos y subprocesos para mostrar un sitio web.

¿Te gustó la publicación? Si tienes preguntas o sugerencias para la próxima publicación, escriban a @kosamari en Twitter.

Siguiente: Qué sucede en la navegación