¿Cuáles son los pasos que siguen el navegador y el hardware de la computadora para traducir html a lo que vemos en la pantalla?

Los detalles varían de un navegador a otro, pero el proceso básico es el siguiente:

1. Analice el HTML en una estructura de datos en forma de árbol llamada Modelo de objetos de documento (DOM).
2. Traduzca cada nodo del árbol en un objeto renderizable.
3. Aplique el estilo CSS, si lo hay.
4. Dibuja todo en la pantalla.

El primer paso es bastante difícil, especialmente si el navegador quiere poder renderizar páginas con HTML imperfecto (que, para ser sincero, es la gran mayoría de las páginas). El DOM real que se genera a partir de una página HTML particular es ligeramente diferente en Internet Explorer 7, que en Firefox 3.5 (por ejemplo). Esa es la primera razón por la que algunas páginas se ven diferentes en diferentes navegadores.

El paso dos, obviamente, esconde mucha complejidad. Si el nodo es una imagen, entonces el navegador debe solicitar el archivo de imagen al servidor. Hay otros tipos de etiquetas HTML que dan como resultado la recuperación de recursos externos: scripts, estilos, iframes, videos, Flash, etc. Luego hay etiquetas de diseño como div, span y table, y etiquetas de formato como b, i, br y h1-h6. Cada elemento tiene un comportamiento de representación diferente: puede dibujar una línea o un cuadro, dibujar algo de texto, afectar la forma en que se representan otros elementos (ya sea contenidos dentro de este elemento o no), o puede que no se represente en absoluto, pero tener algunos otro efecto en la apariencia y el comportamiento de la página.

Una vez que se representa la página, no has terminado. El DOM se puede cambiar sobre la marcha mediante JavaScript (y algunos otros medios menos comunes también), y el navegador tiene que volver a representar una parte de la página (o posiblemente todo) sobre la marcha.