La arquitectura de un browser

Las pruebas de tipo headless se popularizan en el caso web, en particular a través del uso de browsers de corte headless, es decir browsers que se pueden usar sin la capa de interfaz gráfica. Para entender ese concepto, en esta sección brevemente hablaremos de la arquitectura de un browser.

Un browser web es el encargado de renderizar e interpretar contenido en formato HTML, CSS, JS, XML y JSON que se encuentra almacenado de forma local o es recuperado de un servidor remoto (vía HTTP). Los browsers también son capaces de pintar imágenes y archivos en diferentes formatos (dependiendo de si el browser tiene el plugin para el archivo respectivo). Independientemente del lenguaje usado del lado del servidor para la aplicación/página web, lo que un browser entiende es HTML, CSS, JS, XML y JSON. Para esto, los browser modernos tienen diferentes capas de software. La siguente imagen, basada en el artículo Browsers Work: Behind the scenes of modern web browsers, describe las capas:

• Interfaz (GUI): es la capa que vemos los usuarios, donde ingresamos la URL a ver, definimos settings, abrimos pestañas, etc. Esta capa habla con las APIs locales de UI (es decir las del sistema operativo) para efectos de pintado de los widgets de la interfaz. Por ejemplo, la capa GUI de Firefox usa las librerias GTK (linux) o X11 (Unix) para pintar el browser y los componentes gráficos de las páginas.

• Browser Engine: es el controlador entre la vista y el motor de renderizado y otros componentes; orquesta las peticiones que hace el usuario con el resto de componentes en el browser.

• Rendering Engine: este es el corazón del browser. Se encarga de interpretar el código y pintarlo en la GUI. El motor de renderizado recibe código HTML y lo interpreta para construir el árbol de contenido (DOM) y el árbol de renderizado que luego se combinan para el pintado del contenido. Este motor también tiene un interprete de CSS y para el caso de formatos especiales (ej., PDF) usa una arquitectura de plugins.
  Ejemplos de motores de renderizado que se usan en los browsers son: Webkit (Safari), Blink (Chromium, Opera), Gecko (Firefox), Quantum (Firefox), EdgeHTML (Microsoft Edge). En algunos casos el motor de browser y el de renderizado son el mismo, como en el caso de Gecko.

• Intérprete de JS: fiel amigo del rendering engine que se encarga de interpretar y ejecutar código JS. Ejemplos de intérpretes de JS usados en browsers son: SpiderMonkey (Firefox), V8 (Chrome, Android browser), Nitro (Safari), JavaScriptCore (Safari, Chrome para IOS).

• Analizador de XML: intérprete de XML (ej., Expat para Firefox).

• Componente de conectividad: se encarga de hacer las solicitudes usando el protocolo HTTP y el stack propio de cada sistema operativo.

• Componente de persistencia: capa de persistencia en el browser para almacenamiento local de datos como cookies. Dependiendo del browser, soporta otros mecanismos de almacenamiento como localStorage e IndexedDB.

• Backend de UI: interfaz de comunicación con las librerías gráficas propias de cada sistema operativo.

Las siguientes diapositivas ilustran de forma general cómo se integran los componentes en casos de uso específicos: