JavaScript在DOMContentLoaded时获取CSS :target伪类元素的兼容问题咨询

规范从来没有对“计算并标记文档hash目标、更新:target状态”这个操作的执行时序做强制卡死的要求，所以两边的实现都不算违规：

• CSS选择器规范只定义了:target的匹配逻辑——当元素是当前URL hash指向的文档节点时，就会匹配这个伪类
• 但具体什么时候把这个状态标记上去，完全是浏览器内部的任务调度逻辑：
  • Firefox、IE11会在触发DOMContentLoaded事件之前，先把hash目标找出来、把:target状态标记好，所以在DOMContentLoaded的回调里能查到
  • Chrome、Opera会把这个流程放在DOMContentLoaded事件所有回调执行完之后的内部任务里跑，你在回调执行的时候，浏览器还没来得及把:target状态更新，自然查出来是null

简单说就是这个时机根本没有跨浏览器的一致性：

• 既然不同浏览器的状态更新时序差了好几个执行队列，你在DOMContentLoaded里查结果就必然有的对有的错
• 你现在用setTimeout打补丁的方式之所以不稳，是因为宏任务的执行顺序是不确定的——你写个100ms延迟，碰到性能差的老设备、网络卡资源加载慢的场景，这个延迟可能还没到浏览器完成:target标记的时间点，照样返回null。

根本不需要赌浏览器的内部调度逻辑，两个方案覆盖所有场景：

• 【零时序依赖、最稳的方案】直接读hash匹配DOM元素
  页面刚加载的时候，window.location.hash是同步可读的，和浏览器什么时候标记:target完全没关系：

  function getInitialTarget() {
    const hash = window.location.hash.slice(1);
    if (!hash) return null;
    // 优先走id匹配，特殊字符用CSS.escape转义避免选择器报错
    return document.getElementById(hash) ?? 
           document.querySelector(`[id="${CSS.escape(hash)}"]`);
  }
  

  这个方法在DOMContentLoaded阶段调用就行，拿到的元素和浏览器最终标记为:target的元素完全一模一样，没有任何跨浏览器差异。
• 【需要感知target状态变化的场景】不要绑DOMContentLoaded
  1. 如果你需要监听后续用户点击锚点带来的target变更，直接绑window上的hashchange事件就行——这个事件是浏览器更新完:target状态、滚完页面之后才会触发的，回调里查100%准
  2. 初始加载要查:target的话，把逻辑扔到requestAnimationFrame的回调里，这个时机是浏览器跑完样式计算、布局流程之后才会执行的，那时候肯定已经把:target状态标记完了，比写多久的setTimeout都靠谱。

内容的提问来源于stack exchange，提问作者Baptistou