20. 安全与性能：XSS、innerHTML、批量渲染

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

用户评论

三、知识点提醒

用户输入不要直接写入 `innerHTML`。
大量 DOM 插入可以先放入 DocumentFragment，再一次性插入。
先写正确，再考虑优化；但安全问题要从一开始避免。

四、练习建议

尝试输入 `<img src=x onerror=alert(1)>` 看 textContent 的安全效果。
增加评论字数限制。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/20-security-performance.js，下面同步展示，方便学习和复制。

// 页面 20：安全渲染与批量插入
const commentInput = document.querySelector('#p20-comment');
const commentList = document.querySelector('#p20-list');
const comments = ['安装效果不错', '颜色很干净'];

function renderComments() {
  commentList.innerHTML = '';
  const fragment = document.createDocumentFragment();

  comments.forEach((comment) => {
    const p = document.createElement('p');
    // 安全：把用户输入作为文本，不作为 HTML 执行
    p.textContent = comment;
    fragment.appendChild(p);
  });

  commentList.appendChild(fragment);
}

function addComment() {
  const value = commentInput.value.trim();
  if (!value) return;
  comments.push(value);
  commentInput.value = '';
  renderComments();
}

document.querySelector('#p20-add').addEventListener('click', addComment);
renderComments();

// 危险示例：不要把用户输入直接拼到 innerHTML 中
// commentList.innerHTML += `<p>${commentInput.value}</p>`;