前端优化计划

[mark9804]

备忘：mac 自带的字体渲染策略约等于其他平台的 -webkit-text-stroke: 0.018em

• [x] render.js capture 节点尽量都下移至 body
• [ ] overview 找不到图片时的错误信息优化，一般是材料太新了才会没有图片
• [x] 把前端报 warning 的地方给检查一下
• [x] 优化 card-8.html 页面结构
• [x] material，card-8 自适应人物证件照宽度 不干了
• [x] card-8 加上动态显示的世界等级（ -1 不展示，-1 以外展示）
• [x] card-8 页面加上动态显示的玩家名称（签名）
• [x] #550
• [x] #563
• [x] card-8 减少元素尺寸变化导致的重绘
• [x] card-8 在签名不显示时（使用 uid 查询时）credit 与角色 box 过于接近
• [x] card-8 填一下左边太空的问题（需要优化）
• [x] card-8 诚哥壶模块也做成自动识别的 能做，跪着
• [x] gacha 卡池 2 -> 3
• [x] overview 自适应布局 先 2 -> 3 再自适应布局， ref #340, #343
• [x] character 2 -> 3
• [x] artifact 2 -> 3
• [x] aby 看一下怎么处理，基本逃不掉 重写 了
• [x] aby 有空把楼层详细信息加上

[mark9804]

@Arondight 老大哥，这里还有一个调用原作者 oss 的 url，到时候看看要不要扒下来

https://github.com/Arondight/Adachi-BOT/blob/05f92d9f22483da4c349074867a255e523cf397b/src/views/component/card-8/card-8.css#L228-L236

[Arondight]

后续我扒下来

[mark9804]

Done

warning 有亿点点多，等清醒的时候打磨一下

[mark9804]

MiSans MIUI13全新系统字体

现在用的字体毕竟还不是100%安全，思源黑体结构太散，霞鹜文楷的魔改空间不大，必要的时候可以换免费商用

嗨呀，早半年发布的话深渊就没思源黑体什么事了，现在还要纠结一下 git 空间

[mark9804]

如果可以完整显示所有角色的话，那么 slice(0, 8) 就没有意义了，因为当时原作者的网页高度是写死的，所以只能输出最多八个角色，否则发的图就显示不全。现在由网页内容（而不是开发者）决定高度，就只剩下“不好看”的问题

https://github.com/Arondight/Adachi-BOT/blob/c0ea27d5da074824e6d5f7372fa6f9e02e6f5d85/src/views/component/card-8/app.js#L101

假如 params.avatars.length >= 8，那么切换成竖排单列显示，这样的话“不好看”的问题也就解决了，之前在重写的过程中我稍稍做了一下右半边显示组件的模块化，想切换也不会很难

[mark9804]

gacha 结构图

box 结构图

[mark9804]

长内容

