十、响应的原路返回层:从后端到浏览器(第431-470步)
1. 网关接收用户服务返回的明文响应;
2. 触发后置过滤器链执行;
3. 日志过滤器记录响应状态和耗时;
4. 响应数据格式校验;
5. 后置过滤器执行完成;
6. 网关将明文响应转发至SLB;
7. 明文响应经过K8S网络传输;
8. Calico网络插件转发明文响应;
9. 经过边界防火墙;
10. 防火墙放行响应数据;
11. 明文响应进入阿里云SLB;
12. SLB接收明文响应;
13. SLB用会话密钥加密明文响应;
14. 加密响应封装为TLS记录;
15. 记录响应转发日志;
16. 加密响应数据转发至阿里云公网网关;
17. 经过安全组和网络ACL;
18. 放行响应数据;
19. 加密响应进入阿里云公网边缘节点;
20. 边缘节点转发至公网;
21. 加密响应数据在运营商骨干网传输;
22. 经过本地运营商网络;
23. 抵达宽带猫;
24. 宽带猫解析PPPoE封装;
25. 转发至本地路由器;
26. 路由器解析目标IP为本地主机;
27. 转发至用户主机;
28. 主机网络接口接收加密响应;
29. 触发中断,CPU处理接收软中断;
30. 内核TCP协议栈处理报文,确认序列号并放入socket接收缓冲区;
31. 转发至浏览器进程;
32. 浏览器网络线程从接收缓冲区读取数据;
33. 浏览器用会话密钥解密响应数据;
34. 得到明文JSON响应体;
35. 解析JSON响应体,提取JWT令牌和用户信息;
36. 将JWT令牌存入localStorage(或HttpOnly Cookie);
37. 确认存储成功;
38. 触发页面跳转事件:window.location.href=’/dashboard’;
39. 浏览器监听到地址变化,发起首页HTML请求;
40. 重复DNS解析、TCP握手、TLS握手过程(可复用连接);
41. 请求到达后端,经过Gateway到dashboard-service;
42. dashboard-service从请求头读取Authorization令牌;
43. 调用jwtTokenProvider.validateToken验证令牌;
44. 解析JWT提取userId,查询Redis验证令牌有效性;
45. 验证通过后获取用户权限信息;
46. 构建用户菜单数据并返回HTML页面或JSON数据;
47. 浏览器接收首页HTML数据;
48. 关闭正向TCP连接;
49. 释放公网传输临时资源;
50. 阿里云SLB释放转发资源;
51. 网关释放响应处理资源;
52. 移交控制权至浏览器渲染层;
十一、浏览器渲染层:登录成功页面构建与展示(第471-512步)
1. 浏览器开始解析HTML字节流;
2. HTML解析器构建DOM树(Document Object Model);
3. 解析过程中遇到link标签(CSS),触发CSSOM树构建;
4. 浏览器预加载器(Preloader)识别CSS资源并发起请求;
5. 接收CSS文件,CSS解析器解析样式规则;
6. 合并DOM树与CSSOM树,生成渲染树(Render Tree);
7. 渲染树仅包含可见DOM节点及对应样式;
8. 启动布局(Layout)阶段,计算每个节点的几何位置(宽、高、坐标);
9. 计算根节点(html)尺寸为浏览器窗口大小;
10. 递归计算子节点布局,遵循盒模型(box model)规则;
11. 确定登录成功提示框的居中坐标(如left: 50%, top: 30%);
12. 计算导航栏、侧边栏等组件的布局位置;
13. 布局计算完成,生成布局树(Layout Tree);
14. 进入绘制(Paint)阶段,将渲染树节点转换为像素数据;
15. 按层(Layer)绘制,如背景层、内容层、边框层;
16. 绘制登录成功图标(如对勾图标);
17. 绘制文字内容(如“登录成功,欢迎回来!”),调用字体渲染引擎;
18. 处理文字抗锯齿、行高对齐等细节;
19. 绘制按钮(如“进入控制台”按钮)的背景色、边框、文字;
20. 生成每层的绘制指令列表;
21. 合成(Composite)阶段,将各层像素数据合并;
22. 处理层间重叠、透明度等合成规则;
23. GPU参与合成运算,提升渲染效率;
24. 合成完成后生成最终的帧缓冲区数据;
25. 浏览器通过显卡驱动将帧数据发送至显示器;
26. 显示器按刷新率(如60Hz)读取帧数据;
27. 显示器背光点亮,像素点按帧数据显示对应颜色;
28. 用户肉眼看到登录成功页面;
29. 浏览器触发load事件(window.onload);
30. 执行页面加载完成后的初始化脚本(如获取用户未读消息数);
31. 脚本调用fetch API请求消息接口;
32. 重复网络请求-响应流程获取消息数据;
33. 消息数据渲染到导航栏消息图标旁;
34. 浏览器更新渲染树,触发重绘(Repaint);
35. 重绘完成后更新显示器显示;
36. 释放HTML解析临时内存;
37. 释放CSSOM构建临时资源;
38. 渲染引擎重置状态,等待后续用户交互;
39. 浏览器网络线程关闭闲置连接;
40. 释放localStorage操作临时句柄;
41. V8引擎垃圾回收(GC)清理未使用的变量和函数;
42. 回收登录表单数据占用的内存;
43. 浏览器进程将CPU资源交还系统;
44. 监控页面渲染性能指标(如First Contentful Paint、Largest Contentful Paint);
45. 记录页面加载完成时间戳;
46. 确认所有静态资源(JS、CSS、图片)加载完成;
47. 验证页面交互元素(按钮、链接)可正常响应;
48. 登录成功页面稳定展示,无布局偏移;
49. 浏览器主线程进入空闲状态,等待新的用户事件;
50. 若开启性能监控,向监控服务上报页面渲染性能数据;
51. 监控数据包含DOM解析耗时、布局耗时、绘制耗时;
52. 从点击登录按钮到页面成功展示的全流程结束;
(结束)