浏览器渲染原理

浏览器中输入 URL到页面返回的全过程

1. 根据域名，进行DNS域名解析
2. 拿到解析的IP地址，建立TCP连接
3. 向IP地址发送HTTP请求
4. 服务器处理请求
5. 返回响应结果
6. 关闭TCP连接
7. 浏览器解析HTML
8. 浏览器布局渲染

第1阶段 Request

通过URL向服务器发送请求,web服务端返回html文本-代码字符串

• DNS解析
• TCP三次握手四次挥手
• HTTP/HTTPS/HTTP2

第2阶段 Response

拿到代码后，浏览器在内存中开辟一块栈内存，用来给代码提供执行环境；同时分配一个主线程去一行一行的执行代码

第3阶段 执行代码

执行方式

• 取出一行代码，进栈执行 -> 执行完出栈
• 当浏览器遇到 link/script/img 等请求后,都会开辟新的线程去加载资源文件（说明浏览器多线程执行任务）

任务队列 - TaskQueue
- 微任务
- 宏任务
事件循环 - Event Loop

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

1. 解析 HTML 生成 DOM树 ,解析 CSS 生成 CSSOM树
2. 将 DOM树和 CSSOM树相结合生成 渲染树
3. 回流(Layout)
4. 重绘(Painting)
5. Display 将像素发送给GPU，展示在界面上