掌握系统优化的方法课件有哪些类型

网站标签页切换后音频 / 视频继续播放

1. 检查标签页切换事件监听，触发时暂停媒体播放；2. 修复媒体播放器的状态管理，记录切换前播放进度；3. 核实是否启用了后台播放功能，需手动关闭；4. 切换标签页后自动暂停，返回时恢复播放进度

网站二维码扫码后跳转地址错误

1. 检查二维码生成时的跳转地址参数是否正确；2. 核实地址是否包含特殊字符，未进行 URL 编码；3. 确保跳转地址的域名可访问，无拼写错误；4. 测试不同扫码工具，排查兼容性问题

网站页面滚动时元素错位或抖动

1. 检查 CSS 定位属性（如 position: fixed）是否正确，避免滚动时偏移；2. 修复滚动事件监听逻辑，避免频繁修改 DOM 导致回流；3. 确保元素宽高固定，或使用 flex/grid 布局适配滚动；4. 处理移动端滚动穿透问题，避免弹窗滚动影响背景

网站分页功能异常，无法翻页

1. 检查分页参数传递是否正确（如 page、limit）；2. 核实后端分页查询逻辑，是否正确计算总页数；3. 修复分页链接跳转地址，确保指向正确页面；4. 测试边界情况（第一页、最后一页、超出范围）

网站没有响应式设计，移动设备显示异常

1. 使用 CSS 媒体查询调整布局，适配手机 / 平板屏幕；2. 采用流式布局，避免固定像素宽度；3. 优化字体大小和间距，提升移动设备可读性；4. 测试不同设备显示效果，确保交互功能正常

网站 PWA 应用无法安装或安装后无法打开

1. 检查 manifest.json 文件格式是否正确，必填字段（name、short_name、start_url、icons）是否完整；2. 确保 Service Worker 正确注册并激活；3. 核实网站已部署 HTTPS，且无混合内容；4. 测试不同设备（iOS/Android）的安装流程，排查兼容性

网站字体大小调整功能异常

1. 检查字体大小切换逻辑，是否正确修改根元素 font-size；2. 确保所有文本使用相对单位（rem/em）；3. 存储用户字体大小偏好，下次访问自动应用；4. 限制字体大小范围，避免布局错乱

网站音频无法自动播放，即使添加 autoplay 属性

1. 检查浏览器是否支持自动播放，部分浏览器要求静音自动播放（添加 muted 属性）；2. 修复自动播放触发逻辑，确保在用户交互后执行（如页面加载完成后）；3. 核实音频文件是否加载完成，未加载完成无法自动播放；4. 提供手动播放按钮，作为自动播放的备选

网站 WebSocket 连接被服务器主动断开

1. 检查服务器 WebSocket 配置的超时时间，适当延长；2. 修复客户端心跳机制，定期发送 ping 消息维持连接；3. 核实服务器资源是否充足，无连接数限制；4. 处理断开后的自动重连逻辑，确保连接恢复