HTML无法实现“最近联系人”功能，需JavaScript结合localStorage存储时间戳并排序；渲染应避免innerHTML全量更新，改用DocumentFragment批量操作；事件绑定推荐委托至父容器并提取data-id。
HTML 本身不能实现“最近联系人”功能——它只是静态结构，需要 JavaScript 维护顺序、存储访问时间、触发更新。所谓“最近联系人列表”，本质是「按最近交互时间排序的联系人缓存」，纯 HTML <ul> 或 <table> 标签连“谁刚被点过”都不知道。
为什么 localStorage + 时间戳是最低成本方案
浏览器端持久化最轻量的选择就是 localStorage，配合每个联系人的 lastAccessed 时间戳字段。不依赖后端、不发请求、兼容所有现代浏览器。
关键点：
-
localStorage只支持字符串，必须用JSON.stringify()存、JSON.parse()取 - 时间戳用
Date.now()（毫秒级），别用new Date().toString()—— 后者难排序且占空间 - 每次点击联系人时，要更新该条目的
lastAccessed并重新保存整个数组
示例片段（简化版）：
立即学习“前端免费学习笔记（深入）”；
function updateRecentContact(id) {
const list = JSON.parse(localStorage.getItem('recentContacts') || '[]');
const now = Date.now();
const existing = list.find(c => c.id === id);
if (existing) {
existing.lastAccessed = now;
} else {
list.push({ id, lastAccessed: now });
}
// 降序排：最新访问在前
list.sort((a, b) => b.lastAccessed - a.lastAccessed);
localStorage.setItem('recentContacts', JSON.stringify(list));
}渲染时怎么避免重复 DOM 操作
直接用 innerHTML 替换整个 <ul id="recent-list"> 最简单，但会丢失焦点、重置滚动位置、触发不必要的重排。更稳妥的做法是只更新差异节点。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- 用
document.createDocumentFragment()批量生成新<li>，最后一次性appendChild - 给每个
<li>加唯一data-id属性，方便后续定位或复用 - 如果列表超过 10 条，建议截断（如只显示最近 5 个），避免无限增长拖慢解析
别写这样的代码：document.getElementById('recent-list').innerHTML += '<li>...</li>' —— 它强制重绘全部子节点，且无法控制插入位置。
点击事件绑定容易漏掉的两个细节
你可能给每个联系人加了 onclick="handleClick('id123')"，但这在动态渲染场景下极易失效或闭包错乱。
正确做法是事件委托 + 数据属性：
- 监听父容器（如
<ul id="recent-list">）的click事件 - 用
event.target.closest('[data-id]')捕获实际点击的<li>或其子元素 - 从
dataset.id提取 ID，再调用updateRecentContact(id)
这样即使列表内容完全重绘，事件逻辑也不用重新绑定，也不会因内联函数产生内存泄漏。
真正麻烦的不是怎么画出列表，而是怎么让“最近”这个语义在页面刷新后依然成立、在多标签页间尽量同步、在用户清缓存时有降级策略——这些都得靠你权衡要不要加 indexedDB 或服务端 session 支撑。纯前端方案，localStorage 就是边界。
