很多人第一眼看到“Word-finder / anagram solver web app”这类项目会觉得这不过是一个查单词的小工具复杂度不高技术含量有限。但如果把场景换到“mobile browsers”事情就变得不太一样了。移动端浏览器意味着虚拟键盘会遮挡输入框意味着视口尺寸和桌面端完全不同意味着每次输入都可能触发输入法组合态也意味着用户可能随时断网。真正让这类项目值得写一篇文章的不是“能不能找到单词”而是“在移动端这种受限环境下如何把查找、匹配、交互和离线缓存做得足够顺滑”。这篇文章不会只给你贴一段代码而是会从算法选型、移动端交互设计、PWA 离线策略三个层面拆解一个可运行的 word-finder / anagram solver 移动端 Web 应用。读完你可以直接用这套思路构建自己的版本也能理解为什么很多 Show HN 上的小工具第一版会优先选择移动端 Web 而不是原生 App。1. 这篇文章真正要解决的问题先明确一个判断这类工具的技术难点从来不在“查字典”而在“在移动浏览器上把字典查询做成一个让人愿意用的工具”。如果你尝试过在手机上打开一个普通的网页工具大概率遇到过这些问题点击输入框后虚拟键盘弹起把结果列表完全盖住。输入过程中页面频繁重排滚动位置被不断重置。输入字母时中文输入法或系统自动纠错干扰了输入内容。网络稍微不好字典迟迟加载不出来。词典文件很大移动端内存直接告急。这些才是移动端 Web 开发里真正值得记录的问题。桌面端跑一个巨大的单词列表几乎没有压力移动端却要面对 CPU、内存、键盘和视口的综合限制。更关键的是word-finder 和 anagram solver 这类工具的用户场景非常“移动”坐地铁时想找一个单词、和朋友玩文字游戏时想验证某个字母组合。他们不会坐下来打开电脑再查。所以这篇文章要解决的问题是如何用纯前端技术在移动浏览器上实现一个加载快、查询不卡、离线可用的字母查词工具。它适合前端初学者理解算法和交互设计也适合做过 Web 工具但没认真优化过移动端体验的开发者。2. 核心概念与算法原理2.1 word-finder 和 anagram solver 的区别这两个概念容易混淆先用一句话区分word-finder给你一组字母比如a c t从字典中找出所有能用这些字母组成的单词例如cat、act。它不要求用完全部字母单词长度可以小于等于输入字母数。anagram solver给你一个完整的单词或短语比如listen找出所有由相同字母构成的不同排列例如silent、enlist。它要求字母使用完全一致只是顺序不同。如果用一个数学类比word-finder 是从“字母集合”中取子集去匹配字典anagram solver 是在“字母多重集合”下寻找完全相同的多重集组合。两者共用同一个字典匹配基础判断一个候选单词能否由输入字母构成。这也是整个应用的核心算法问题。2.2 字典匹配的两种常见实现假设已经拿到了一个单词列表比如常见的words.txt每行一个单词。接下来要回答的问题是给定输入字母哪些候选词是合法的方案一排序比较法把每个单词的字母排序后作为签名查询时也把输入字母排序后比较。输入act - 排序后 act 字典cat - 排序后 act匹配 字典car - 排序后 acr不匹配这种方法实现简单时间复杂度主要花在单词排序上。单词长度为 L字典大小为 N总复杂度大约为 O(N * L log L)。方案二频率数组法字母只有 26 个可以给每个单词生成一个长度为 26 的数组记录每个字母出现的次数。输入a:1, c:1, t:1 字典cat - a:1, c:1, t:1匹配 字典car - a:1, c:1, r:1t 不满足不匹配比较时只需要遍历 26 个位置看候选单词的每个字母计数是否都不超过输入字母的计数。总复杂度约为 O(N * L)比排序法更适合移动端。两种方案都能用。当字典只有几千个词时排序比较法完全够用当字典有几十万词时频率数组法的优势会更明显。2.3 anagram 求解的进阶问题anagram solver 还有一种更“重”的玩法不直接在字典里找完全相同字母的单词而是先把输入字母的所有排列组合生成出来再去字典里查。这种做法的计算量会爆炸式增长因为 8 个字母的排列有 40320 种10 个字母就是 3628800 种。在移动端浏览器上这样做非常危险。更稳妥的做法是先缩小候选集再逐词匹配。先用长度过滤掉明显不可能的单词再对剩余候选词做签名匹配。这样既不会漏掉结果又能控制计算量。2.4 核心数据结构签名索引无论使用哪种算法都可以考虑在页面加载后预处理一份“签名索引”而不是每次查询都重新遍历整个字典。const dictionaryIndex { length: { 3: [{ word: cat, sig: a1c1t1 }, { word: act, sig: a1c1t1 }], 4: [...] } };这样当用户输入 3 个字母时只需要在长度为 3 的分组中查找。再叠加频率数组比较实际查询耗时可以控制在几毫秒内。3. 为什么选移动端 Web产品与技术形态的判断从产品形态上看这类小工具选择移动端 Web 而不是原生 App 是更务实的判断。原因可以归结为四点无需安装用户通过搜索或链接直接打开用完即走。对“临时查一个单词”的场景安装 App 的摩擦感太重。跨平台iOS 和 Android 共用一套代码不涉及双端开发和审核。可被搜索引擎收录用户搜索“anagram solver”时Web 页面有天然的内容分发优势。现代浏览器能力足够Service Worker 可以缓存字典和页面离线也能用IndexedDB 可以存储大数据量的词典Web App Manifest 可以支持“添加到主屏幕”。当然移动端 Web 也有自己的代价。虚拟键盘的弹出会触发视口变化浏览器的滚动行为在不同系统上表现不一致移动端 CPU 在处理大词库时比桌面端慢一个量级。这些代价需要在前端架构设计阶段就考虑到而不是等上线后再修。这里想强调一个很多人忽视的事实现代移动浏览器的能力已经被严重低估。很多人仍然默认“工具类应用必须做成 App”但实际上一套纯前端方案已经能覆盖大多数文本工具场景。选择移动端 Web 不是退而求其次而是在“开发成本、分发效率、用户体验”三者之间做出的理性取舍。4. 环境准备与前置条件这个项目不需要复杂的工程化环境。技术栈是原生 HTML、CSS、JavaScript用 ES6 语法不依赖任何构建工具。建议环境如下操作系统Windows / macOS / Linux 均可。浏览器推荐用 Chrome 的 DevTools 设备模拟模式调试移动端效果真机测试准备一台手机。本地服务器推荐使用python3 -m http.server 8080或npx serve。如果不用本地服务器直接用file://打开页面也基本能运行但 Service Worker 必须在 HTTPS 或 localhost 下才能注册所以建议用本地服务器。词典数据准备一份开源英文单词列表常见的是/usr/share/dict/wordsmacOS/Linux 自带或各种开源词典项目。最终把单词列表转换成 JSON 格式放在项目里即可。版本方面本文不依赖具体框架版本重点演示通用实现思路。如果你使用 Node.js 的npx serveNode 版本建议使用较新的 LTS 版本。目录结构规划如下word-finder/ ├── index.html ├── style.css ├── script.js ├── words.json ├── manifest.webmanifest └── sw.js5. 核心流程拆解5.1 字典准备从词表到 JSON原始词表可能是纯文本一行一个单词。直接加载整个文本在移动端也不慢但为了后续方便筛选建议在构建阶段做一次预处理全部转为小写、去掉特殊字符、按长度分组并生成每个单词的字母签名。伪代码如下# 示例命令用脚本把 words.txt 转成 words.json python3 -c import json words [w.strip().lower() for w in open(words.txt) if w.strip().isalpha()] words sorted(set(words)) json.dump(words, open(words.json, w)) 这里不强制要求用脚本小型词表也可以在页面加载时处理。但如果词表很大建议提前处理减少移动端首屏计算。5.2 频率数组签名函数核心函数是getSignature。它把一个单词转换为长度为 26 的数组。function getSignature(word) { const sig new Array(26).fill(0); for (let i 0; i word.length; i) { const code word.charCodeAt(i); if (code 97 code 122) { sig[code - 97]; } } return sig; }这个函数本身很简单但它是整个匹配逻辑的基础。注意输入需要先转小写否则charCodeAt会跑到大写字母区间。5.3 候选词过滤与匹配拿到用户输入后先转小写、过滤非字母字符再生成输入签名。然后遍历字典中的候选词用candidateSignature[i] inputSignature[i]判断是否匹配。之所以要约束“候选词不能破坏输入字母顺序之外的限制”是因为 word-finder 允许字母不全部使用。这意味着候选单词中的每个字母计数都必须小于等于输入字母计数。5.4 移动端交互处理这一块是移动端 Web 最容易踩坑的地方。使用input事件而不是keyup才能在移动端输入法组合态下拿到最新值。输入内容必须过滤非字母字符否则中文输入法的拼音会混进查询。结果列表要放在输入区下方并设置合适的最大高度让虚拟键盘弹出时仍然能看到部分结果。可以给输入框设置inputmodetext和autocompleteoff减少系统自动补全的干扰。5.5 Service Worker 离线缓存工具类应用非常值得做离线缓存。Service Worker 在首次访问后缓存页面、样式、脚本和字典文件。当用户第二次打开时即使没有网络也能使用。需要注意缓存策略字典文件很大建议使用cache-first页面 HTML 更新频繁建议每次网络请求时验证更新。6. 完整示例代码实现下面给出一个完整可运行的最小版本。为了节省篇幅范例词库只放少量单词实际使用时替换成完整的words.json。6.1 index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover titleWord Finder - Anagram Solver/title meta namedescription contentA mobile-friendly word finder and anagram solver. Enter letters and find valid words instantly. link relmanifest hrefmanifest.webmanifest link relstylesheet hrefstyle.css /head body main classapp h1Word Finder / Anagram Solver/h1 input typetext idqueryInput inputmodetext autocompleteoff autocorrectoff autocapitalizeoff spellcheckfalse placeholderEnter letters, e.g. act / button idsolveBtnFind Words/button div idstatus classstatus/div ul idresults classresults/ul /main script srcscript.js/script /body /html这里的关键是input上的几个属性autocompleteoff、autocorrectoff、autocapitalizeoff、spellcheckfalse它们能减少移动端输入框的系统干扰。6.2 style.css* { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; background: #f5f5f7; color: #1d1d1f; min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } .app { max-width: 640px; margin: 0 auto; padding: 16px; } h1 { font-size: 1.5rem; margin-bottom: 16px; } input[typetext] { width: 100%; font-size: 1.25rem; padding: 12px 14px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; margin-bottom: 12px; outline: none; } input[typetext]:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); } button { width: 100%; font-size: 1.1rem; padding: 12px; background: #007aff; color: #fff; border: none; border-radius: 12px; cursor: pointer; margin-bottom: 12px; } button:active { opacity: 0.8; } .status { margin-bottom: 12px; font-size: 0.9rem; color: #86868b; } .results { list-style: none; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .results li { background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }在移动端要注意两个细节min-height: 100dvh是为了适配 iOS Safari 的视口高度padding: env(safe-area-inset-*)是为了避开刘海屏区域。6.3 script.jsconst queryInput document.getElementById(queryInput); const solveBtn document.getElementById(solveBtn); const statusEl document.getElementById(status); const resultsEl document.getElementById(results); let dictionary []; function getSignature(word) { const sig new Array(26).fill(0); for (let i 0; i word.length; i) { const code word.charCodeAt(i); if (code 97 code 122) { sig[code - 97]; } } return sig; } function signatureToString(sig) { return sig.join(,); } function canFormWord(inputSig, wordSig) { for (let i 0; i 26; i) { if (wordSig[i] inputSig[i]) return false; } return true; } function filterWords(input) { const clean input.toLowerCase().replace(/[^a-z]/g, ); const inputSig getSignature(clean); const words []; for (const word of dictionary) { const wordSig getSignature(word); if (canFormWord(inputSig, wordSig)) { words.push(word); } } return words.sort((a, b) b.length - a.length); } function findAnagrams(input) { const clean input.toLowerCase().replace(/[^a-z]/g, ); const inputSigStr signatureToString(getSignature(clean)); return dictionary.filter(word { const wordSigStr signatureToString(getSignature(word)); return wordSigStr inputSigStr; }); } function renderResults(words) { resultsEl.innerHTML ; if (words.length 0) { statusEl.textContent No words found.; return; } statusEl.textContent ${words.length} words found.; for (const word of words.slice(0, 100)) { const li document.createElement(li); li.textContent word; resultsEl.appendChild(li); } } function handleSolve() { const query queryInput.value; const clean query.toLowerCase().replace(/[^a-z]/g, ); if (!clean) { statusEl.textContent Please enter letters.; resultsEl.innerHTML ; return; } const words filterWords(clean); const anagrams findAnagrams(clean); if (anagrams.length 0) { statusEl.textContent Anagrams: ${anagrams.join(, )}. Total words: ${words.length}.; } else { statusEl.textContent ${words.length} words found.; } renderResults(words); } async function loadDictionary() { const res await fetch(words.json); dictionary await res.json(); statusEl.textContent Dictionary loaded: ${dictionary.length} words.; } if (serviceWorker in navigator) { navigator.serviceWorker.register(sw.js); } solveBtn.addEventListener(click, handleSolve); queryInput.addEventListener(input, () { if (queryInput.value.length 0) { handleSolve(); } }); loadDictionary();这里的设计思路是filterWords输出所有能由输入字母组成的单词findAnagrams单独找出与原输入字母完全相同的排列。两者可以共用一套频率数组逻辑但处理逻辑不同。6.4 sw.jsconst CACHE_NAME word-finder-v1; const ASSETS [ ./, ./index.html, ./style.css, ./script.js, ./words.json, ./manifest.webmanifest ]; self.addEventListener(install, event { event.waitUntil( caches.open(CACHE_NAME).then(cache cache.addAll(ASSETS)) ); self.skipWaiting(); }); self.addEventListener(activate, event { event.waitUntil( caches.keys().then(keys Promise.all(keys.filter(key key ! CACHE_NAME).map(key caches.delete(key))) ) ); self.clients.claim(); }); self.addEventListener(fetch, event { event.respondWith( caches.match(event.request).then(cached { return cached || fetch(event.request).then(response { const clone response.clone(); caches.open(CACHE_NAME).then(cache cache.put(event.request, clone)); return response; }); }) ); });6.5 manifest.webmanifest{ name: Word Finder, short_name: WordFinder, start_url: ./, display: standalone, background_color: #f5f5f7, theme_color: #007aff, icons: [ { src: icon.png, sizes: 192x192, type: image/png } ] }6.6 words.json 示例[act, cat, car, arc, listen, silent, enlist, tac]6.7 本地运行命令在项目根目录执行python3 -m http.server 8080然后打开浏览器访问http://localhost:8080如果是 Windows 系统没有 Python可以用 Node.jsnpx serve -l 80807. 运行效果与验证方法7.1 基本查询验证在输入框中输入act预期结果状态栏显示字典加载成功。结果列表按长度降序排列包含act、cat、tac。Anagram 提示显示tac、act、cat等与act字母完全相同的词。7.2 anagram 验证输入listen预期结果结果列表包含listen、silent、enlist。Anagram 提示面板显示silent、enlist、listen。7.3 移动端模拟验证打开 Chrome DevTools切换到设备模拟模式选择一台 iPhone 或 Android 设备。重点检查以下三点点击输入框时虚拟键盘弹出后结果列表是否仍然可以滚动。输入非英文字符时是否会被过滤掉。切换到低速网络模式首次访问后断开网络再次刷新页面是否仍能打开并完成查询。7.4 性能验证在浏览器控制台手动运行以下代码检查耗时console.time(find); const result filterWords(abcdefghij); console.timeEnd(find); console.log(result.length);在几千个词的字典上单次查询应该在 10ms 以内。如果词典很大且查询速度明显变慢优先检查是否在每次查询时都重新计算了所有单词的签名。更高效的做法是把签名提前计算好并缓存。7.5 失败排查顺序如果页面白屏或按钮无响应按以下顺序排查打开浏览器控制台看是否有 JS 报错。检查 Network 面板确认words.json是否成功加载。检查 Application 面板确认 Service Worker 是否注册成功。确认是否使用了本地服务器而不是直接双击打开file://页面。8. 常见问题与排查思路问题现象可能原因排查方式解决方案输入字母后无任何结果词典未加载完成查看 Network 面板中 words.json 请求状态等待加载完成后再查询或提前在页面显示加载状态中文输入法的拼音字母混入查询未过滤非英文字符在输入事件中打印原始值使用正则过滤/[^a-z]/g并在输入事件中置空非法字符移动端虚拟键盘弹出后结果被遮挡视口高度使用100vh未适配动态视口在真机或设备模拟中检查布局使用100dvh或window.visualViewport调整高度页面离线刷新后白屏Service Worker 未缓存完整资源查看 Application Service Workers 中缓存列表检查sw.js缓存列表是否包含所有文件缓存版本号是否更新查询大词库时卡顿每次查询重复计算签名在filterWords中打印耗时构建时预计算签名索引查询时只比较签名iOS Safari 点击输入框后页面缩放viewport 缺少widthdevice-width检查 meta viewport确认 viewport 设置为widthdevice-width, initial-scale1.0结果列表滚动不流畅未设置惯性滚动样式真机测试加-webkit-overflow-scrolling: touch添加到主屏幕后没有应用图标manifest 图标缺失或格式错误检查 manifest icons 配置提供 192x192 和 512x512 的 PNG 图标9. 最佳实践与后续优化方向9.1 字典瘦身与构建策略不要直接把几十 MB 的原始词典文件放到前端。建议构建时只保留纯字母单词过滤包含数字、连字符、特殊符号的条目。这样可以显著减小 JSON 体积和移动端解析时间。对于更大的词典可以考虑按单词长度拆分成多个文件例如words_2.json、words_3.json。用户输入 3 个字母时只加载长度为 2 到 3 的词表。词表文件也可以布在 CDN用 HTTP 缓存控制减少重复请求。9.2 查询性能优化除了在构建时预计算频率签名还可以用以下方式提升性能按首字母建立索引用户输入cat时只需要查询首字母为c、a、t候选词分组而不是遍历整个字典。按长度建立索引输入 3 个字母时只查询长度为 1 到 3 的单词。对高频查询做缓存用户重复输入相同字母组合时直接返回上一次结果。9.3 移动端体验细节这类工具的核心使用场景是短时间、高频率的查询。因此要注意输入框自动聚焦并不总是好主意因为移动端弹出键盘会打断阅读。查询结果不要一次性渲染全部尤其是大词库下先渲染前 100 条并提示“还有 N 条结果”。添加“清空”按钮可以显著提升移动端操作效率。避免在输入过程中频繁操作 DOM渲染逻辑可以加上简单的防抖。9.4 离线策略与更新机制Service Worker 缓存字典之后用户在离线状态也可以正常使用。但需要注意词库更新后用户拿不到新版本的问题。建议在activate事件中清理旧缓存并把缓存名加上版本号。正式的 PWA 发布还需要注意 HTTPS 要求。Service Worker 只在 secure context 下生效线上部署必须启用 HTTPS。开发阶段 localhost 不受此限制。9.5 搜索引擎收录与页面结构如果希望这个页面被搜索引擎收录需要为页面提供合理的语义化 HTML在 title 和 meta description 中包含核心关键词避免把所有内容都塞进 JavaScript 动态渲染。模板渲染对爬虫相对友好但纯前端 fetch 的结果默认不会出现在静态 HTML 中这是一个值得权衡的地方。9.6 后续优化方向这里列出几个值得继续深入的方向多语言词典支持不仅支持英文还可以扩展到中文拼音、词根词缀查询。单词含义展示接入词典 API点击单词后显示释义和发音。语音输入利用 Web Speech API 让用户直接说出字母组合。词义联想在找到单词后按主题或词性进一步分组。更精确的评分按单词长度、常用度对结果排序优先展示最可能有用的词。无论选择哪个方向都要回到最初的问题用户为什么需要在手机上打开这个工具以及如何让这个工具在受限的移动环境中更快、更稳、更顺手地完成查询。明确这一点比堆砌更多功能重要得多。