日志 002：Zero-JS 客户端交互与印刷级排版

剔除水合开销与冗余运行时

现代前端生态中，许多站点仅仅为了实现一个菜单展开或复制代码块，就打包并下载了几十甚至上百 KB 的组件库运行时。通过坚持使用原生 TypeScript DOM API，我们消除了客户端水合抖动，确保了 Lighthouse 性能与 FCP 的极限指标。

原生剪贴板复制实现

以下是站内代码块一键复制按钮的注入与状态切换实现逻辑：

function attachCopyButtons(): void {
  const preBlocks = document.querySelectorAll<HTMLElement>('.prose pre');
  preBlocks.forEach(pre => {
    const button = document.createElement('button');
    button.className = 'code-copy-btn';
    button.textContent = '复制';

    button.addEventListener('click', async () => {
      const code = pre.querySelector('code');
      const text = (code ? code.textContent : pre.textContent) || '';
      await navigator.clipboard.writeText(text);
      button.textContent = '已复制';
      setTimeout(() => (button.textContent = '复制'), 2000);
    });

    pre.appendChild(button);
  });
}

[!TIP] 文章侧边目录（TOC）使用 IntersectionObserver 替代传统的 scroll 监听事件，即使在低功耗移动端设备上也能保证持续 60fps 丝滑滑动。

纯黑白灰阶对比度体系

排版系统构建在纯黑白与冷锌灰的阶梯之上：

底色：纯白 #FFFFFF 纸质画卷，搭配微浅灰 #FAFAFA 卡片衬托。
文字：正文使用高深墨黑 #09090B，辅助元数据与标签使用 #71717A。
网格界线：1px 的精细边框（#E4E4E7）构建秩序感极强的版式分界。

这种排版保证了极高的文字可读性，消除了长时间阅读密集代码和技术文字时的视觉疲劳。