Resource Hints预连接与DNS预取治理（preconnect/dns-prefetch）最佳实践

背景与价值Resource Hints可优化连接性能，但需要白名单与入口治理避免风险。统一规范白名单：仅对受控域开启 `preconnect/dns-prefetch`。入口治理：在关键入口页面按需启用并审计。移除泛化：避免对所有外域普遍启用。核心实现标签生成function makeLink(rel: 'preconnect'|'dns-prefetch', href: string): HTMLLinkElement | null {

try {

const u = new URL(href)

const allow = new Set(['https://cdn.example.com','https://assets.example.com'])

if (!allow.has(u.origin)) return null

const el = document.createElement('link')

el.rel = rel

el.href = u.origin

if (rel === 'preconnect') el.crossOrigin = 'anonymous'

document.head.appendChild(el)

return el

} catch { return null }

}

落地建议在首屏与关键路径对白名单域执行预连接与DNS预取并审计效果。验证清单是否仅对白名单域生成link标签；是否按入口页面启用。