本博出现图碎问题说明

数据流向

通过下图可以看出，图片文件保存在主机上，通过转换处理为 WebP 格式文件，经由 CDN 回源并实现访问加速：

问题分析

登录 CDN 管理后台查看其日志，发现出现超时记录。

超时原因一般两种，一种是因线路问题导致回源超时，一种是因主机没有及时返回数据造成。

本地图片经由 WebP 中间件处理，再回源给 CDN 做反代，经查是 WebP 服务突然宕机导致 CDN 未收到响应数据导致超时。

除超时问题外，因无返回数据导致 CDN 响应 404，而服务器设置 404 默认跳转至主站首页，这就导致好多小伙伴频繁刷新页面依然不显示图片。

解决方案

目前已关闭 CDN，流量直接回源至源主机，缺点就是会影响访问的速度。带调试维护后会重新挂上 CDN。

WebP 图片转换是为了减少图片体积，进而减轻带宽压力「轻量级服务器有流量的限制」因此不能暂停使用，已修改其参数，尽量保障响应的成功率。

如之前有访问记录，会留下 404 跳转缓存，需要清理相关数据。

有小伙伴分享了两种清理缓存的方法，需要的小伙伴可以参考操作。

清理缓存

首先进入到浏览器的开发者工具，一般浏览器点击F12即可，进入更多设置，勾选 Disable cache while DevTools is open 项：

或者切换到网络标签页，勾选禁用缓存，刷新页面即可「注意保持开发者工具一直处于开启的状态」