精简选择器能降低dom遍历深度与广度，提升查询性能：优先用id和标签名，避免嵌套多、条件多的选择器；用子选择器>替代后代选择器空格；限制作用域缩小搜索范围；慎用实时htmlcollection。
精简选择器能直接减少浏览器遍历 DOM 树的深度和广度，从而降低查询耗时。这不是“写得短一点”而已，而是让浏览器用更少步骤、更确定的路径命中目标元素。
优先用 ID 和标签名，避开复杂 CSS 选择器
ID 是唯一且索引最快的，getElementById 几乎是常数时间查找；getElementsByTagName 或 querySelector('div') 也比带类名或属性的选择器快得多。而像 document.querySelector('.container .list > li.active[data-id]') 这类嵌套多、条件多的选择器，浏览器需逐层匹配、回溯、过滤，性能明显下降。
- ✅ 推荐：
document.getElementById('header')、document.querySelector('button') - ❌ 避免：
document.querySelector('body > div.container > ul.list > li:nth-child(2n)')
避免通配符和深层后代选择器
div p（空格）是“后代选择器”，会匹配所有嵌套层级中的 p，浏览器必须检查每个 div 下的所有子孙节点；而 div > p（子选择器）只查直接子元素，范围更可控。通配符如 * 或模糊类名（如 [class*="btn"]）也会强制全树扫描。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 用
.nav-item代替ul li a - 用
header nav代替body * nav - 若已知结构，直接写
document.querySelector('nav .logo')比document.querySelectorAll('[data-role="logo"]')更快
限制作用域，缩小搜索范围
不要总从 document 开始查。如果目标元素在某个已知容器内，就用该容器作为起点调用 querySelector：
- ❌
document.querySelector('.price')（全页面搜） - ✅
productCard.querySelector('.price')（只在当前卡片里找） - 这样既减少节点遍历量，又避免跨组件误匹配
慎用 getElementsByXXX 类“实时集合”
getElementsByClassName 返回的是动态 HTMLCollection，每次访问 .length 或索引都会触发实时更新检查，开销高于静态 NodeList。即使语法看似简单，实际性能可能反不如 querySelectorAll。
- ❌
const items = document.getElementsByClassName('item'); for (let i = 0; i - ✅
const items = document.querySelectorAll('.item'); items.forEach(...) - 若必须用
getElementsByXXX，先转成数组：Array.from(items)或[...items]
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
