brief: | i18n.site ഇപ്പോൾ സെർവർലെസ്സ് ഫുൾ-ടെക്സ്റ്റ് തിരയലിനെ പിന്തുണയ്ക്കുന്നു.
IndexedDB നിർമ്മിച്ച വിപരീത സൂചിക, പ്രിഫിക്സ് തിരയൽ, വേഡ് സെഗ്മെൻ്റേഷൻ ഒപ്റ്റിമൈസേഷൻ, മൾട്ടി-ലാംഗ്വേജ് സപ്പോർട്ട് എന്നിവയുൾപ്പെടെ പ്യുവർ ഫ്രണ്ട്-എൻഡ് ഫുൾ-ടെക്സ്റ്റ് തിരയൽ സാങ്കേതികവിദ്യ നടപ്പിലാക്കുന്നതിനെ ഈ ലേഖനം പരിചയപ്പെടുത്തുന്നു.
നിലവിലുള്ള സൊല്യൂഷനുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ, i18n.site-ൻ്റെ ശുദ്ധമായ ഫ്രണ്ട്-എൻഡ് ഫുൾ-ടെക്സ്റ്റ് തിരയൽ വലുപ്പത്തിൽ ചെറുതും വേഗതയുള്ളതുമാണ്, ഡോക്യുമെൻ്റുകളും ബ്ലോഗുകളും പോലുള്ള ചെറുതും ഇടത്തരവുമായ വെബ്സൈറ്റുകൾക്ക് അനുയോജ്യമാണ്, കൂടാതെ ഓഫ്ലൈനിൽ ലഭ്യമാണ്.
നിരവധി ആഴ്ചകളുടെ & ശേഷം markdown i18n.site
ഈ ലേഖനം i18n.site
i18n.site ഫ്രണ്ട്-എൻഡ് ഫുൾ-ടെക്സ്റ്റ് തിരയലിൻ്റെ സാങ്കേതിക നിർവ്വഹണം പങ്കിടും.
ഡോക്യുമെൻ്റുകൾ/വ്യക്തിഗത ബ്ലോഗുകൾ പോലെയുള്ള ചെറുതും ഇടത്തരവുമായ പൂർണ്ണമായ സ്ഥിരതയുള്ള വെബ്സൈറ്റുകൾക്ക്, സ്വയം-നിർമ്മിത ഫുൾ-ടെക്സ്റ്റ് തിരയൽ ബാക്കെൻഡ് നിർമ്മിക്കുന്നത് വളരെ ഭാരമുള്ളതാണ്, കൂടാതെ സേവന രഹിത പൂർണ്ണ-ടെക്സ്റ്റ് തിരയലാണ് കൂടുതൽ സാധാരണ ചോയ്സ്.
സെർവർലെസ്സ് ഫുൾ-ടെക്സ്റ്റ് തിരയൽ സൊല്യൂഷനുകൾ രണ്ട് വിശാലമായ വിഭാഗങ്ങളായി തിരിച്ചിരിക്കുന്നു:
ആദ്യം, സമാന algolia.com
അത്തരം സേവനങ്ങൾക്ക് തിരയൽ വോളിയം അടിസ്ഥാനമാക്കിയുള്ള പേയ്മെൻ്റ് ആവശ്യമാണ്, മാത്രമല്ല വെബ്സൈറ്റ് പാലിക്കൽ പോലുള്ള പ്രശ്നങ്ങൾ കാരണം ചൈനയിലെ മെയിൻലാൻഡിലെ ഉപയോക്താക്കൾക്ക് ഇത് പലപ്പോഴും ലഭ്യമല്ല.
ഇത് ഓഫ്ലൈനിൽ ഉപയോഗിക്കാൻ കഴിയില്ല, ഇൻട്രാനെറ്റിൽ ഉപയോഗിക്കാൻ കഴിയില്ല, കൂടാതെ വലിയ പരിമിതികളുമുണ്ട്. ഈ ലേഖനം അധികം ചർച്ച ചെയ്യുന്നില്ല.
രണ്ടാമത്തേത് ശുദ്ധമായ ഫ്രണ്ട്-എൻഡ് ഫുൾ-ടെക്സ്റ്റ് സെർച്ചാണ്.
നിലവിൽ, പൊതുവായ ശുദ്ധമായ ഫ്രണ്ട് lunrjs
എൻഡ് ഫുൾ ElasticLunr.js ടെക്സ്റ്റ് തിരയലുകളിൽ 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
: id - പ്രമാണം url - പ്രമാണ പതിപ്പ് നമ്പർdocWord
: id - idprefix
: - idrindex
: വേഡ് id - ഡോക്യുമെൻ്റ് id : ലൈൻ നമ്പറുകളുടെ നിരപ്രമാണം url
ൻ്റെയും പതിപ്പ് നമ്പർ ver
ശ്രേണിയിൽ കടന്ന്, പട്ടിക doc
ൽ പ്രമാണം നിലവിലുണ്ടോ എന്ന് തിരയുക. അത് നിലവിലില്ലെങ്കിൽ, ഒരു വിപരീത സൂചിക സൃഷ്ടിക്കുക. അതേ സമയം, കടന്നുപോകാത്ത പ്രമാണങ്ങളുടെ വിപരീത സൂചിക നീക്കം ചെയ്യുക.
ഈ രീതിയിൽ, ഇൻക്രിമെൻ്റൽ ഇൻഡെക്സിംഗ് നേടാനും കണക്കുകൂട്ടലിൻ്റെ അളവ് കുറയ്ക്കാനും കഴിയും.
ഫ്രണ്ട്-എൻഡ് ഇൻ്ററാക്ഷനിൽ, ആദ്യമായി ലോഡുചെയ്യുമ്പോൾ കാലതാമസം ഒഴിവാക്കാൻ സൂചികയുടെ ലോഡിംഗ് പ്രോഗ്രസ് ബാർ പ്രദർശിപ്പിക്കാൻ കഴിയും "ഒറ്റയെ അടിസ്ഥാനമാക്കിയുള്ള ആനിമേഷൻ progress + പ്യുവർ css ഇംപ്ലിമെൻ്റേഷൻ" ഇംഗ്ലീഷ് / ചൈനീസ് .
IndexedDB എന്നതിൻ്റെ അസിൻക്രണസ് എൻക്യാപ്സുലേഷനെ അടിസ്ഥാനമാക്കിയാണ് പ്രോജക്റ്റ് idb .
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
കീവേഡുകൾ അടങ്ങിയ ഫലങ്ങൾ നൽകും.
ആദ്യം പ്രദർശിപ്പിച്ച തിരയൽ ഫലങ്ങൾ അന്വേഷണത്തിൻ്റെ കൃത്യത ഉറപ്പാക്കുന്നു, തുടർന്ന് ലോഡുചെയ്ത ഫലങ്ങൾ (ലോഡ് കൂടുതൽ ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക) തിരിച്ചുവിളിക്കൽ നിരക്ക് ഉറപ്പാക്കുന്നു.
പ്രതികരണ വേഗത മെച്ചപ്പെടുത്തുന്നതിന്, ഓൺ-ഡിമാൻഡ് ലോഡിംഗ് നടപ്പിലാക്കാൻ തിരയൽ 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
ഓപ്പൺ സോഴ്സ് സ്വയം വികസിപ്പിച്ച പ്യുവർ ഫ്രണ്ട് എൻഡ് സെർച്ച്, ചെറിയ വലിപ്പവും വേഗത്തിലുള്ള പ്രതികരണവും, നിലവിലെ പ്യുവർ ഫ്രണ്ട്-എൻഡ് ഫുൾ-ടെക്സ്റ്റ് തിരയലിൻ്റെ പോരായ്മകൾ പരിഹരിക്കുകയും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുകയും ചെയ്യുന്നു.