我更新了博客看板娘
背景
最近博客的图片用上了又拍云CDN,网站加载速度快了不少。网站整体在1~2s
之间就能完成加载,除了我的shizuku看板娘。
平常加载她需要6~7s
的时间,而且每次切换页面,比如进入文章之类的操作,这个加载过程还会再进行一次,让人等的难受。
下图红色框起来的区域就是她的加载过程,我们看到,她从2s
开始加载,一直加载到了6s
。
经过测试,我发现是我用的hexo插件 hexo-helper-live2d 出了问题。它把看板娘的静态资源都放在unpkg.com
上供用户访问。然而这个cdn在国内的延迟很大。
以下是unpkg
和jsdeliver
的对比。
可以看到同样是国外cdn的jsdelivr
在国内许多城市的延迟在100ms以内,而unpkg
则几乎全部接近200ms。
然后更离谱的情况发生了,我发现 hexo-helper-live2d 这个项目在github已经归档了,已经变成只读的了。
用着一个已经被遗弃的项目,加载速度能快就有鬼了2333
live2d-cdn的创建
在github简单搜了一下,目前比较流行的live2d项目是 stevenjoezhang/live2d-widget。
里面包含两种得到资源的方式。
- 利用 fghrsh/live2d_api 在自己服务器上跑一个php程序当后端接口。称为api方式。
- 指定url链接,直接获取看板娘的需要静态资源。一般我们都会把资源放在cdn上获取最大速度,称为cdn方式。
大学以来CTF的经历让我对php的印象不是很好,而且个人认为没有必要用后端接口,看板娘需要的就是它的静态资源文件,cdn方式完全可以得到目的。
于是我便简单魔改了一下代码,删除了原项目中 使用api的代码。
然后原项目因为怕涉及到版权问题,没有给live2d的模型。在找了一圈后,我发现 imuncle/live2d 这个仓库里面提供了许多模型。
看了100多个模型,最后选择了小埋,我便把模型直接放到仓库里了。经过一番代码的调整,最后这个项目就完成了。
wuuconix/live2d-cdn: 自用。仅包含cdnPath的live2d-widget。内置模型。 (github.com)
效果展示
可以看到,现在整个网页包括小埋的加载都只用了2.2s
。十分迅速。
而且由于 stevenjoezhang/live2d-widget 的创新,给看板娘加上了waifu-tool
。
当鼠标指针移动到她身上的时候会出现一些功能按键。大家自己体验吧2333。实际效果很赞。