Despre abonament și dezvăluiri a scris mult. Dar nu vreau să arunc referințe la descrierea acestor funcții în documentația oficială - îi veți găsi fără mine. Respectând vechiul obicei, voi arăta clar ce probleme ajută la rezolvarea acestor funcții.
Aceasta este una dintre acele tehnici pe care vă sfătuiesc foarte mult să le cunoașteți și să le utilizați în dezvoltarea front-end. Puteți vedea chiar demo-ul imediat. Doar nu uitați să deschideți consola pentru a înțelege ce este în neregulă. Și toți cei care doresc să înțeleagă acest subiect în detaliu întreabă sub tăiere.
Despre accelerație
Astfel de operațiuni sunt frumoase și ca utilizatorii noștri, dar, din păcate, ei dau o mare încărcare browserului și domului. Să scriem un exemplar pentru un manipulator de evenimente cu dimensiuni reduse.
Acest cod doar expune lățimea ferestrei la consola. Puteți vedea aici - o pagină demo. În blocul de accelerație, selectați opțiunea "Modificare simplă a ferestrei". Încercați să redați dimensiunea ferestrei și veți vedea că această funcție funcționează de zeci de ori chiar și pentru o ușoară modificare a lățimii.
Acum, imaginați-vă că _onResizeWindow nu am scris console.log inofensiv, și un număr de operații pe manipulări complexe cu dom - browser-ul vzvoet, și, uneori, începe să încetinească redare. Poate că veți găsi acest lucru puțin probabil, pentru că toți nu au fost mult timp pentium. Dar eu nu doar convins că unul dintre motivele pentru mai multe frâne pe site-ul este de lucru care nu este optimă aici cu astfel de lucruri mici, cum ar fi imperceptibile defilare și redimensionarea. Dar, pentru a reduce sarcina pe browser, trebuie să faceți foarte puțin - utilizarea _.throttle
turația creează un înveliș pentru funcția dorită și îl instruiește să ruleze nu mai mult de o dată la fiecare milisecundă N. În cazul nostru, specificăm 300 - acesta este intervalul de timp standard pentru care utilizatorii nu observă întârzierea interfeței și browserul reușește să efectueze manipulările necesare cu dom. Bineînțeles, fără fanatism, dacă fiecare strănut va reproșa întregul conținut al paginii, niciun truc nu va ajuta :-)
Să revenim la pagina demo. Selectați "Redimensionați fereastra cu _.treptare" și asigurați-vă că funcția este declanșată mult mai rar (500 este afișată pentru demonstrație). Astfel, indiferent de cât de des este declanșat un eveniment, _climbul nu va lăsa funcția necesară executată prea des și va crea sarcină inutilă în browser.
Despre debubire
Iar acum ia în considerare un alt exemplu legat de performanța frontendului și o vom da afară cu _.debounce.
Imaginați-vă că avem pe site un anumit câmp de intrare, corectitudinea datelor în care vrem să verificăm online. Nu atunci când utilizatorul face clic pe butonul "Trimiteți", dar direct în procesul de apelare, astfel încât să îl informați cât mai curând posibil despre eroare (desigur, trebuie să o faceți în mod discret).
Cu privire la funcția isValidEmail nu acordați atenție, regular pe onguglena on-rapid în Internet (cu toate acestea, aceasta funcționează destul de clar). Puteți vedea exemplul pe aceeași pagină demo. În secțiunea Debounce, selectați elementul "Doar apăsând butoanele". Acum, deschideți consola și începeți să introduceți câteva e-mailuri. Consola imediat stropeste erorile console.error exact până când introduceți e-mail valid.
Și aici vedem două probleme.
În primul rând, nu împingeți utilizatorii departe și spuneți-le despre eroarea de pe fiecare buton pe care faceți clic. La urma urmei, cel mai adesea el nu face greșeli, dar pur și simplu nu poate scrie instantaneu linia necesară. Nu mai distrageți din nou oamenii din proces.
Iar a doua problemă este și mai gravă: de exemplu, nu verificăm poșta, ci scriem un serviciu de traducere online, cum ar fi Google Translate. Și nu facem verificările necesare pe client, dar, de exemplu, bombardarea ajax-cereri către server. Care, desigur, necesită mult mai mult timp de așteptare și pierde resurse server. Acest lucru este atunci când în loc de un test la [email protected] serverul se va ocupa de t, te, tes, test. și așa mai departe până când găsiți [email protected].
În ambele cazuri, această metodă ne va ajuta să pornim funcția dorită (_onKeyupEmailInput) nu imediat, dar numai după un timp după ce evenimentul a avut loc în browser (avem o tastatură). Acest lucru va ajuta vizitatorul să formeze liniștit e-mailul, iar atunci când se termină și se oprește să faceți clic pe chei, va începe să funcționeze funcția de validare, care va determina deja corectitudinea e-mailului introdus. În orice caz, această abordare este mult mai probabil ca codul să funcționeze cu datele pe care utilizatorul dorește să le spună, fără a fi introduse pe jumătate.
Sper că problema și metoda soluției sunt clare, acum să vedem cum se face acest lucru în cod - la groază arată ca un exemplu cu _.throttle
A adăugat o funcție de împachetare și a atașat-o la tastatura de intrare. Uită-te la diferențele din pagina demo - selectați "Apăsați butoanele cu _.debounce".
Și asta-i tot ce am vrut să-ți spun despre minunatele trăsături de accelerație și de deblocare. Sper că am convins în înțelepciunea folosirii în practică a unor astfel de tehnici, iar aceste funcții vor deveni ajutoarele tale de neînlocuit.
Referințe din articol
Aplicații demo
Sursele de cod sursă sunt pagini demo, mai detaliate decât cele scrise în articol.
Trimiteți-le prietenilor: