CDN缓存不同步，线上调试的心酸之旅

CDN缓存不同步：一次线上调试的经历

这是一个大概3个月之前的一次线上调试过程，最后排查到的原因很简单，但调试过程让我认识了所谓“线上环境复杂”是什么意思。这是入职后接手的第一个H5页面需求，也是比较重要的内部项目，几乎所有公司部门都参与了此项目。项目完成后获得了公司的内部奖励，当然这是后话了。

我负责的部分算项目中比较核心的，一个用户列表页（简称用户页），需求很简单，用户根据不同身份有不同的功能菜单，之前由后端直接渲染，现在需要改为前端。改动不大，按理说很简单，改完之后提测，测试提了4个bug，分别是：

1. Android真机看不到列表
2. iOS真机看不到列表
3. Android真机有功能菜单，iOS真机没有
4. Android真机有功能菜单，但是其中一个入口菜单点击无效

头两个问题比较容易定位到原因，Android真机看不到列表是因为Android的WebView对CSS样式兼容有问题，列表被遮住了。iOS真机看不到列表的原因是iOS的代理设置了，导致列表加载不出来。

后两个问题比较棘手，功能菜单没出来应该是前端代码有问题，点击无效是因为后端没有对应的接口。分别改完之后，打包测试通过，提测。

又是一样的问题，iOS真机还是没有功能菜单，真机调试又发现，服务端确实返回了功能菜单的数据，前端代码也没有问题。这时候就比较纳闷了，真机测试没问题，测试那边用的是真机，为什么会有不同的现象呢？于是乎我开始怀疑是不是自己的代码有什么问题，会不会是在真机上跑的时候，某些逻辑判断出错了。

既然怀疑代码，那就加点日志吧，于是加了日志，重新跑一遍，结果发现在iOS真机上，接口返回的数据跟在真机调试的时候返回的数据不一样。按照返回的数据，前端代码逻辑没有问题，但为什么返回的数据不一样呢？

因为是涉及到后端接口，猜测可能和后端的缓存有关，于是乎又联系后端同学，问他们有没有做过什么缓存配置，结果还真有。后端同学说在开发环境为了提升效率，使用了CDN缓存，但是考虑线上环境CDN的复杂性，线上环境没有用CDN缓存，也就是线上线下环境不一致。

后来后端同学把线上环境的CDN缓存关掉，再提测，这次iOS真机终于看到了功能菜单了。

排查这个问题花费了比较长的时间，过程中也一度怀疑自己的代码有问题，直到怀疑后端缓存，才算定位到问题根因。这个过程让我认识到所谓“线上环境复杂”是什么意思，只要环境不一样，就可能出现各种不同的问题，特别是牵扯到服务端改造的时候，这种问题就更容易出现。

后来我又对前端进行了改造，无论线上线下，都统一使用CDN缓存，保证了线上线下的环境一致性，这种问题再也没有出现过。

线上环境复杂，其实主要是说线上环境有很多不确定性，不管是网络环境，还是用户使用的设备，这些因素都会影响线上环境的运行情况。因此，在进行线上调试的时候，需要考虑到各种不确定性，耐心排查，才能定位到问题根因。