我评论区呢?我放在这里的一个大评论区呢?(迷惑 pic.twitter.com/XjKqLWT5R6
— 糖喵💕🍭 (@Candiinya) April 13, 2020
惯例先是一篇推文祭天(
起因
事情是这样的,在某个日常检测站点状况的平凡日子,开开心心点开文章的我惊恐地发现某些页面的评论区消失了。这可不行呀,好不容易才整理上去的评论区,怎么突然就原地蒸发了呢?不信邪的我刷新了页面,嗯倒是显示出来了,但是当点到别的页面,再回来时,评论区又一次不知所踪……此情况不断复现,虽然朋友都表示并没有注意到什么异常,但是我觉得很有必要好好来处理一下看看究竟是什么原因导致的。
深入
然而,经过反复的试验,得出了一个比较诡异的结果:仅Chromium核心的浏览器(Chrome、Edge Beta)会出现此类的情况,Edge浏览器则无论怎样访问都不会有这种现象的发生。时逢我正升级了Chrome,因此我一度怀疑是Chrome升级时候出现内核损坏,并导致页面渲染出现异常。通过审查元素,发现Disqus的容器已经出现,但是里面却空空如也。这种情况又像是JS没有被执行的问题,又像是浏览器兼容性问题,但是为了排除可能是Disqus的问题,我决定等引入DisqusJS之后再进行相关的排查。
DisqusJS的引入很顺利,无论是API的创建,还是代码的加入,稍微处理一下就顺利完成并发布了。然而当commit上去之后,好景不长,这种评论区不加载的情况再次出现。虽然相比起原来的几乎半数文章都无法加载评论,现在仅有一篇文章的丢失评论区显得问题变得轻微了,但是即使是引入DisqusJS也没能解决的问题,说明可能与使用的评论框架无关。问题又一次陷入僵局。
不知为何,我似乎想起,在本地调试的时候好像并没有遇到过这种情况,因此我又一次打开调试控制台,看到了空空如也的容器,和底下安然无恙的代…这是什么东西??(惊恐
刷新一下,评论区倒是能正常加载了,但是我想我好像也没写过这一段类型码吧?
但这又是谁加上去的呢?Edge上也没出现这段类型,也没出现什么奇怪的问题,一切都看上去非常正常,但我总不能让所有的访客都用慢悠悠的edge来浏览这个本身加载就已经慢悠悠的网站吧……
浅出
唯一的线索就是之前那一串也不知是不是哈希的奇怪东西了,那就死马当活马医,试试在HTML文档里搜索,看看能不能尽可能找出点端倪吧!
结果很显然,其他出现的地方为我提供了解决问题的关键要素:data-cf-modified
既然data(数据)是被CF(CDN提供商)给modify(改变)掉了,那把它改回来就好啦!于是我想都没想就关闭了HTML压缩,清除了缓存,刷新了页面,清除了缓存和刷新了页面,清除了缓存又刷新了页面,清除了缓存之后还是刷新了页面……怎么一点变化都没有?甚至开启开发模式也没有任何用处?
惊喜
既然我已经思维竭尽了,那唯一能依靠的……嗯Google试试看吧!于是我抓住了一根救命稻草,没错,就是在那个加载老半天还在转圈圈的CF论坛上有人的提问~(捂脸
话不多说,你不肯加载,那我就Google快照伺候好了
是的,就是这么一条回复,包含了我需要的全部信息:关闭Rocket Loader
没错,就这么一个开关的事,竟然引起了这种奇奇怪怪的情形……
后记
这种问题在第一次访问页面的时候不会出现,但是当pjax后,页面里就会出现这种无法加载的评论区问题,应该是CloudFlare的RocketLoader和pjax兼容性不佳,导致内容更新之后没有及时处理映射导致的。
至于为什么edge不会出现这种问题嘛……我严重怀疑RocketLoader是针对Chromium核心进行优化的产物,Edge发送的UA被CloudFlare判定为不支持这个功能的,因此也就没有再启用上了,反而莫名就规避了问题……