《个人音乐月榜(四十六)》

152 次点基 | 得到了 1 次吐槽
2021-03-13

以上八首,排名不分前后。希望能喜欢。

这一期,是日系电子与欧美电子的混合榜单,此外还有一首我特别喜欢的日系流行「alone again」,再一次单曲循环了上千次之久,可以提名今年的年度榜单了。🤭

后面两首是抖腿神曲,适合打游戏的时候听,或者你也可以接上两落地低音炮,震撼整栋楼宇。

其他的亦可尝试一下。

一直觉得 WordPress 块编辑器的文本字体太小,而且两边留白太多。碍于近视眼,在笔记本电脑上看得老费劲了,于是稍微改了一下 CSS,再用 Stylus 这个 Chrome 拓展挂载一下,现在看起来感觉比较舒心。😏

在我个人看来,用来阅读的字体一定要大,虽然正常的 16px 字体在外接显示器上看着并不小,但换到小屏幕就会感觉太小,不够大气,近视眼人群更是叫苦不迭,所以我自己博客的字体都会相对地增大一点以方便小屏幕用户阅读。

上一期有说过博客逐步从 WordPress REST API 迁移到 GraphQL 了,但体验了一轮下来感觉效果并不好,主要是浏览页面的时候发现页面加载太慢,会感觉到明显的卡顿(虽然用 REST API 也是卡顿)。看了下控制台,服务端竟然要花好几百毫秒去响应 GraphQL 请求,稍微对比了一下,发现这速度根本就和 REST API 不相上下,还不如用 REST API 呢(恼)。

GraphQL 请求
WordPress REST API 请求

这能忍吗?不!这不能忍!😡

于是我开始寻找优化方法,本想着给 WPGraphQL 套一层 Redis,思来想去,发现不会!那咋整?想起在用 Kaede 主题时对 Service Worker 的一些探索,于是决定这次也通过 Workbox 缓存数据。然而高兴地太早,捣鼓起来的时候才发现 Cache Storage 不支持缓存 POST 类型的请求…

看了下 WPGraphQL 官方文档,发现其支持基于 GET 类型的 GraphQL 请求,如下所示:

基于 GET 类型的 GraphQL 请求

也就是说,如果将原本的 POST 类型重写为 GET 类型,只需要在 Service Worker 里添几行代码,就能轻松地使用 Workbox 进行缓存,这是何等地方便快捷!但是你以为——

我会这么做吗?不!我不会!😡

我坚信着 POST 请求才是 GraphQL 的纯正血统,决定毅然继续用 POST 请求,再者,如果是简单查询还好,要是复杂一点的查询,那接上的一大串参数,可就比 RESTful API 的长了去了,看在眼里,难受在心里。

那么又该咋整呢?

我又想起在用 Kaede 主题的时候,因为网易云音乐的接口具有时效性,必须每隔一段时间就要重新获取一遍歌曲信息,然后每次都要花费一秒以上的时间去请求数据。

难道每次刷新一个相同的页面,都要等它个一两秒去获取歌曲信息?

这好吗?不!这不好!😡

于是我把歌曲信息存到了 Cache Storage 里,在大致的有效期间内,直接通过 Service Worker 返回 Cache Storage 里的缓存数据。

这就够了吗?不!还不够!😡

这个不像是页面或者其他数据,需要保证时刻是最新的,换句话说,只要在有效期范围内,都可以不用获取更新的数据。那么明明已经缓存了,为什么还要再发起一次请求呢?如何才能省掉这一个请求呢?我开始琢磨这个问题。虽然 Cache Storage 可以用于 Service Worker 之外,但并不提倡这种方法,网上查了下也找不到太多相关的教程。我思考良久,决定把目光投向 IndexedDB 这个远古产物,将歌曲信息存入了 IndexedDB 里,每次刷新页面时,如果有效期没过,直接从 IndexedDB 里读取歌曲信息,这样就不用再发送一次请求了。

现在回头看来,存入 IndexedDB 这方法值得一试,每次访问页面,会首先查询 IndexdbDB 是否缓存有这个页面所需的数据,有就直接返回缓存,然后同步从服务端获取最新的数据并更新缓存,类似于 Workbox 的缓存优先策略。

第一个请求从缓存里直接返回,第二个从服务端返回

从上图来看,感觉效果还是比较明显的,因为本来需要耗费 371ms ,现在只需要 5ms 就可以了。访问具有缓存的页面时,并没有感受到明显的卡顿感。

问题在于,如果这个页面经过了修订,比如增删了内容,那么第一次访问这个具有缓存的页面时,返回的还是缓存的数据而不是经过修订后的数据,如何才能让浏览的用户感知到这个页面已经被修改过了?

在用 Kaede 这个主题时,由于 Cache Storage 缓存的是一个 Ajax 请求,也就是一个 HTML 页面。如果该页面经过了修订,会提示该页面经过了修订,并重载页面以使用最新的数据。

这个用户体验并不好,因为重载页面,也就意味着需要重新加载 JS 等一些静态文件,然后重新渲染 DOM 树。

现在换到了 Lacus 主题,想到缓存的 GraphQL 请求主体是一个 JSON 对象,通过数据绑定直接将最新的数据反应到对应的虚拟 DOM 节点上,就不用重载页面了,使用户有一种无感知刷新的浏览体验,我自认为这种用户体验是比较好的。

总而言之,如果使用了 WPGraphQL 又想进行缓存,那么可以将 POST 请求改为 GET 请求以方便 Cache Storage 缓存,或者另辟蹊径,使用诸如 IndexedDB 这些进行缓存。印象中 Apollo Client 有一套自己的缓存方法,不过我没用过 Apollo Client 就略过了,如果用的是 Apollo Client 可以去尝试一下。

此外就是 Lacus 主题支持暗黑模式了,也改善了一下响应式布局,现在能用手机浏览博客了(并没有,大量的 blur 滤镜严重拖慢了性能😎,觉得自己手机性能强劲的可以试试😘),搜索功能还没做,因为不会😋。

PSO2 NGS 第二次封闭测试即将开始了,又一次与测试资格失之交臂,难道要等到年中的正式开服才能玩上吗…😥

看了很多 PSO2 NGS 的试玩视频,又重燃起七年前第一次玩 PSO2 的热情了,希望能快快公测让我也能玩上啊😑

在四十四期说的想准备「个人音乐分享」最后一期了,结果忙着忙着就把这事给忘了,再进虾米音乐官网一看,早已人去楼空,面目全非。那这最后一期还要不要准备呢?我现在还在考虑中,之前忘记导出虾米音乐的歌单,已经记不清还有什么歌可以收录的了…

那么,就先这样吧。

Fin
得到了 1 次吐槽
  1. Uki
    03月16日
    Uki

    !我来盗窃歌单了

留下吐槽?
刷卡上车
私密吐槽
loading