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、重建子树、触发样式计算和布局——尤其在循环中反复操作，性能雪崩。

• 批量更新优先用 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 节点）、以及把异步逻辑当成同步来推演。