Skip to content

Latest commit

 

History

History
56 lines (34 loc) · 3.28 KB

54.md

File metadata and controls

56 lines (34 loc) · 3.28 KB

54 · 越用越卡的商城

由 pnpm docs:lessons 生成;内容源 src/data/advanced.json,合同源 scripts/generate-advanced.mjs。含教师参考答案。前置:28–30、33、40–44。

目标与原理

区分计算、渲染和持续保留。在同一文档重复同一动作,分别测工作成本与资源保留;清理引用和减少工作需要独立证据。

动作次数是共同横轴

固定五次打开关闭,比较同一批业务结果和实际任务耗时。

移除不等于释放

外部数组、事件订阅仍能保留脱离文档的详情节点。

分别证明两类改善

本页资源计数不能证明 GC;需在原生快照与 trace 核对。

交互演示

提交后叠加任务与内存变化。改变本课输入条件并预测结果;对照请求、状态或约束的关系;切换最小修复并复位,核对改变的范围。综合题先提交判断再解锁因果模型,所有模型不计完成。

商城实战

反复打开商品详情后越来越卡,节点与后台工作也增加。先判断哪些指标需要复测。

  1. 固定条件记录五次打开关闭、正常结果与当前资源数。
  2. 运行故障,执行五次详情循环,先记录变化再选择工具。
  3. 分别取性能和内存证据;不要以一次堆大小认定泄漏。
  4. 提交初步判断后返回模型,检查是否只修了一半。
  5. 应用对应清理与工作方案,在同一文档重复同样次数。
  6. 用 trace、快照和本页资源计数分别复核;停止时清理本页资源。

独立挑战与参考答案

分别证明性能和内存改善。新输入与两种故障随机;可能再次抽到同种,不保证轮流。

配置 根因 实际证据 针对性验证
配置1 关闭的详情被数组保留且每次重复同步计算 五次关闭后数组仍持有五个节点,同步任务反复出现 清空本页引用并拆分计算,按同样五次操作复测
配置2 详情订阅未注销并执行重复布局读写 五次关闭后仍有五个订阅,消息触发多次布局工作 注销本页订阅并合并布局写入,再核对业务结果
干扰项 只根据表面现象修改无关条件 没有保留条件与输入的一次截图 同时改变设备、数据与逻辑,只保留成功结果

三级提示

  1. 先复现 反复打开商品详情后越来越卡,节点与后台工作也增加。先判断哪些指标需要复测。
  2. 对照实际证据:五次关闭后数组仍持有五个节点,同步任务反复出现;或 五次关闭后仍有五个订阅,消息触发多次布局工作
  3. 一次只改变对应原因:清空本页引用并拆分计算,按同样五次操作复测;或 注销本页订阅并合并布局写入,再核对业务结果

验收、边界与恢复

只统计本页拥有的对象和订阅,不报告伪造堆大小或声称 GC 完成。 保持输入、数量、环境一致;完成故障与正常对照,选择一致证据;三轮引导和两配置挑战分别取证,原生步骤与本地结果分列。停止后清理本会话资源,再恢复浏览器设置。

共同合同 · 本批验收 · 官方参考。