JavaScript是让网页活起来的运行时引擎；onclick仅支持单次绑定且易失this，addEventListener支持多次绑定、阶段控制和移除；fetch需手动处理凭证、错误和进度；DOM操作应避免innerHTML滥用和强制重排。
JavaScript 不是一种“网页装饰语言”，而是让网页真正活起来的运行时引擎——它直接操作 DOM、响应用户行为、与服务器异步通信，把静态 HTML 页面变成可交互的应用。
为什么 onclick 和 addEventListener 行为不一样
很多人写 onclick="doSomething()" 后发现事件不触发，或多次绑定被覆盖。根本原因是：内联事件处理器（onclick 属性）只能存一个函数，且执行上下文容易丢失 this；而 addEventListener 支持多次绑定、精确控制捕获/冒泡阶段、可移除。
- 永远优先用
addEventListener，尤其在模块化或动态插入节点时 -
onclick仅适合极简原型或服务端渲染后一次性初始化 - 注意：
addEventListener绑定的函数若用箭头函数，会丢失原生事件对象的this指向（应指向触发元素），建议用普通函数或显式传参
fetch() 替代 XMLHttpRequest 的实际代价
fetch() 看似更简洁，但默认不带 cookie、不自动 reject 网络错误（如 404、500）、没有进度回调——这些不是“缺陷”，而是设计取舍：它把控制权交还给开发者。
- 要发带凭证的请求，必须显式加
{ credentials: 'include' } -
fetch()只在网络断开或请求被阻止时 reject；HTTP 错误状态（如 401）仍 resolve，需手动检查response.ok或response.status - 上传大文件需要监听
upload.onprogress？还得回退到XMLHttpRequest，fetch()不提供底层流控制
DOM 操作慢？问题常出在 innerHTML 和重排上
直接拼接字符串再赋值给 innerHTML 看似快，但浏览器要重新解析 HTML、重建子树、触发样式计算和布局——尤其在循环中反复操作，性能雪崩。
立即学习“Java免费学习笔记（深入）”；
- 批量更新优先用
DocumentFragment或createElement+appendChild - 避免在循环里读取
offsetHeight、getBoundingClientRect()这类触发重排的属性 -
innerHTML = ''清空节点比while (el.firstChild) el.removeChild(el.firstChild)快，但会丢失已绑定的事件监听器（因为整个子树被销毁）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
fragment.appendChild(item);
}
document.getElementById('list').appendChild(fragment);
JavaScript 改变交互的本质，不是“加动画”或“弹提示框”，而是把用户动作、数据状态、界面呈现三者实时闭环。这个闭环里最容易被忽略的，是事件清理（比如 removeEventListener 没配对）、内存泄漏（闭包引用 DOM 节点）、以及把异步逻辑当成同步来推演。
