浏览器渲染机制面试_彻底搞懂浏览器渲染页面的机制和原理

1、一道面试题：从用户在浏览器地址栏输入网址，到看到整个页面，中间发生了哪些事情？

答：共有三个阶段： ①http请求阶段 ②http响应阶段 ③浏览器渲染阶段

在这里我们先重点讲一下浏览器渲染阶段

扫盲：

① 进程：Process(开了多个饭店)

② 线程：Thread(一个饭店雇佣一个服务员是单线程，雇佣多个服务员是多线程)

③ 栈内存：Stack (提供一个环境，运行代码)

2、浏览器渲染页面的机制和原理

第一阶段：

当输入url后，比如(http://www.baidu.com)，客户端(浏览器)向服务器端(web服务器)发起请求，开始进入Request请求阶段，这个阶段包含：DNS解析、TCP协议的三次握手和四次挥手、HTTPS和HTTP的区别(HTTP2)

第二阶段：

在服务器端的项目磁盘中保存着相对应的页面，这些页面是源代码的格式，请求到以后就开始进入Response阶段：HTTP状态码、304缓存、HTTP报文

第三阶段：

浏览器拿到源代码以后，浏览器在内存条中开辟出一块栈内存，用来给代码的执行提供环境。

只有执行环境是不够的，这时候浏览器同时分配一个主线程去一行一行的解析和执行代码。(前端js是单线程的，原理是浏览器只会分配一个线程来去解析代码)(内存条的空间越高越好，因为这样分出来的空间就越多，做的事情也越多)

而这一个线程去解析源代码的过程：它得先进栈才能执行，所以首先进栈，每一个页面第一行都是：声明文档类型是html，因为单线程一次只能干一件事，所以当前代码执行完以后，主线程一定要出栈，只有出栈，主线程才有时间执行下一行代码。然后再进栈出栈如此这般一行一行的解析。

解析过程中，会遇到，这时候主线程有两种选择。

第一种：自己亲自去服务器，但这个时候浏览器就没人了，下面的代码无法执行，所以必须得将1.css搬过来才能执行，这种方法是不好的。

第二种：让自己的朋友帮忙去服务器搬1.css，自己(主线程)继续执行下面的代码，这个时候浏览器中就有两个人干活了。所以当代码中遇到、、、、等这些所有需要额外加载外部资源文件的请求后，都会单独开辟新的线程去加载资源文件，主线程继续向下执行。

因此可以看出浏览器是多线程程序，但是它只分配了一个线程用来执