看了一下，现在浏览器和后端 server 之间： 1. 通讯协议是 HTTP 1.1，但是 nodejs 很早就支持 [HTTP/2](https://nodejs.org/api/http2.html) 了，现在 [HTTP/3 已经在路上了](https://github.com/nodejs/node/issues/38478)  这使得在传输数据的过程中有大量的资源在排队（例如下图中 Network 栏的箱线图中的线粗略代表了排队情况）  HTTP/2 长这样：  2. 数据传输没有经过 [压缩](https://github.com/webfansplz/article/issues/28)，我不太确定如果用上压缩之后总渲染时间会减少还是增加（数据压缩解压也需要计算资源），但是现在下载字体文件的时间太久了 Network 当中的灰色条是字体的加载流 

[Arondight]

1. http2 需要证书，太麻烦了，如果性能提升有限我觉得还是算了
2. 压缩的问题，我们的数据当前是全部通过 url 参数传递的，不是 post 过去的，这个没法压缩了，至于其他资源文件可以使用 express 进行压缩，但是压缩带来的收益不一定能够抵消开销

[mark9804]

那暂时想不到什么性价比高的方式了，就先这样吧

[Arondight]

我想了一下压缩的事情，我们几乎没有能够优化的数据，图片本身就是压缩的，再压缩意义不大，又没有大文本，传递的文本都很短，压缩也意义不大

[HYTT0510]

你好提供一个建议 深渊数据的图太长了 每次要下拉才能显示完整 是否可以做成正方形 不然手机看着很不方便

[mark9804]

是“使用自己的 cookie 进行查询时深渊数据图太长”的问题吗，如果是这样的话你可以去找 1.5.1版本 里面的网页和 css 替换过去，那个是旧版的，现在这个是向米忽悠低头的结果

当前的深渊暂时不打算改了，之后肯定要大改甚至重写，不想做太多没有用的工作

你好提供一个建议 深渊数据的图太长了 每次要下拉才能显示完整 是否可以做成正方形 不然手机看着很不方便

[HYTT0510]

不是自己的数据 就是每个人的点开 都要稍微往下面划一下才能看到全部的数据

我的意思是方不方便做成这样 就不用往下拉

[mark9804]

也行，晚上改改

[mark9804]

@HYTT0510 重新拉一下代码，这是旧版本深渊最后一次更新，我在我自己 iPhone 上测试过了可以在一页之内显示完

之后我会在这个 issue 里面更新其他进度，你需要手动 unsubscribe 这个 issue 来避免邮件干扰，其他建议麻烦开新的 dissussion 或者新的 issue

[mark9804]

加入渊下宫之后诚哥壶下面好空啊，得想个办法在不增加数据的情况下塞点东西进去

[Arondight]

，得想个办法在不增加数据的情况下塞点东西进去

~签名变大放左边~

[mark9804]

签名变大放左边

我的第一想法也是这个，比起其他用来传递重要信息的功能性元素来说签名和 credit 这两个可有可无的半装饰性元素更好移动

但是把它们移动到左边是不符合逻辑的，就好像一份租房合同，开头甲乙方签名，结尾甲乙方签名，基本没有人会在合同正中间签名

所以目前我的想法就是我再想想

[Arondight]

把它们移动到左边是不符合逻辑的

把 签名 两个字删掉就合逻辑了，字体再拉大，我感觉一眼看上去没啥奇怪的

[mark9804]

card-8: 诚哥壶模块也做成自动识别的，默认背景图整一个阿圆，不能直接扒 json里面官方提供的那个背景图，那个太大了，一张图 2MB，直接冲着桌面壁纸的级别去了

[mark9804]

米忽悠已经给我 <信息> 的参考答案了，我真傻

[mark9804]

https://github.com/Arondight/Adachi-BOT/blob/94a8e16548df7497d44cee6dc685cd7297592bc2/src/views/genshin-character.html#L128-L135

等改到 V3 的时候这里应该改成「背景色 + div (+ backdrop-filter)」的形式，不要直接拿 JS 去操作 DOM，overview 同理

[mark9804]

这段我不太明白这么做有什么意义，究竟是在什么情况下才会返回 { name, level: -1 } 这个缺省值呢，感觉除非米家 API 抽风在 Array 里面少返回了某个洞天的数据，不然永远不会触发，但是假如没有这个数据的话自然就应该认为它不存在

@Arondight 老大哥见多识广，能理解吗

https://github.com/Arondight/Adachi-BOT/blob/94a8e16548df7497d44cee6dc685cd7297592bc2/src/views/component/card-8/app.js#L126-L136

[mark9804]

除非米家 API 抽风在 Array 里面少返回了某个洞天的数据，不然永远不会触发

原来米家 API 真能干出这种事

[Arondight]

这些 api 不可能是稳固的，数据都要通过集群来查，集群的节点之间不一定稳固，另外最大的问题是查询有队列，超时了后端不能一直等

[mark9804]

这些 api 不可能是稳固的，数据都要通过集群来查，集群的节点之间不一定稳固，另外最大的问题是查询有队列，超时了后端不能一直等

我找了几个号验证了一下，发现这个部分的 API 就是这么设计的，如果某个洞天开了就返回数据，没开的话 homes 数组里面就没有这个洞天；如果一个洞天都没开，前端就直接去掉洞天部分不显示

也就是说这个 API 当中存在两种逻辑：

• 如果某个值不可用也会返回（比如玩家冒险等级不存在，返回一个 -1；稻妻和渊下宫没开，返回一个全部值是 0 的 dict ）
• 洞天单独的逻辑，没开，摆烂，嘻嘻

[mark9804]

卡池前端适配完了，等 data.js 加上命定值之后在左下角加一个就提交

效果图

 

[Arondight]

等 data.js 加上命定值之后在左下角加一个就提交

我下班写，上班就跟三大战役似的

[mark9804]

我下班写，上班就跟三大战役似的

我插件还没开始改呢，最快也得今晚

[mark9804]

1. command.yml 正则入口修改 ^([1-9][0-9]*|[一二两三四五六七八九十百]+)[抽连]\s*

2. 映射中文到数字 https://onecompiler.com/javascript/3xqwfxhwr

3. doGacha

[Arondight]

不要这个样子，把十连换成抽卡命令，后面直接跟数字，就跟 roll 命令一样，我感觉还是用起来方便比较重要

[Arondight]

这个我和定轨一起写吧，总之就给网页定轨信息和抽卡次数就可以了

[mark9804]

抽卡次数直接算一下 data 的长度就出来了，总之我先提交一个，到时候再打补丁

[Arondight]

好的，定轨的你参考

https://github.com/Arondight/Adachi-BOT/blob/7e8c8a2ba6d124565cf083609d0ba5f278419839/src/plugins/gacha/data.js#L148

就可以了，fate 是定轨值，上面发的那个 object 里面就有名字和 type

[Arondight]

你先搞一下提上去把，晚上我看看你还缺什么地方补上

[mark9804]

Mac 上的字体渲染策略会使得字体偏粗，之后注意一下一致性

macOS


Linux


[mark9804]

摸一个原型，iPhone 13 尺寸屏幕一屏正好

[mark9804]

这个也拿来，如果当前没有某张图，就 filter 模糊一张，加上素材名字 太麻烦了，不做了，摸了

[mark9804]

今晚把新的 overview 提上来，明天开始要做学校的项目了，再不动笔教授要给我从研究室里扔出去

[mark9804]

这个也拿来，如果当前没有某张图，就 filter 模糊一张，加上素材名字

这个忘做了。。

旅行者前面会有个点也忘记去掉了

[mark9804]

现在 overview 的图像体积大概稳定在 1.3 MB 左右，老大哥看看要不要把 scale 从 2 下调到 1.2(?) 左右

@Arondight

[Arondight]

看看要不要把 scale 从 2 下调到 1.2(?) 左右

你直接调就好了……我可能调的不是很适合

[mark9804]

不会糊的区间大概是 1.5 - 2.0 ，改了没什么意义，等有反馈说响应太慢了再说

[Arondight]

我更新了一下，比以前的好看多了

[Arondight]

信息里面命座的高度方便做成自适应的么

[mark9804]

信息里面命座的高度方便做成自适应的么

都是自己动的，不过忘记加上垂直居中了是真的

[Arondight]

神🦩的命座一二六我看着空白好大

[mark9804]

神🦩的命座一二六我看着空白好大

确实，但这个改动太小了，等有其他问题在一起提交……

[mark9804]

• 忘记加上垂直居中了
• 神🦩的命座一二六我看着空白好大

两个一起提上去了，之后

• [x] 微调一下颜色让字更好认一些，
• [ ] 把这套模板套去 我的

以上两个是多线程，我也不知道哪个会先出来

[mark9804]

gacha-box 应该是一个四层的结构，从下到上是底层图片 - 物品图片 - 物品信息 - 边框，如此改动也可以在不更改图片的情况下解决五星背景图比其他背景图稍微窄一点的问题