brief: | i18n.site хәзер серверсыз тулы текст эзләүгә ярдәм итә.
Бу мәкалә саф фронтның тулы текст эзләү технологиясен кертү белән таныштыра, шул исәптән IndexedDB төзегән инверсия индекс, префикс эзләү, сүз сегментлаштыру оптимизациясе һәм күп телле ярдәм.
Мөмкин булган чишелешләр белән чагыштырганда, i18n.site чиста фронтның тулы текстлы эзләнеше кечкенә һәм тиз, документлар һәм блоглар кебек кечкенә һәм урта вебсайтлар өчен яраклы, һәм оффлайнда бар.
& атна үсештән markdown i18n.site
Бу мәкалә эзләү эффектын татып карау өчен i18n.site
саф фронтның техник кулланылышын бүлешәчәк i18n.site
Код ачык : эзләү / интерактив интерфейс
Документлар / шәхси блоглар кебек кечкенә һәм урта размерлы статик вебсайтлар өчен, үзеннән-үзе төзелгән тулы текст эзләү аркасын төзү бик авыр, һәм хезмәтсез тулы текст эзләү - киң таралган сайлау.
Серверсыз тулы текст эзләү чишелешләре ике киң категориягә бүленә:
Беренчедән, algolia.com Өченче як эзләү хезмәте күрсәтүчеләр тулы текст эзләү өчен фронтовик компонентлар белән тәэмин итәләр!
Мондый хезмәтләр эзләү күләменә карап түләү таләп итә, һәм веб-сайтка туры килү кебек проблемалар аркасында Кытай материкларында кулланучылар өчен еш булмый.
Аны оффлайнда кулланып булмый, интернетта кулланып булмый, зур чикләүләре бар. Бу мәкаләдә күп сөйләшелми.
Икенчесе - тулы текст эзләү.
Хәзерге вакытта тулы саф фронт эзләүләре һәм ElasticLunr.js ( lunrjs
икенчел үсеш нигезендә) lunrjs
lunrjs
Индекслар төзүнең ике ысулы бар, һәм икесенең дә үз проблемалары бар.
Алдан төзелгән индекс файллары
Индекста барлык документлардан сүзләр булганлыктан, зурлыгы зур. Документ өстәлгәндә яки үзгәртелгәндә, яңа индекс файл йөкләнергә тиеш. Бу кулланучының көтү вакытын арттырачак һәм күп полоса киңлеген кулланачак.
Документларны йөкләгез һәм очышта индекслар төзегез
Индекс төзү - исәпләү интенсив бурычы, индекска кергән саен яңадан торгызу ачык артта калуга һәм начар куллану тәҗрибәсенә китерәчәк.
lunrjs
-га өстәп, башка тулы текст эзләү карарлары бар, мәсәлән :
эзләү өчен тезмәләр арасындагы охшашлыкны исәпләгез fusejs
Бу чишелешнең эшләнеше бик начар, аны тулы текст эзләү өчен кулланып булмый (карагыз Fuse.js Озын сорау 10 секундтан артык вакыт ала, аны ничек оптимальләштерергә? ).
Эзләү өчен Блум фильтрын кулланыгыз TinySearch префикс эзләү өчен кулланып булмый (мәсәлән, goo
кертегез, good
, google
эзләгез), һәм шундый ук автоматик тәмамлау эффектына ирешә алмыйсыз.
Мөмкин булган чишелешләрнең җитешсезлекләре аркасында, i18n.site
түбәндәге характеристикаларга ия булган яңа саф фронтның тулы текст эзләү чишелешен эшләде :
gzip
булганнан соң эзләү үзәгенең зурлыгы 6.9KB
(чагыштыру өчен, lunrjs
зурлыгы 25KB
).indexedb
нигезендә инверсия индекс төзегез, ул хәтерне азрак ала һәм тиз.Түбәндә i18n.site
техник тормышка ашыру детальләре җентекләп кертеләчәк.
Сүз сегментациясе браузерның туган сүз сегментациясен куллана Intl.Segmenter
һәм барлык төп браузерлар бу интерфейсны хуплый.
Сегментлаштыру coffeescript
коды сүзе түбәндәгечә
SEG = new Intl.Segmenter 0, granularity: "word"
seg = (txt) =>
r = []
for {segment} from SEG.segment(txt)
for i from segment.split('.')
i = i.trim()
if i and !'| `'.includes(i) and !/\p{P}/u.test(i)
r.push i
r
export default seg
export segqy = (q) =>
seg q.toLocaleLowerCase()
эчендә:
/\p{P}/
- тыныш билгеләренә { ! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _
регуляр белдерү. | } ! .</p><ul><li>
split('.'), чөнки
Firefoxбраузер сүз сегментациясе
. ` сегмент түгел.
5 объект саклау таблицасы IndexedDB
ясалган :
word
сүз : id -doc
Документ url - Документ версия номеры : id -docWord
: id - idprefix
: - idrindex
: id - Документ id : Сызык номерларыurl
документлар массивына һәм ver
версиягә керегез, һәм документның doc
таблицада барлыгын тикшерегез. Әгәр дә ул юк икән, кире индекс булдырыгыз. Шул ук вакытта, тапшырылмаган документлар өчен кире индексны бетерегез.
Шул рәвешле, арту индексациясенә ирешеп була һәм исәпләү күләме кими.
Фронтовик үзара бәйләнештә, индексның йөкләү прогрессы беренче тапкыр йөкләнгәндә артта калу / күрсәтелергә мөмкин. Карагыз " css белән прогресс сызыгы progress +
Проект асинхрон анкапсуляция нигезендә idb IndexedDB
IndexedDB укый һәм яза асинхрон. Индекс ясаганда, индекс ясау өчен документлар бер үк вакытта йөкләнәчәк.
Конкуренцияле язу аркасында килеп чыккан өлешчә мәгълүмат югалтудан саклану өчен, сез түбәндәге coffeescript
кодка мөрәҗәгать итә аласыз һәм конкурент язуларны туктату өчен уку һәм язу арасында ing
кэш өсти аласыз.
pusher = =>
ing = new Map()
(table, id, val)=>
id_set = ing.get(id)
if id_set
id_set.add val
return
id_set = new Set([val])
ing.set id, id_set
pre = await table.get(id)
li = pre?.li or []
loop
to_add = [...id_set]
li.push(...to_add)
await table.put({id,li})
for i from to_add
id_set.delete i
if not id_set.size
ing.delete id
break
return
rindexPush = pusher()
prefixPush = pusher()
Эзләү башта кулланучы керткән төп сүзләрне сегментлаячак.
Сегментлаштыру сүзеннән соң N
сүз бар дип уйлагыз, нәтиҗәләр кайткач, барлык ачкыч сүзләрне үз эченә алган нәтиҗәләр кире кайтарылачак, аннары N-1
, N-2
, ..., 1
ачкыч сүз булган нәтиҗәләр кире кайтарылачак.
Башта күрсәтелгән эзләү нәтиҗәләре сорау төгәллеген тәэмин итә, һәм соңрак йөкләнгән нәтиҗәләр (йөкләү төймәсенә басыгыз) кире кайтару тизлеген тәэмин итә.
Speedавап тизлеген яхшырту өчен, эзләү yield
генераторны таләп буенча йөкләү өчен куллана, һәм нәтиҗә соралган limit
кайта.
Игътибар итегез, yield
дан соң кабат эзләгән саен, IndexedDB
сорау транзакциясен ачарга кирәк.
Кулланучы язган вакытта эзләү нәтиҗәләрен күрсәтү өчен, мәсәлән, wor
кертелгәч, words
һәм work
кебек wor
белән кушылган сүзләр күрсәтелә.
Эзләү үзәге сүз таблицасыннан соң соңгы сүз өчен prefix
таблицасын кулланачак, аның белән кушылган барлык сүзләрне табу һәм эзлеклелектә эзләү.
Анти-селкенү debounce
шулай ук фронтовик үзара бәйләнештә кулланыла (түбәндәгечә тормышка ашырыла), эзләү эзләү ешлыгын киметү һәм исәпләү күләмен киметү өчен.
export default (wait, func) => {
var timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(func.bind(this, ...args), wait);
};
}
Индекс таблицасы оригиналь текстны сакламый, саклау күләмен киметүче сүзләр генә.
Эзләү нәтиҗәләрен яктырту оригиналь текстны яңадан йөкләүне таләп итә, һәм service worker
туры килү челтәр таләпләреннән сакланырга мөмкин.
Шул ук вакытта, барлык мәкаләләрне service worker
кэшлаганга, кулланучы эзләүне башкарганнан соң, бөтен сайт, шул исәптән эзләү, оффлайнда була.
i18n.site
'чиста фронт эзләү чишелеше MarkDown
документ өчен оптимальләштерелгән.
Эзләү нәтиҗәләрен күрсәткәндә бүлек исеме күрсәтеләчәк һәм бүлек басылганда юнәлтеләчәк.
Кире тулы текстлы эзләү алгы очында гына башкарылды, сервер кирәк түгел. Бу документлар һәм шәхси блоглар кебек кечкенә һәм урта вебсайтлар өчен бик яраклы.
i18n.site
Ачык чыганак үзеннән-үзе эшләнгән саф фронт эзләү, зурлыгы кечкенә һәм тиз җавап, хәзерге саф фронтның тулы текст эзләү җитешсезлекләрен чишә һәм кулланучыларга яхшырак тәҗрибә бирә.