九月到现在标记了三十多部片子，挑几部院线之外值得找来看的，顺便测试书影音页面的数据同步。

值得补的

1. 《阿尔法》——史前生存题材，摄影极好，solo 观影体验接近纪录片
2. 《挽歌》——老片修复重映，大银幕看是另一回事
3. 《行长：沉默的救世主》——题材冷门但完成度很高

标记与输出的流水线

豆瓣标记 → CF Worker 同步 → 博客「书影音」页面自动更新，全程无人工干预：

标记即发布，这个闭环跑通之后，观影记录就不再是私藏的表格了。

博客文章配图是个长期负担——不是每篇技术笔记都值得配一张设计图。本站的做法是：首图优先，生成式兜底。

阅读剩余部分

Astro 最迷人的地方在于：默认零 JavaScript，但在需要交互的地方又能精准注水。配合视图过渡（View Transitions），页面切换可以达到接近 SPA 的丝滑感。

岛屿架构

传统的 MPA 每次导航都要重新解析全部资源；Astro 的岛屿（Islands）让交互组件独立水合：

---
// 一个交互组件只在进入视口时才加载 JS
import SearchBox from '../components/SearchBox.astro';
---
<SearchBox client:visible />

零依赖的客户端脚本

Astro 的 <script> 标签会被打包、去重并按需加载，用原生 API 就能实现大部分交互：

// 目录高亮：IntersectionObserver 监听标题可见性
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) activate(entry.target.id);
  }
}, { rootMargin: '-15% 0px -70% 0px' });

document.querySelectorAll('.md-body h2[id]').forEach((h) => observer.observe(h));

实测数据

• [x] 首页 LCP 稳定在 0.4s 以内
• [x] 全站 JS 体积 < 30KB gzip
• [ ] 把 TOC 滚动监听换成 CSS scroll driven animations
• [ ] 试试浏览器原生的 View Transition API

性能优化的最高境界不是优化，而是从一开始就不发送多余的代码。

—— 某位前端工程师的碎碎念