IE11偶发仅显示方框与字符问题排查求助，清缓存有时可修复

• 优先排查静态资源缓存策略与IE11的兼容问题
  • 核对接口返回的缓存响应头是否适配IE11的判定逻辑：IE11对304响应的处理和现代浏览器存在差异，如果资源响应没有明确设置max-age=0，IE11会直接复用本地旧缓存，不会重新发起资源校验，很容易出现脚本版本错配、样式丢失的偶发问题
  • 检查带内容哈希的静态资源（比如index.8f3a2b.js）的加载逻辑：IE11的临时文件索引库很容易损坏，一旦索引和实际缓存的资源路径对不上，就会出现错加载旧资源、资源404的情况，清缓存本质是重建这个损坏的索引库
• 排查IE11专属的接口兼容问题
  • 确认所有用到的现代API（比如Promise、fetch、Array.prototype.includes）都做了兼容处理，如果对应的polyfill脚本因为缓存问题加载失败，就会出现页面脚本报错、功能失效的情况
  • 检查IE11的兼容模式配置逻辑：部分企业环境下的IE11会随机把站点映射到旧文档模式渲染，这种异常和缓存状态强关联，清缓存会临时重置站点的兼容模式标记，故障就会暂时消失
• 排查本地持久化存储的异常
  • 核对localStorage、sessionStorage的写入逻辑：IE11对存储容量的判定存在bug，当存储占用接近5M上限时，会随机丢弃部分存储内容，导致页面读取到空值、错误值出现功能异常，清缓存会连带清空这些损坏的存储数据
  • 检查Cookie的属性设置：IE11对SameSite属性的支持不完整，跨域场景下Cookie会出现随机写入失败、提前过期的问题，重置Cookie之后就能恢复正常
• 快速定位方法
  • 故障出现时直接按F12调出开发者工具，在网络面板勾选“始终绕过缓存”选项，刷新页面如果故障立刻消失，就可以基本确定是缓存链路的问题，顺着查资源加载的请求路径、响应头即可
  • 临时给页面入口、核心业务脚本的响应加上Cache-Control: no-store的标记，观察一段时间看故障是不是完全消失，进一步缩小排查范围

内容的提问来源于stack exchange，提问作者vico