IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 我更新了博客看板娘 | 小埋UMR -> 正文阅读

[开发工具]我更新了博客看板娘 | 小埋UMR

背景

最近博客的图片用上了又拍云CDN,网站加载速度快了不少。网站整体在1~2s之间就能完成加载,除了我的shizuku看板娘。

平常加载她需要6~7s的时间,而且每次切换页面,比如进入文章之类的操作,这个加载过程还会再进行一次,让人等的难受。

下图红色框起来的区域就是她的加载过程,我们看到,她从2s开始加载,一直加载到了6s

shizuku加载

经过测试,我发现是我用的hexo插件 hexo-helper-live2d 出了问题。它把看板娘的静态资源都放在unpkg.com上供用户访问。然而这个cdn在国内的延迟很大。

以下是unpkgjsdeliver的对比。

unpkg

jsdelivr

可以看到同样是国外cdn的jsdelivr 在国内许多城市的延迟在100ms以内,而unpkg则几乎全部接近200ms。

然后更离谱的情况发生了,我发现 hexo-helper-live2d 这个项目在github已经归档了,已经变成只读的了。

archived

用着一个已经被遗弃的项目,加载速度能快就有鬼了2333

live2d-cdn的创建

在github简单搜了一下,目前比较流行的live2d项目是 stevenjoezhang/live2d-widget

里面包含两种得到资源的方式。

  1. 利用 fghrsh/live2d_api 在自己服务器上跑一个php程序当后端接口。称为api方式。
  2. 指定url链接,直接获取看板娘的需要静态资源。一般我们都会把资源放在cdn上获取最大速度,称为cdn方式。

大学以来CTF的经历让我对php的印象不是很好,而且个人认为没有必要用后端接口,看板娘需要的就是它的静态资源文件,cdn方式完全可以得到目的。

于是我便简单魔改了一下代码,删除了原项目中 使用api的代码。

然后原项目因为怕涉及到版权问题,没有给live2d的模型。在找了一圈后,我发现 imuncle/live2d 这个仓库里面提供了许多模型。

模型们

看了100多个模型,最后选择了小埋,我便把模型直接放到仓库里了。经过一番代码的调整,最后这个项目就完成了。

wuuconix/live2d-cdn: 自用。仅包含cdnPath的live2d-widget。内置模型。 (github.com)

效果展示

可以来我的博客查看实际效果

wuuconix.link

小埋

可以看到,现在整个网页包括小埋的加载都只用了2.2s。十分迅速。

而且由于 stevenjoezhang/live2d-widget 的创新,给看板娘加上了waifu-tool

小埋

当鼠标指针移动到她身上的时候会出现一些功能按键。大家自己体验吧2333。实际效果很赞。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-07 22:55:14  更:2022-04-07 22:55:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 5:36:46-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码