用HTML+JS渲染实时好友挑战排行榜需用数组存储好友数据，JavaScript排序（胜率降序）、防XSS转义、缓存DOM元素、批量更新Fragment，并兼容IE11的sort写法。
怎么用 HTML + JS 渲染实时好友挑战排行榜
纯 HTML 无法动态排序或计算胜率，必须配合 JavaScript。核心是把好友数据用 Array 存好，再用 sort() 按胜率降序排，最后用 innerHTML 或 insertAdjacentHTML() 插入表格行。
- 别直接拼接字符串塞进
innerHTML，容易 XSS；如果数据来自后端，先用textContent设文本，或对字段做简单转义（比如str.replace(/&/g, "&")） - 胜率建议统一存为小数（如
0.75），不是百分比字符串（如"75%"），否则sort()会按字典序错乱 - 表格每行用
data-id属性绑定好友唯一标识，方便后续点击“发起新挑战”时取值
胜率怎么算才不翻车：除零、未比赛、小数精度
胜率 = wins / (wins + losses)，但真实场景里常有分母为 0（没打过任何局）或只有平局（HTML 挑战通常不计平局，但数据字段可能残留）。
- 分母为 0 时，返回
0或NaN都不好展示，建议统一设为0，并在 UI 上显示“暂无战绩”而不是 “0%” - 避免用
toFixed(1)直接截小数——它会四舍五入且返回字符串，导致后续排序失效；应先用Math.round(winRate * 10) / 10得数字，再转显示用的字符串 - 如果后端返回的是整数胜场/负场，前端不要自己拼百分比字符串，留到渲染时再算，避免缓存或重复计算
DOM 更新卡顿？别在循环里反复查 document.getElementById
排行榜每秒可能刷新一次（比如 WebSocket 推送新结果），如果每次都在 for 循环里调用 document.querySelector(".rank-list")，性能会明显下降。
- 把容器元素缓存成变量：
const listEl = document.querySelector(".rank-list")，只查一次 - 批量更新：先用
document.createDocumentFragment()组装所有<tr>，再一次性 append 到列表，比逐个 <code>appendChild快得多 - 如果用
innerHTML = htmlString，注意老浏览器中事件监听器会丢失，已绑定的“挑战按钮”点击事件需重新绑定或改用事件委托（listEl.addEventListener("click", e => { if (e.target.matches("[data-action='challenge']")) ... })） - 改用传统函数：
friends.sort(function(a, b) { return (b.winRate || 0) - (a.winRate || 0); }) -
|| 0是必须的——IE11 对NaN - 0返回NaN，而sort遇到NaN会打乱顺序 - 如果项目已放弃 IE，可忽略这点；但若仍需兼容，连
const、let都得换成var，并避免使用includes()、find()等新 API
IE11 兼容不了 Array.prototype.sort 的箭头函数写法？
像 friends.sort((a, b) => b.winRate - a.winRate) 在 IE11 会报语法错误，因为不支持箭头函数，且 Number.NaN 排序行为也不一致。
立即学习“前端免费学习笔记（深入）”；
胜率统计本身逻辑简单，真正花时间的是边界处理和 DOM 更新节奏——比如用户刚赢一局，排行榜还没刷新，他点“再挑战”按钮时，得确保拿到的是最新胜率，而不是页面上还显示着旧数据。这类状态同步问题，光靠 HTML 和 CSS 压根解决不了。
