解决Twikoo评论区在页面刷新时消失问题

Elykia2024-08-262024-11-15

当浏览器开启缓存的时候，第一次打开页面可以正常显示twikoo，但F5刷新就直接消失，需要从别的页面跳过来才能显示

问题原因

js顺序的问题，twikoo要放在chunk之前加载

解决方案

和 js 的加载顺序有关，和缓存无关，Cache-Control 不能解决根本问题，建议调整 js 的加载顺序，确保“声明”在“调用”之前执行。

<!-- 声明 -->
<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.39/twikoo.all.min.js"></script>
<!-- 调用 -->
<script>
twikoo.init({ ... })
</script>

其它方式解决

声明必须在调用之前，之所以缓存之后没有出现问题，是因为<script defer ...>无法保证js的执行先后顺序，被缓存的twikoo js文件恰巧先于网站js执行了，造成了“缓存以后就正常了”的现象。

我用了其它方式解决
关于 CDN 镜像

我开始出问题是用的

1	https://cdn.staticfile.org/twikoo/1.6.39/twikoo.all.min.js

原因也出在Cache-Control: max-age=2

切换到

1	https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.39/twikoo.all.min.js

Cache-Control: max-age=31536000
就完全正常了之前是两秒过期现在缓存时间长了到没问题了

建议：

目前国内有很多 NPM 和 CDNJS 的 CDN，可以支持相关包文件的高速引用，如：

BootCDN: www.bootcdn.cn
七牛云: www.staticfile.org
360: cdn.baomitu.com
字节跳动: cdn.bytedance.com

但现在 BootCDN 经常出现问题，七牛已经被放弃支持，字节跳动更新不及时，距离上次更新已经两年有余，只剩 360 可以勉强一用，但是存在节点调度不准的问题，比如福建移动经常被分配到国外节点，北京联通却被分配到广州电信，这是极不好的，而且也不完美支持 url 格式和 dnssec、ipv6、unpkg 等功能。所以推荐以下国内高速镜像站点供饮用：