This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021
The article translation: hacks.mozilla.org/2021/08/mdn… By Peter Bengtsson
MDN Web Docs has a new search result auto-completion feature that allows you to quickly jump directly to the document you are looking for by typing part of the document title. This is an article about how this function is done. If you follow through, I’ll share an “Easter egg” feature.
Introduction to the
In its simplest form, the Input box has an onKeyPress event listener that filters the complete list of each document title (per region). At the time of writing, English USA has 11,690 different document titles (and their urls). You can do this by going to developer.mozilla.org/en-US/searc… To see the preview. Yes, it’s big, but it’s not so big that it can’t all load into memory. After all, in the search-related code, it only loads when the user enters something. In terms of size, since the file is compressed using Brotli, the file is only 144KB on the network.
Brotli compression algorithm
This is not the original content, as a complement to the Brotli compression algorithm.
Brotli is a general purpose lossless compression algorithm that provides a better compression ratio than Gzip, and deflate is about the same, but Brotli compression is slower than Gzip compression, so gzip may be a better choice for compressing uncacheable content.
Brotli is now supported by most browsers and can be viewed at: caniuse.com/?search=bro…
- Liverpoolfc.tv: brotli.org/
- Github:github.com/google/brot…
- Mdn:developer.mozilla.org/en-US/docs/…
The above is a brief introduction of MDN’s search result auto-completion and Brotli compression algorithm. The next article will analyze the implementation details of the search result auto-completion.