DNS 冷启动：小型站点的“西西弗斯之石”当我们谈论网站性能时，我们通常关注前端渲染、资源懒加载、服务器响应时间（TTFB）等。然而，在用户浏览器真正开始请求内容之前，有一个至关重要却鲜少在性能优化方面被提及的部分—— DNS 解析。对于默默无闻的小型站点而言，“DNS Cache Miss”（缓存未命中）或我称之为“DNS 冷启动”，会成为绕不过去的性能瓶颈，也就是本文标题所提到的“西西弗斯之石”。神话的隐喻：DNS 解析的漫长旅程要理解这块“石头”的重量，我们必须重温 DNS 解析的完整路径。这并非一次简单的查找，而是一场跨越全球的接力赛：起点：公共 DNS 服务器 — 用户发出请求，公共 DNS 服务器尝试在缓存中寻找答案。首次“推石”：根服务器 — 缓存缺失（Cache Miss），公共 DNS 服务器被引向全球 13 组根服务器。第二程：TLD 服务器 — 根服务器指向特定后缀（如 .com）的顶级域名服务器。第三程：权...
HTTP/2 Server Push 已事实性“死亡”，我很怀念它我最近一阵子在重构我的博客，恰巧之前一阵子准备秋招的时候背八股时看到了 HTTP/2 的服务端推送，于是便尝试在部署阶段为我的博客配置好 HTTP/2 的服务端推送，试图以此来进一步优化首屏加载速度。HTTP/2 服务端推送为什么能提升首屏加载速度如下图，在传统的 HTTP/1.1 中，浏览器会先下载 index.html 并完成第一轮解析，然后再从解析出的数据中拿到 css/js 资源的 url，再进行第二轮请求，在 tcp/tls 连接建立后最小需要两个 RTT 才能取回完整渲染页面所需的资源。sequenceDiagram participant Browser participant Server Browser->>Server: GET /index.html Server-->>Browser: 200 OK + HTML Browser->>Server: GET /sty...
Nuxt Content v3 中数组字段的筛选困境与性能优化Nuxt Content 是 Nuxt 生态中用于处理 Markdown、YAML 等内容的强大模块。最近，我在使用 Nuxt v4 + Nuxt Content v3 重构博客（原为 Hexo）时，遇到了一个棘手的问题：v3 版本的默认查询 API 并未直接提供对数组字段进行“包含”（$contains）操作的支持。例如，这是我的正在写的这篇博客的 Front Matter：--- title: Nuxt Content v3 中数组字段的筛选困境 date: 2025-10-20 21:52:59 sticky: tags: - Nuxt - Nuxt Content - JavaScript --- 我的目标是创建一个 Tag 页面，列出所有包含特定 Tag（例如 'Nuxt'）的文章。v2 的便捷与 v3 的限制在 Nuxt Content v2 中，数据基于文件系统存储，查询方式...
后 OCSP 时代，浏览器如何应对证书吊销新挑战2023 年 8 月，CA/Browser Forum 通过了一项投票——不再强制要求 Let’s Encrypt 等公开信任的 CA 设立 OCSP Server2024 年 7 月，Let's Encrypt 发布博客，披露其计划关闭 OCSP Server同年 12 月，Let's Encrypt 发布其关闭 OCSP Server 的时间计划表，大致情况如下：2025 年 1 月 30 日 - Let’s Encrypt 不再接受新的包含 OCSP Must-Staple 扩展的证书签发请求，除非你的账号先前申请过此类证书2025 年 5 月 7 日 - Let's Encrypt 新签发的证书将加入 CRL URLs，不再包含 OCSP URLs，并且所有新的包含 OCSP Must-Staple 扩展的证书签发请求都将被拒绝2025 年 8 月 6 日 - Let's Encr...
初试 Github Action Self-hosted Runner，想说爱你不容易在今年八月的时候，我这边所在的一个 Github Organization 在私有项目开发阶段频繁触发 CI，耗尽了 Github 为免费计划 (Free Plan) 提供的每月 2000 分钟 Action 额度（所有私有仓库共享，公有仓库不计）。大致看了下，CI 流设置得是合理的，那么就要另寻他法看看有没有办法去提供更宽裕的资源，因此也就盯上了文章标题中所提到的 Github Action Self-hosted Runner。对于这个 Self-hosted Runner，与 Github 官方提供的 runner 相比，主要有以下几个优势针对私有仓库，拥有无限制的 Action 运行时长可以自行搭配更强大的硬件计算能力和内存可以接入内网环境，方便与内网/局域网设备通信配置安装由于不清楚需要的网络环境，我这次测试直接选用了一台闲置的香港 vps，4核4G + 80G 硬盘 + 1Gb...
DNS 解析延迟毁了我的图床优化去年夏天，我花了不少时间搭建博客图床，核心目标是分地区解析 DNS，让国内外访客都能快速加载图片。技术方案看起来完美无缺，直到最近群友反馈首次访问时图片加载很慢，我才发现问题所在。955 毫秒的 DNS 解析时长！ 这个数字让我大吃一惊。访客点开博客后，光是确定图片服务器位置就要等将近一秒，这完全抵消了 CDN 优化的效果。为什么之前没发现？主要是 DNS 缓存的"功劳"。它会为后续访问记住解析结果，让我的本地测试和复访测试看起来都很正常。直到用户反馈，结合最近准备秋招复习的 DNS 解析流程（递归查询、权威查询、根域名、顶级域名等），我才定位到问题：首次访问时的 DNS 解析延迟。DNS 解析流程分析让我们看看访客访问 static.031130.xyz 时，DNS 是如何工作的：sequenceDiagram participant User as 访客浏览器 participant ...
Vue Markdown 渲染优化实战(下)：告别 DOM 操作，拥抱 AST 与函数式渲染上回回顾：当 morphdom 遇上 Vue在上一篇文章中，我们经历了一场 Markdown 渲染的性能优化之旅。从最原始的 v-html 全量刷新，到按块更新，最终我们请出了 morphdom 这个“终极武器”。它通过直接比对和操作真实 DOM，以最小的代价更新视图，完美解决了实时渲染中的性能瓶颈和交互状态丢失问题。然而，一个根本性问题始终存在：在 Vue 的地盘里，绕过 Vue 的虚拟 DOM (Virtual DOM) 和 Diff 算法，直接用一个第三方库去“动刀”真实 DOM，总感觉有些“旁门左道”。这就像在一个精密的自动化工厂里，引入了一个老师傅拿着锤子和扳手进行手动修补。虽然活干得漂亮，但总觉得破坏了原有的工作流，不够“Vue”。那么，有没有一种更优雅、更“原生”的方式，让我们既能享受精准更新的快感，又能完全融入 Vue 的生态体系呢？带着这个问题，我询问了前端群里的伙伴们。...
Vue Markdown 渲染优化实战(上)：从暴力刷新、分块更新到 Morphdom 的华丽变身需求背景在最近接手的 AI 需求中，需要实现一个类似 ChatGPT 的对话交互界面。其核心流程是：后端通过 SSE（Server-Sent Events）协议，持续地将 AI 生成的 Markdown 格式文本片段推送到前端。前端负责动态接收并拼接这些 Markdown 片段，最终将拼接完成的 Markdown 文本实时渲染并显示在用户界面上。Markdown 渲染并不是什么罕见的需求，尤其是在 LLM 相关落地产品满天飞的当下。不同于 React 生态拥有一个 14k+ star 的著名第三方库——react-markdown，Vue 这边似乎暂时还没有一个仍在活跃维护的、star 数量不低（起码得 2k+ 吧？）的 markdown 渲染库。cloudacy/vue-markdown-render 最后一次发版在一年前，但截止本文写作时间只有 103 个 star；miaolz123...
node-sass 迁移至 dart-sass 踩坑实录更新目标node-sass -> sass ( dart-sass )减少影响面，非必要不更新其他依赖的版本在前两条基础上，看看能否提升 node.js 的版本抛弃 node-sass 的理由node-sass 已经停止维护，dart-sass 是 sass 官方主推的继任者node-sass 在 windows 下的安装非常麻烦，npm 安装时需要开发机上同时装有 python2 和 Microsoft Visual C++在安装 node-sass 时，需要从 Github 拉取资源，在特定网络环境下成功率并不高项目依赖版本现状node@^12vue@^2webpack@^3vue-loader@^14sass-loader@^7.0.3node-sass@^4更新思路node.jswebpack 官方并没有提供 webpack 3 支持的最高 node 版本，且即使 webpack ...
前端中的量子力学——一打开 F12 就消失的 Bug前端「量子态」现象的首次观测这事说来也邪乎，半个月前吃着火锅唱着歌，在工位上嘎嘎写码，发现一个诡异的 bug。作为如假包换的人类程序员，写出 bug 是再正常不过的事情了，但这 bug 邪门就邪门在我一打开 F12 的 DevTools 观察相关的 dom 结构，这 bug 就自动消失了；再把 DevTools 一关，Ctrl + F5 一刷新页面，Bug 又出现了。下面是使用 iframe 引入的 demo这 Bug 给我整得脑瓜子嗡嗡的，我又不是物理学家，写个前端怎么量子力学的观察者效应都给我整出来了（？观测者效应（Observer effect），是指“观测”这种行为对被观测对象造成一定影响的效应。在量子力学实验中，如果要测算一个电子所处的速度，就要用两个光子隔一段时间去撞击这个电子，但第一个光子就已经把这个电子撞飞了，便改变了电子的原有速度，我们便无法测出真正准确的速度（不确定原理...
12345…13