video.js 在 head 同步加载 首屏白屏 2.3 秒 该挪到哪

文章页引了 video.js 和两套皮肤样式，head 里同步加载，4G 下首屏白屏 2.3 秒，正文要等播放器初始化完才出现。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

if (document.querySelector('video')) {
  const s = document.createElement('script');
  s.src = '/js/video.min.js'; s.defer = true;
  document.head.appendChild(s);
}

播放器脚本 380KB 加两套皮肤样式全部阻塞解析，正文排在后面只能等。只有少数文章带视频，却让所有页面都背这份开销。这一点先确认清楚，后面就不用反复试。

「播放器脚本阻塞首屏」这类改动最怕改一半，回滚脚本先准备好，再动生产。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

改完隔一天再看一次，当场正常不代表能稳住。测试环境和线上的差别，往往就在版本号和那几行被忽略的配置上。

具体做法是，改成检测到 video 标签再按需插入脚本；样式只保留播放器必需的那份 另一份删掉；脚本用 defer 加载 保证顺序又不挡解析。

改完照着核一遍，不带视频的文章首屏 1 秒内出正文，带视频的文章播放器 300ms 内出现。