工作记录

Todo

  • supertokens role 的 auth 还行吗？速度感觉是一个问题？ [doing]

    看 loki 日志，排查原因。

    API 时间：

    time level request-time path

    2026-02-24 21:08:41.000 info 0.21 /api/internal-auth/check

    2026-02-24 21:08:41.000 info 0.22 /api/internal-auth/check

    2026-02-24 21:08:41.000 info 0.24 /api/internal-auth/check

    Nginx 时间：

    time level auth-request-time uri request-time [status] [body-bytes]

    doc:

    2026-02-24 21:08:40.000 info 0.213 /docs/030-speaking-scenes/200-nursing/ 0.422

    2026-02-24 21:08:38.000 info 0.211 /docs/030-speaking-scenes/180-trim-nails/ 0.429

    mp3:

    2026-02-24 21:08:32.000 info 0.209 /docs/030-speaking-scenes/230-massage-time/audios/08-back.mp3 0.474 206 640436 2026-02-24 21:08:32.000 info 0.209 /docs/030-speaking-scenes/230-massage-time/audios/08-back.mp3 0.474 206 640436 2026-02-24 21:08:31.000 info 0.248 /docs/030-speaking-scenes/230-massage-time/audios/00-core.mp3 1.088 206 454593

    2026-02-24 21:08:27.000 info 0.254 /docs/030-speaking-scenes/100-put-on-cream/audios/%E6%93%A6%E9%9D%A2%E9%9C%9C-%E5%8F%96%E9%9D%A2%E9%9C%9C.mp3 0.489 499 0

    现在确认：

    1. auth 现在耗时稳定在 0.2s，request-time 包含了数据发送到客户端的时间—所以网速可能是request-time double 的原因（假设网速连接消耗 0.2s, 那client 侧感觉就是 0.6s 了）
    2. mp3 耗时不稳定，有的很久，应该是 size 有关？我看 audio 侧拉取的是 metadata, 但是 nginx 返回的内容还是挺大的

    之所以这样，是因为 mp3 是 VBR 的，浏览器不知道多大的头包含所有的 metadata, 发送的 range 就会相对大。 浏览器为了获取那一点点 Metadata，往往会拉取 100KB - 500KB 的数据，如果文件本身就很小，它就顺便全下完了。 所以就出现了下载量比较大的情况。要想避免这个问题，最简单就是把 preload 设为 none.

  • mp3 加载优化：只加载 viewpoint 内的 audio metadata

    <!-- 重点：改成 preload="none" -->
<audio class="player-audio lazy-audio" preload="none" controls>
    <source src="/docs/.../xxx.mp3">
    你的浏览器不支持此音频
</audio>
    1. 添加 JavaScript 代码

    这段脚本会自动扫描所有带 .lazy-audio 类的音频标签，并在它们进入视野时触发加载。

    <script>
document.addEventListener("DOMContentLoaded", function() {
    // 1. 检查浏览器是否支持 IntersectionObserver (绝大多数现代浏览器都支持)
    if ("IntersectionObserver" in window) {

        // 2. 定义观察器的回调函数
        let audioObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                // 如果元素出现在视口中 (isIntersecting 为 true)
                if (entry.isIntersecting) {
                    let audio = entry.target;

                    // 3. 核心操作：把 preload 改回 metadata
                    // 这会告诉浏览器：“嘿，用户看到我了，快去下载元数据！”
                    audio.preload = "metadata";

                    // 调试日志 (可选，上线后可删除)
                    console.log("Audio visible, loading metadata:", audio.currentSrc || "source inside");

                    // 4. 停止观察当前元素 (避免重复触发)
                    observer.unobserve(audio);
                }
            });
        }, {
            // 配置：rootMargin 用来提前加载
            // "0px 0px 200px 0px" 表示在元素距离屏幕底部还有 200px 时就提前触发
            // 这样用户滚到那里时，时长可能已经加载好了，体验更丝滑
            rootMargin: "0px 0px 200px 0px"
        });

        // 5. 找到页面上所有需要懒加载的 audio 标签并开始观察
        let lazyAudios = document.querySelectorAll("audio.lazy-audio");
        lazyAudios.forEach(function(audio) {
            audioObserver.observe(audio);
        });
    } else {
        // Fallback: 如果浏览器太老不支持 IntersectionObserver，就直接全部加载
        // 或者是直接保留 preload="none"，让用户点击播放时再加载
        let lazyAudios = document.querySelectorAll("audio.lazy-audio");
        lazyAudios.forEach(function(audio) {
            audio.preload = "metadata";
        });
    }
});
</script>

  • page 优化：

    • 增加面包屑
    • 表格样式优化？
    • navbar 对齐主题色，对齐宽度

  • 上线后 TODO

    • 配置 Stripe webhook：

      • 创建 Webhook 端点

        After testing locally, get your webhook event handler up and running on your server. Next, create a webhook endpoint to send checkout.session.completed events to your server, then test the Checkout flow again.

        https://docs.stripe.com/webhooks#register-webhook

Process

生活记录

今日好好和黄车车回重庆，自己一个人。还是有好好吃饭的。

情绪记录

Good

Bad

Reflect

自己有点质疑为啥好好要这个时候回去，人多，只能买到贵的高铁票。但是理智告诉我，显然不应该去说这些话。 闭上嘴，少点 judge。

多一些理解，特别是对家人。