这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战
本文翻译自:hacks.mozilla.org/2021/08/mdn… ,作者:Peter Bengtsson
MDN Web Docs 中新添加了一个搜索结果自动补全的功能,这使你可以通过键入文档标题的一部分来快速直接跳转到您要查找的文档。这是关于这个功能如何做的的文章。如果你坚持到底,我将分享一个“复活节彩蛋”功能。
简介
在最简单的形式中,input 框有一个 onkeypress 事件侦听器,它过滤每个文档标题(每个区域)的完整列表。在撰写本文时,英语美国有 11,690 个不同的文档标题(及其 URL)。你可以通过打开 developer.mozilla.org/en-US/searc… 来查看预览。是的,它很大,但它并没有大到无法全部加载到内存中。毕竟,在搜索相关的代码中,它只会在用户输入内容时加载。而说到大小,因为文件是用 Brotli 进行压缩的,所以文件在网络上只有 144KB。
Brotli 压缩算法
这里不是原文的内容,作为一个 Brotli 压缩算法的补充。
Brotli 是一种通用的无损压缩算法,它提供了比 gzip 更好的压缩比,deflate 速度也差不多,但是 Brotli 压缩的过程比 gzip 压缩要慢,所以 gzip 可能是压缩不可缓存内容的更好选择。
Brotli 现在被大多数浏览器支持,可以查看:caniuse.com/?search=bro…
以上为 MDN 的搜索结果自动补全的简单介绍和 Brotli 压缩算法的介绍,下一篇文章将会分析搜索自动补全的实现细节。