我更新了博客看板娘 - wuuconix's blog
背景
最近博客的图片用上了又拍云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。实际效果很赞。
相关文章
- Linux CPU 上下文切换的故障排查
- 没升级的先等等?外媒测试称Windows 11续航表现不如Windows 10?
- OpenHarmony-ArkUI(TS)声明式开发之列表拖动排列
- 服务出现明显的变慢,该如何诊断处理?
- 必看之工具推荐远程开发环境Op生产力UPUPUP
- Linux网络流量安全审计的神器
- EuroLinux 现代 Linux 操作系统,基于强大的 RHEL 9
- Linux 下查看内存使用情况方法总结
- Linux 的 Windows 子系统 WSL 现在带来期待已久的支持
- React如何原生实现防抖?
- GO 编程:Go 应用内存占用太多,如何排查
- 在 Arch Linux 和其他发行版中使用终端连接到 WiFi
- 编译效率快三倍,使用WSL2编译OpenHarmony嘎嘎得劲!
- Firefox 开发商 Mozilla 称苹果谷歌微软操作系统锁定浏览器,限制用户自由选择
- Linux之父是个果粉:给M2 Mac装上Fedora Linux,搞定编译和打补丁
- 代码覆盖率在性能优化上的一种可行应用
- Docker笔记:一篇学会Docker网络知识
- 如何通过替换Full-SDK解决找不到部分API
- Windows 11开发预览版 Build 25206 发布:外部显示器新增动态刷新率功能
- 我们一起聊聊操作系统