弱网与低端硬件下需严格降级：queryselector应慎用并限制选择器长度，fetch必须配abortcontroller超时控制，intersectionobserver需检测兼容性并降级为节流的getboundingclientrect方案。
弱网 + 低端硬件（CPU弱、内存≤2GB、无独立GPU）下，document.querySelector、fetch、IntersectionObserver 这类函数不是不能用，而是必须配合轻量替代方案和严格降级逻辑——否则首屏白屏、滚动卡顿、甚至页面崩溃是常态。
为什么 document.querySelector 在低端 CPU 上要慎用
它比 document.getElementById 多出 CSS 选择器解析、DOM 树遍历、伪类匹配三步开销，在单核 1.2GHz 的旧安卓设备上，查一次 .card-list > .item:last-child 可能卡住主线程 8–12ms，而同场景 document.getElementById('last-item') 稳定在 0.3ms 内。
- 仅当必须依赖 class 或结构关系时才用
querySelector，且 selector 长度控制在 ≤3 个词（如'.btn-primary'可，'main > section:nth-of-type(2) .content p:first-child'不可） - 批量操作前先缓存结果：
const items = document.querySelectorAll('.item');→ 后续用items[0]直接取，避免重复查询 - 旧版 Android WebView（≤75）对
:scope支持不全，el.querySelector(':scope > span')会静默失败，改用el.children[0]更稳
fetch 必须配 AbortController + 超时，否则弱网下无响应
弱网中 fetch 常卡在 pending 状态，既不触发 then 也不进 catch，用户等不到任何反馈。原生 timeout 参数不存在，硬靠 Promise.race 拦截不可靠（无法中断底层请求）。
- 每次调用必须绑定
AbortController：const ctrl = new AbortController(); fetch(url, { signal: ctrl.signal }) - 超时设为
1500ms：实测低于此值易误杀，高于则感知延迟明显 - 连续两次响应耗时 >800ms，主动调用
ctrl.abort()并标记networkStatus = 'slow-2g'，后续请求跳过非关键模块（如推荐、评论） - 服务端返回 206 Partial Content 时，
response.body流式读取需额外判断response.headers.get('Content-Range')，否则低端设备可能因 buffer 溢出卡死
IntersectionObserver 在低端 Android 上的兼容与降级
Android 7–9 的 WebView 对 IntersectionObserver 支持不稳定：触发时机漂移、isIntersecting 假阴性高、rootMargin 计算错误。直接 fallback 到 scroll 事件又极易引发重排抖动。
- 初始化前先检测：
if ('IntersectionObserver' in window && 'isIntersecting' in IntersectionObserverEntry.prototype)，否则走定时getBoundingClientRect()方案 - 降级时用
requestIdleCallback包裹检查逻辑，避免阻塞渲染；每 200ms 最多执行一次，且只查视口内前 5 个目标元素 - 对
loading="lazy"的img，必须显式设置width和height属性，否则降级方案无法预估占位尺寸，导致布局偏移（CLS） - 不要监听
document.scrollingElement，部分低端设备该对象为null，改用window或document.documentElement
关键点：工具链越“精简”，越要补足运行时兜底
用 textContent 替代 innerHTML 是为了防 XSS 和提速，但若后端返回含 <span></span> 的富文本，直接赋值就变纯字符串。这不是函数选错，而是没做格式白名单过滤——真正难的从来不是选哪个 API，而是判断「这个 HTML 片段里，哪些标签允许保留，哪些必须转义」。这种判断没法靠工具自动完成，得在 JS 里写明规则，哪怕只支持 <strong></strong> 和 <br> 两个标签，也得手动实现解析逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
