标签云关键词不“热”的根本原因是权重计算未对齐业务目标：标题词与正文末尾同词价值不同，且停用词未过滤，导致信息量低的词占据高权重。
标签云里的关键词为什么总不“热”？
关键词在标签云里显示冷热不均，根本原因不是样式问题，而是权重计算没对齐业务目标。比如用文章出现次数直接当权重，但标题里的 JavaScript 和正文末尾的同词，价值差很多；又或者没过滤停用词，"the"、"and" 也进了云——结果视觉上全是“热词”，实际没信息量。
- 先做清洗：剔除长度 &）、常见停用词（可用
stopwords库或自建白名单） - 区分位置加权：标题中出现 ×3，
<h2></h2>中 ×2，正文段落 ×1，用正则或 DOM 解析提取更准 - 避免纯频次陷阱：对高频但低区分度的词（如
"web"在技术站泛滥），用 TF-IDF 或简单倒排文档频率压制
如何让 <span></span> 标签云支持响应式缩放？
直接写 font-size: calc(0.8rem + 1vw); 看似能缩放，但关键词长短差异大时，“React” 和 “asynchronous” 在同一行会挤换行，破坏云布局。真正在意的是视觉密度，不是单个字体大小。
- 用 CSS
display: inline-flex替代纯<span></span>流式布局，配合flex-wrap: wrap控制换行边界 - 字体大小改用
clamp()：例如font-size: clamp(0.7rem, 2.5vmin, 1.2rem);，比vw更稳，避免小屏过小、大屏过大 - 关键词之间加
margin-inline-end: 0.4em（不用margin-right），兼容 RTL 语言场景
getKeywordsFromHTML() 函数常踩的 DOM 解析坑
很多人用 textContent 一把抓，结果把脚本注释、<script></script> 里的字符串、甚至 <pre class="brush:php;toolbar:false;"></pre> 代码块全当关键词塞进去。更糟的是，遇到异步加载内容（如 SPA 路由切换后的新文章），函数执行太早，DOM 还没更新。
- 限定解析范围：只取
document.querySelector('article') || document.body，跳过<header></header>、<nav></nav>、<footer></footer> - 排除非文本节点：遍历子节点时，用
node.nodeType === Node.TEXT_NODE过滤，再node.parentElement.tagName排除SCRIPT、STYLE、PRE - 防异步失效：不在
DOMContentLoaded后立刻跑，改用MutationObserver监听article内容变化，或暴露为可重触发的函数
关键词重复合并时，大小写和连字符怎么统一？
"API"、"api"、"Api" 被算作三个词；"state-management" 和 "state management" 也被拆开——这不是 bug，是预处理缺失。浏览器默认不帮你标准化。
- 归一化步骤必须在分词后、计数前：全部转小写（
.toLowerCase()），再用正则.replace(/[-_]+/g, ' ')统一连接符为空格 - 保留有意义的大小写变体？极少需要。除非业务强依赖（如
"iOS"必须大写I和O），那就建映射表：{ 'ios': 'iOS', 'http': 'HTTP' } - 警惕 Unicode 混淆：中文标点、全角空格、零宽空格（
\u200b）会导致看似相同实则不同的“重复词”，用.replace(/[\u2000-\u206F\u2E00-\u2E7F\u3000-\u303F]/g, '')清理
最易被忽略的其实是关键词生命周期管理：生成一次就缓存进 localStorage 没问题，但文章更新后，旧关键词云不会自动刷新——得监听内容变更或加版本戳，否则用户看到的永远是过期热力图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
