['.concat(e[0],"]: ").concat(e[1],""):'
['.concat(e[0],"] ").concat(e[1],": ").concat(e[2],"")}));return"
引用链接
").concat(e.join("\n"),"
")},this.buildAddition=function(){return"\n \n "},this.setOptions=function(e){o.opts=s(o.opts,e)},this.hasFootnotes=function(){return 0!==i.length},this.getRenderer=function(e){i=[],r=0,a=o.buildTheme(o.opts.theme);var t=new ht.a.Renderer;return t.heading=function(e,t){switch(t){case 1:return"").concat(e,"
");case 2:return"").concat(e,"
");case 3:return"").concat(e,"
");default:return"").concat(e,"
")}},t.paragraph=function(e){return-1!=e.indexOf("")),"
").concat(e,"")},t.code=function(e,t){e=e.replace(//g,">");var o=e.split("\n").map((function(e){return'
'.concat(e||"
","")})),n="github";return'\n \n ').concat(o.join(""),"\n \n ").concat(e,"")},t.listitem=function(e){return"<%s/>').concat(e,"")},t.list=function(e,t,o){e=e.replace(/<\/*p.*?>/g,"");var n=e.split("<%s/>");if(!t)return e=n.join("•"),"").concat(e,"
");e=n[0];for(var i=1;i'},t}},vt=bt,Ct=o("56b3"),kt=o.n(Ct),St='# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\n\n## 使用自动补全\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\n\n\n\n在上图示例中，我们可以看到，输入关键字 `juej`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\n\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\n\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\n\n## 基于“预测”而非“建议”\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\n\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\n\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 `juej` 更改为 `juex` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\n\n\n\n## 为什么看不到某些联想词？\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\n\n- 这个关键字不是热门字词；\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\n\n## 为什么会看到某些不当的联想词？\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\n\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\n\n\n\n## 如何实现自动补全算法？\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\n\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\n\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\n\n### 词汇表实现\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\n\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\n\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 `O(log N)`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\n\n### 前缀树实现\n通常来说，许多词汇都以相同的前缀开头，比如 `need`、`nested` 都以 `ne` 开头，`seed`、`speed` 都以 `s` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\n\n\n\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\n\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 `ne` 对应于从子节点取左边缘 `N` 和唯一边缘 `E` 的路径。然后可以通过继续遍历从 `E` 节点可以达到的所有叶节点来生成补全列表。在图中，`ne` 的补全可以是两个分支：`-ed` 和 `-sted`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\n\n### 有限状态自动机(DFA)实现\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 `ed`、`ing`、`tion` 在英文单词中特别常见。在上一个例子中，`e`、`d` 分别存放在了每一个分支上。\n\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\n\n
\n\n 此操作将丢失本地缓存的文本和自定义样式，是否继续?\n
\n \n \n\n
\n 一款高度简洁的微信 Markdown 编辑器
\n\n
\n \n \n扫码关注我的公众号，原创技术文章第一时间推送！
\n| \n | \n \n
\n 将图片拖到此处，或\n 点击上传\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n 正在生成\n
\n [${x[0]}]: ${x[1]}`;\n }\n return `
[${x[0]}] ${x[1]}: ${x[2]}`;\n });\n return `
引用链接
${footnoteArray.join(\"\\n\")}
`;\n };\n\n this.buildAddition = () => {\n return `\n \n `;\n };\n\n this.setOptions = (newOpts) => {\n this.opts = merge(this.opts, newOpts);\n };\n\n this.hasFootnotes = () => footnotes.length !== 0;\n\n this.getRenderer = (status) => {\n footnotes = [];\n footnoteIndex = 0;\n\n styleMapping = this.buildTheme(this.opts.theme);\n let renderer = new marked.Renderer();\n\n renderer.heading = (text, level) => {\n switch (level) {\n case 1:\n return `${text}
`;\n case 2:\n return `${text}
`;\n case 3:\n return `${text}
`;\n default:\n return `${text}
`;\n }\n };\n renderer.paragraph = (text) => {\n if (\n text.indexOf(\"`\n );\n return `
${text}`;\n };\n renderer.code = (text, lang) => {\n text = text.replace(//g, \">\");\n const codeLines = text\n .split(\"\\n\")\n .map(\n (line) =>\n `
${\n line || \"
\"\n }`\n );\n const codeTheme = \"github\";\n return `\n \n ${codeLines.join(\"\")}\n \n ${text}`;\n renderer.listitem = (text) =>\n `<%s/>${text}`;\n\n renderer.list = (text, ordered, start) => {\n text = text.replace(/<\\/*p.*?>/g, \"\");\n let segments = text.split(`<%s/>`);\n if (!ordered) {\n text = segments.join(\"•\");\n return `${text}
`;\n }\n text = segments[0];\n for (let i = 1; i < segments.length; i++) {\n text = text + i + \".\" + segments[i];\n }\n return `${text}
`;\n };\n renderer.image = (href, title, text) => {\n let subText = \"\";\n if (text) {\n subText = ``;\n return renderer;\n };\n }\n}\nexport default WxRenderer;\n","const DEFAULT_CONTENT = `# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\n\n## 使用自动补全\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\n\n\n\n在上图示例中，我们可以看到，输入关键字 \\`juej\\`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\n\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\n\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\n\n## 基于“预测”而非“建议”\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\n\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\n\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 \\`juej\\` 更改为 \\`juex\\` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\n\n\n\n## 为什么看不到某些联想词？\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\n\n- 这个关键字不是热门字词；\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\n\n## 为什么会看到某些不当的联想词？\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\n\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\n\n\n\n## 如何实现自动补全算法？\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\n\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\n\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\n\n### 词汇表实现\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\n\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\n\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 \\`O(log N)\\`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\n\n### 前缀树实现\n通常来说，许多词汇都以相同的前缀开头，比如 \\`need\\`、\\`nested\\` 都以 \\`ne\\` 开头，\\`seed\\`、\\`speed\\` 都以 \\`s\\` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\n\n\n\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\n\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 \\`ne\\` 对应于从子节点取左边缘 \\`N\\` 和唯一边缘 \\`E\\` 的路径。然后可以通过继续遍历从 \\`E\\` 节点可以达到的所有叶节点来生成补全列表。在图中，\\`ne\\` 的补全可以是两个分支：\\`-ed\\` 和 \\`-sted\\`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\n\n### 有限状态自动机(DFA)实现\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 \\`ed\\`、\\`ing\\`、\\`tion\\` 在英文单词中特别常见。在上一个例子中，\\`e\\`、\\`d\\` 分别存放在了每一个分支上。\n\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\n\n
![](\"https://gitee.com/yanglbme/resource/raw/master/doocs-md/dfa.gif\")
![](\"https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png\")
\n'+(n?e:re(e,!0))+""+(n?e:re(e,!0))+"\n"+e+"\n"},t.html=function(e){return e},t.heading=function(e,t,n,r){return this.options.headerIds?"
\n":"
\n"},t.list=function(e,t,n){var r=t?"ol":"ul",i=t&&1!==n?' start="'+n+'"':"";return"<"+r+i+">\n"+e+"\n"},t.listitem=function(e){return"
"+e+"
\n"},t.table=function(e,t){return t&&(t=""+t+""),""+e+""},t.br=function(){return this.options.xhtml?"":"
"},t.del=function(e){return"
"+fe(u.message+"",!0)+"";throw u}}ge.options=ge.setOptions=function(e){return ce(ge.defaults,e),pe(ge.defaults),ge},ge.getDefaults=de,ge.defaults=me,ge.use=function(e){var t=ce({},e);if(e.renderer&&function(){var n=ge.defaults.renderer||new ie,r=function(t){var r=n[t];n[t]=function(){for(var i=arguments.length,o=new Array(i),s=0;s
"+fe(r.message+"",!0)+"";throw r}},ge.Parser=le,ge.parser=le.parse,ge.Renderer=ie,ge.TextRenderer=oe,ge.Lexer=ee,ge.lexer=ee.lex,ge.Tokenizer=H,ge.Slugger=se,ge.parse=ge;var ve=ge;return ve}))},"0f22":function(e,t,n){var r=n("29d8").DOMParser,i=function(){this.version="1.3.5";var e={mergeCDATA:!0,normalize:!0,stripElemPrefix:!0},t=new RegExp(/(?!xmlns)^.*:/);new RegExp(/^\s+|\s+$/g);return this.grokType=function(e){return/^\s*$/.test(e)?null:/^(?:true|false)$/i.test(e)?"true"===e.toLowerCase():isFinite(e)?parseFloat(e):e},this.parseString=function(e,t){if(e){var n=this.stringToXML(e);return n.getElementsByTagName("parsererror").length?null:this.parseXML(n,t)}return null},this.parseXML=function(n,r){for(var o in r)e[o]=r[o];var s={},a=0,u="",l=n.childNodes.length;if(l)for(var c,h,f,d=0;d