Activați încărcarea JavaScript asincronă în WordPress. Încărcare JavaScript asincronă - accelerează încărcarea paginii

Paginile web moderne sunt foarte încărcate cu fișiere javascript. Acest lucru duce la o încărcare mai lentă și la afișarea ulterioară a paginii. În cele mai proaste condiții, vizitatorul site-ului trebuie să aștepte până la 30 de secunde.

Accelerăm se încarcă html pagini

Utilizarea modernă a JavaScript

Paginile web moderne sunt foarte încărcate cu fișiere javascript. Acest lucru duce la o încărcare mai lentă și la afișarea ulterioară a paginii. În cele mai proaste condiții (conexiune lentă la Internet, multe fișiere javascript), vizitatorul site-ului trebuie să aștepte până la 30 de secunde.

HTML este conceput în așa fel încât o pagină web se încarcă sincron (linie cu linie) încărcând pe rând toate elementele incluse în codul HTML.

Există o soluție: puneți șirurile Java la sfârșit document html(prin urmare, acestea vor fi încărcate după desenarea întregii pagini) și numai după aceea conținutul blocurilor va fi afișat în locurile potrivite. Se numeste .

Toate proiectele serioase de astăzi încearcă să treacă la tehnologie nouă descărcări. În plus, este absolut ușor.

Există mai multe abordări. Voi începe în ordine.

< script src= "//www.site.ru/script.js" type= "text/javascript" >

Standardul HTML5 acceptă capacitatea de a încărca scripturi în mod asincron, ceea ce poate accelera semnificativ timpul general de recuperare a paginii. Doar adăugați asincron sau amânați.

< script async src= "//www.site.ru/script.js" type= "text/javascript" >

< script defer src= "//www.site.ru/script.js" type= "text/javascript" >

Care este diferența dintre atributele async și defer?

În ambele cazuri, obținem încărcare asincronă a scripturilor. Singura diferență este momentul în care începe executarea scriptului. Un script cu atributul async va fi executat cât mai curând posibil după el sarcina completa, dar înainte ca obiectul fereastră să fie încărcat. Dacă se folosește atributul defer, scriptul nu va încălca ordinea de execuție a acestuia în raport cu alte scripturi și execuția sa va avea loc după ce pagina este complet încărcată și analizată, dar înainte de evenimentul DOMContentLoaded al obiectului document.

Din păcate, acest mecanism nu funcționează în prezent în toate browserele (în special IE). De asemenea, nu va funcționa dacă există linii document.write în fișierul script.js.

După cum știu toți experții, Google plătește Atentie speciala viteza de încărcare a site-urilor și le reduce pe cele lente rezultatele cautarii. Pentru a ajuta, Google a dezvoltat un script special cu care puteți face încărcare asincronă a javascriptului.

Pentru utilizare, pur și simplu înlocuiți

pe

Și conectați fișierul script extsrc.js

Se va dovedi astfel:

< script src= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Din păcate, această metodă nu funcționează nici pentru fișierele cu document.write

O metodă universală pentru toate browserele. Funcționează chiar și cu document.write

În locul din pagină în care trebuie să afișăm de fapt elementul nostru, creați un bloc div gol:

< div id= "script_block" class = "script_block" >

La sfârșitul paginii, înainte de a introduce un script pentru încărcarea asincronă a fișierelor:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Iată orice fișier sau script care trebuie încărcat.< script type= "text/javascript" >// mutați-l în poziție reală afiseaza documentul. getElementById("script_block" ) . appendChild(document. getElementById("script_ad" ) ); // arată documentul. getElementById("script_ad" ) . stil. display = "blocare" ;

În cele mai vechi versiuni de IE (6 și mai jos), încărcarea asincronă nu funcționează, din păcate, dar practic nu mai există astfel de utilizatori. Toate celelalte browsere și servicii folosesc cu succes modern încărcare accelerată pagini web.

Salutări, prieteni! Știi că se încarcă javascript este unul dintre cele mai mari blocaje în performanța site-ului? Astăzi sarcina mea principală este să explic ce este un script și cum afectează acesta viteza și performanța site-ului.

Un browser care încarcă o etichetă de script oprește redarea paginii până când scriptul este încărcat și executat. Pagina este blocată, iar browserul nu răspunde la acțiunile utilizatorului timp de câteva secunde. Timpul de întârziere depinde de mai mulți factori:

configuratii,
viteza conexiunii la internet,
dimensiunea fișierului și altele...

Din acest motiv, analizatorul de viteză a site-ului web Google PageSpeed Insights recomandă eliminarea din partea de sus a paginii Cod JavaScript, blocându-și afișarea. O bună practică este să plasați scripturi în partea de jos a site-ului, de exemplu înainte de eticheta de închidere sau să configurați încărcarea asincronă.

Dacă codul de script afectează afișarea părții superioare a site-ului, nu îl plasați dosar separat, și încorporați direct în HTML.

JS poate modifica conținutul site-ului și chiar poate redirecționa către o adresă URL diferită. În acest caz, conectarea scriptului de la sfârșitul documentului va duce la efectul de „smucire” a paginii, de încărcare noi sau de modificare a elementelor existente în partea de sus.

Aplicarea atributelor async și defer la eticheta de script

Să ne dăm seama ce sunt asincrone și amânate Funcționează JavaScriptși care este diferența fundamentală dintre atributele async și defer. Dar mai întâi, să ne uităm la secvența procesării documentelor când conexiune normală eticheta de script.

1	< src = "example.js" >

ÎN exemplu clar Voi folosi următoarele simboluri:

- prelucrarea paginii
— încărcarea scriptului
- execuția scriptului

Astfel, secvența de procesare are loc conform următoarei scheme:

Analiza codului HTML este întreruptă în timp ce scriptul se încarcă și se execută, după care continuă. Există o întârziere în afișarea paginii web.

defer atribut

Atributul defer permite browserului să înceapă descărcarea fișierelor js în paralel fără a opri procesarea ulterioară a paginii. Ele sunt executate după analiză completă model de obiect document (din documentul englezesc Model obiect, prescurtat DOM), browser-ul garantând consistența în funcție de ordinea în care sunt incluse fișierele.

1	< defer src = "example.js" >

atribut asincron

Suportul pentru atributul async a apărut în HTML5, permite browserului să descarce fișiere js în paralel și să le execute imediat după descărcare, fără a aștepta ca restul paginii să fie procesat.

1	< async src = "example.js" >

Diagrama secvenței de procesare:

Aceasta este o descărcare asincronă. Acest atribut este recomandat pentru utilizare în scripturi care nu au un impact semnificativ asupra afișajului documentului. Acestea includ contoare de colectare a statisticilor ( Google Analytics, Yandex Metrica), coduri de rețea de publicitate ( Rețeaua de publicitate Yandex, Google AdSense), butoane retele socialeși așa mai departe.

Viteza de încărcare a site-ului este unul dintre factorii de clasare în Google.

Asincron Conexiune JavaScript Reduce timpul de încărcare a paginii datorită absenței întârzierii. Împreună cu aceasta, recomand comprimarea și îmbinarea fișierelor js într-unul singur, de exemplu, folosind fișierul . Utilizatorilor le plac site-urile rapide 😎

) Am scris despre efectul pe care fișierele JavaScript îl au asupra căii critice de redare (CRP).

JavaScript este o resursă de blocare pentru parser. Aceasta înseamnă că JavaScript blochează analizarea documentului HTML în sine. Când analizatorul ajunge la eticheta ‹script› (nu contează dacă este intern sau extern), se oprește, preia fișierul (dacă este extern) și îl rulează.

Acest comportament poate fi problematic dacă încărcăm mai multe fișiere JavaScript pe o pagină, deoarece crește timpul de randare pentru prima dată, chiar dacă documentul nu depinde de fapt de acele fișiere.

Din fericire, elementul are două atribute, async și defer, care ne oferă control asupra modului în care sunt încărcate și executate fișierele externe.

Execuție normală

Înainte de a înțelege diferența dintre aceste două atribute, să ne uităm la ce se întâmplă în absența lor. După cum sa menționat mai devreme, în mod implicit, fișierele JavaScript întrerup analizarea documentelor HTML până când sunt primite și executate.
Să luăm un exemplu în care elementul este situat undeva în mijlocul paginii:

... ... ....

Iată ce se va întâmpla atunci când analizatorul procesează documentul:

Analiza HTML este întreruptă până când scriptul este descărcat și executat, crescând astfel timpul până la prima randare.

atribut asincron

Async este folosit pentru a indica browserului că scriptul Pot fi să fie executat asincron.
Analizorul HTML nu trebuie să se oprească când ajunge la etichetă pentru a se încărca și a se executa. Execuția poate avea loc după ce scriptul este primit în paralel cu analizarea documentului.

Atributul este disponibil numai pentru fișierele conectate extern. Dacă fișier extern are acest atribut, poate fi încărcat în timp ce documentul HTML este încă analizat. Analizorul se va întrerupe pentru a executa scriptul imediat ce fișierul script este încărcat.

defer atribut

Atributul defer spune browserului că scriptul ar trebui să fie executat după ce documentul HTML a fost complet analizat.

Ca și în cazul încărcării asincrone de scripturi, fișierul poate fi încărcat în timp ce documentul HTML este analizat. Cu toate acestea, chiar dacă fișierul script este încărcat complet înainte ca analizatorul să se termine, acesta nu va fi executat până când analizatorul nu va termina de rulat.

Execuție asincronă, întârziată sau normală?

Deci, când ar trebui să utilizați asincron, amânat sau normal? Execuție JavaScript? Ca întotdeauna, depinde de situație și există mai multe întrebări care te pot ajuta să iei decizia corectă.

Unde se află elementul?

Execuția asincronă și leneșă sunt cele mai importante atunci când elementul nu se află la sfârșitul documentului. Documentele HTML sunt analizate în ordine, de la deschidere până la închidere. Dacă fișierul JavaScript extern este plasat imediat înaintea etichetei de închidere, atunci utilizarea asincronă și amânare devine mai puțin adecvată, deoarece analizatorul va fi analizat cea mai mare parte a documentului până atunci și fișierele JavaScript nu vor mai avea efect asupra acestuia.

Este scenariul autosuficient?

Pentru fișierele care nu depind de alte fișiere și/sau nu au nicio dependență, atributul asincron va fi cel mai util. Deoarece nu ne interesează când este executat fișierul, încărcarea asincronă este cea mai potrivită opțiune.

Se bazează scriptul pe un DOM complet analizat?

În multe cazuri, fișierul script conține funcții care interacționează cu DOM. Sau poate că există o dependență de un alt fișier de pe pagină. În astfel de cazuri, DOM-ul trebuie să fie complet analizat înainte ca scriptul să fie executat. De obicei, un astfel de fișier este plasat în partea de jos a paginii pentru a se asigura că totul a fost analizat pentru ca acesta să funcționeze. Cu toate acestea, într-o situație în care din anumite motive fișierul trebuie să fie localizat într-o locație diferită, atributul defer poate fi util.

Scenariul este mic și dependent?

În cele din urmă, dacă scriptul este relativ mic și/sau depinde de alte fișiere, atunci ar putea merita să îl definiți în linie. Deși codul inline blochează analizarea documentului HTML, nu ar trebui să fie o mare problemă dacă documentul este de dimensiuni mici. De asemenea, dacă depinde de alte fișiere, poate fi necesară o blocare minoră.

Suport și motoare de browser moderne

Suportul pentru atributele async și defer este foarte comun:

Este demn de remarcat faptul că comportamentul acestor atribute poate varia ușor între motoarele JavaScript. De exemplu, în V8 (utilizat în Chromium), se încearcă analizarea tuturor scripturilor, indiferent de atributele lor, într-un fir separat dedicat pentru execuția scriptului. Astfel, natura de „blocare a analizatorului” a fișierelor JavaScript ar trebui redusă la minimum în mod implicit.

Uneori este nevoie de încărcarea asincronă a datelor pas cu pas. Și ar putea fi orice. Pornind de la încărcarea directoarelor dependente (de exemplu, țară -> orașe), terminând cu combinarea și procesarea informațiilor cu diverse surse(de exemplu, utilizați mai multe servicii diferite, și fiecare dintre ei cheltuiește timp diferit pentru generarea datelor).

Și acum puțin mai simplu.

Probleme cu încărcarea pas cu pas a datelor asincrone în jQuery (ajax)

Dacă trebuie să conectați mai multe solicitări ajax executate secvențial în jQuery, atunci solutie simpla will - face un apel la următoarea funcție la sfârșitul fiecărui handler de succes. Acest lucru nu este doar destul de simplu, dar nici nu provoacă probleme. De exemplu,

// Prima solicitare $.ajax(url, ( ... succes: function (rezultat) ( // Un cod... // Apelarea urmatorului handler nextLoader(); ) ));

Și acum, să spunem, în fața ta stă puțin mai mult sarcină dificilă. De exemplu, trebuie să rulați o funcție numai după ce au fost finalizate mai multe solicitări asincrone (de exemplu, obținerea de bule pentru un site). Desigur, ele pot fi conectate și într-un lanț drept, așa cum se arată mai sus. Dar, în același timp, însăși esența asincroniei începe să se piardă. Și se poate dovedi, de asemenea, că construiți o dependență între blocuri complet nelegate. Sunteți de acord că indicatorul TCI și datele whois nu depind în totalitate unul de celălalt.

Cu toate acestea, în ciuda tuturor subtilităților, o astfel de problemă poate fi rezolvată destul de repede, deși puțin stângaci.

Dar ce vei face dacă sarcina ta se va dovedi a fi și mai dificilă? Când trebuie să distribuiți toate operațiunile și încărcarea datelor în etape. De exemplu, creați un șablon de dialog. Prima etapă va implica obținerea de date pentru toate câmpurile (liste derulante, grupuri de casete de selectare etc.). În a doua etapă, vor fi definiți handlere pentru câmpurile create. Și la a treia etapă, după ce „totul și totul” a fost încărcat complet, deschideți accesul la diverse butoaneși alte elemente de interfață (pentru ca mâinile jucăușe să nu creeze multe probleme pentru tine). Pur vizual ar putea arăta astfel:

Sunteți de acord că organizarea apelurilor tuturor funcțiilor dintr-un singur lanț nu este doar o sarcină ușoară, ci și nici foarte plăcută. În plus, imaginați-vă că trebuie să adăugați mai multe câmpuri și diferiți handlere. Ce se va intampla? Capul tău va începe să fiarbă de la căutarea locurilor potrivite „unde să introduci”. Aici aveți deja nevoie de un fel de mecanism care vă va permite să aranjați toate lansările în etape.

Scriem un script pentru a organiza pas cu pas încărcarea asincronă în jQuery

Primul pas este să decideți cu privire la întrebarea complet logică „de ce să nu folosiți biblioteci gata făcute?” Ca atare, nu există niciun răspuns la această întrebare. Totul depinde foarte mult de sarcină. Deoarece cuvântul „bibliotecă” înseamnă de obicei:

lipsa controlabilității codului (nu puteți schimba logica internă a bibliotecii; iar dacă faceți acest lucru, atunci orice modificare poate reveni să vă bântuie în viitor)
nevoia de a o studia proprietăți de bazăși principii (de obicei, aceasta se rezumă la citirea tuturor documentației posibile și a o grămadă de teste diferite)
restrictii asupra versiuni jQuery(dacă sunt utilizate mecanisme complexe ale nucleului, atunci este posibil să faceți legătura la versiunea bibliotecilor jQuery)
posibile probleme de compatibilitate cu alte scripturi (este departe de a fi sigur că biblioteca se va comporta corect cu alte biblioteci)
bogăția excesivă a funcționalității și, ca urmare, prezența „restricțiilor suplimentare”
etc.

Notă: Nu vă lăsați induși în eroare, deoarece bibliotecile au o cantitate mare pro. Dacă vă amintiți, jQuery este aceeași bibliotecă. Articolul se concentrează pe riscurile și investițiile suplimentare de timp care vi se pot cere.

De aceea trebuie mai întâi să vă decideți sarcinile (numărul, frecvența de apariție), timpul (cât sunteți dispus să cheltuiți pentru rezolvarea problemei), ce sunteți dispus să sacrifici (este capacitatea de a corecta rapid ceva important pentru tine). ; este importantă dimensiunea bibliotecilor; cât de mult? vi se potrivesc restricțiile), preferințe (de exemplu, practic nu utilizați biblioteci). Și numai după ce răspundeți la aceste întrebări, încercați să răspundeți la întrebarea „de ce merită sau nu să folosiți biblioteci gata făcute?”

Dacă ți-ai răspuns singur că vrei să folosești biblioteci, atunci, opțional, poți descărca un caz de testare gata făcut cu un script gata făcut la sfârșitul articolului.

Dacă sunteți plin de entuziasm și determinare, atunci vom trece la acțiuni ulterioare.

Compilarea cerințelor pentru script

Înainte de a implementa orice, este necesar să se elaboreze cerințe mici pentru a nu fi deturnat în timpul implementării. Rezultă o listă ca aceasta:

Conectarea și configurarea scriptului ar trebui să aibă loc automat (trebuie doar să conectați fișierul js)
Reconectarea fișierului script nu ar trebui să provoace o blocare
Utilizați numai mecanisme jQuery standard
Interfața ar trebui să fie simplă și ușor de înțeles
Puteți crea mai multe lanțuri independente de etape
Ar trebui să puteți întotdeauna să ajustați rapid acțiunile scriptului
Scriptul nu ar trebui să impună restricții complexe asupra codului dvs. (maximum - necesitatea de a adăuga o funcție de notificare despre execuția acestuia)

Notă: Formulați întotdeauna cerințe, astfel încât în timpul implementării să nu începeți să faceți ceva care nu este deloc necesar. Și asigurați-vă că includeți puncte „atât de clare”, astfel încât aceste puncte să rămână „atât de clare”.

Realizarea unui proiect de testare

Structura proiectului va arăta astfel:

css - director cu stiluri
- template.css - stiluri proiect de testare
imagini - catalog cu imagini (pentru efect vizual)
- ajax-loader.gif - se încarcă imaginea
js - director cu scripturi
- jquery-ajax-stage.js - script pentru încărcare în etape
data.json - date de testare
index.html - pagina de start

Notă: Când creați structura proiectului de testare, încercați să o aduceți cât mai aproape de structura proiectului real. Acest lucru vă va ajuta să identificați problemele legate de structură în timpul dezvoltării.

Fișier cu date de testare - data.json

Acest fișier este necesar doar pentru a vă asigura că încărcarea datelor prin ajax nu va afecta nimic. Îl puteți completa cu orice json. De exemplu, așa:

( date: „O mulțime de date”)

Notă: Încercați să faceți cazurile de testare cât mai asemănătoare cu cele reale. Chiar dacă apelurile de funcții sunt lipsite de sens.

Fișier de stil - template.css

Acest fișier este necesar doar pentru a afișa toate stilurile separat. Deoarece stilurile nu au nimic de-a face cu dezvoltarea scenariului în sine. Da, și este considerat doar o bună practică. Stilurile în sine:

Left-table (float: stânga; padding-right: 10px; ) .right-table (float: left; padding-right: 10px; ) table.table-loader (border-spacing: 0px; border-collapse: collapse; width : 300px; ) table.table-loader tr td ( umplutură: 5px; chenar: 1px solid #ccc; )

Fișier script pentru încărcarea asincronă în etape - jquery-ajax-stage.js

Implementarea în sine a încărcării asincrone pas cu pas.

(funcție (parentObject) ( // Protecție împotriva redefinirii if(parentObject.eventManager) return; // Definiți obiectul parentObject.eventManager = ( // Adăugați o etapă addStage: function (el, stageName) ( var elCount = $( el). length; // Verificați corectitudinea parametrilor if(elCount > 0 && !!stageName) ( // O astfel de etapă există deja dacă (($(el).get(0).eventStages = $(el)) .get(0).eventStages || ())) return; // Definiți „nfg $(el).get(0).eventStages = ( waiterCount: 0, // Contor de obiecte în starea de așteptare a datelor onEvent: / / în această matrice toate funcțiile care vor fi apelate vor fi stocate); ) ), // Eliminați etapa removeStage: function (el, stageName) ( var elCount = $(el).length; // Verificați corectitudinea parametrilor if(elCount > 0 && !!stageName) ( // Un astfel de etapa este găsită dacă (( $(el).get(0).eventStages = $(el).get(0).eventStages || ())) ( șterge ($(el).get(0).eventStages = $(el).get (0).eventStages || ()); ($(el).get(0).eventStages = $(el).get(0).eventStages || ()) = nul; ) ) ), // Mărește contorul de funcții executate pentru etapa addStageWaiter: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $(el). ).get(0).eventStages || ()); // Verificați corectitudinea parametrilor if(elCount > 0 && !!stageName && stage) ( // Creșterea contorului de încărcare stage.waiterCount++; ) ), // Scade contorul de functii executate pentru etapa // Adică. anunță că funcția a fost executată removeStageWaiter: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0).eventStages = $(el).get(0)) .eventStages || ()); // Verificați corectitudinea parametrilor if(elCount > 0 && !!stageName && stage) ( // Reduceți contorul de încărcare stage.waiterCount--; // Verificați starea etapei aceasta .checkStage(el, stageName); ) ), // Verificați starea etapei checkStage: function (el, stageName) ( var elCount = $(el).length, stage = ($(el).get(0)) .eventStages = $(el).get(0) .eventStages || ()); // Verificați corectitudinea parametrilor if(elCount > 0 && !!stageName && stage) ( if (stage.waiterCount 0) ( / / coada FIFO - primul intrat, primul ieșit, ca în magazinul de etapă. onEvent.shift())(; ) ) ) ), // Adăugați un apel de funcție care va rula atunci când întreaga etapă onLoadStage este executată: function (el, stageName, funcHandler) ( var elCount = $(el).length, stage = ($ (el).get(0).eventStages = $(el).get(0).eventStages || ()); // Verificați parametrii sunt corecti if(elCount > 0 && !!stageName && stage && typeof (funcHandler) = == „funcție”) ( // Adăugați un handler stage.onEvent.push(funcHandler); // Verificați starea stadiului this.checkStage(el, stageName); ) ) ); ))(fereastră);

Pagina de testare - index.html

Pagina de test s-a dovedit a fi destul de mare (aproximativ 160 de linii), așa că va fi dată doar o parte din cod. Versiunea completa puteți găsi întotdeauna fișierul în arhiva zip.

Includem toate fișierele necesare:

Să creăm câteva blocuri de testare. Blocul include un buton de lansare și un tabel în care datele vor fi înregistrate pas cu pas.

Începeți descărcarea

Să definim o funcție care va crea funcții de testare pentru etapele:

function getFakeLoader(storage, currStage, startDate, selector) ( return function () ( setTimeout(function ()) ( $.ajax("data.json?callback=?", ( contentType: "text/plain; charset=utf-8) ", dataType: "jsonp", jsonpCallback: function (rezultat) ( $(selector).html("Timp de la început: " + ((+new Date() - startDate)/1000.0).toFixed(2) + " secunde "); // Scrieți timpul de încărcare window.eventManager.removeStageWaiter(storage, currStage); // Scădeți contorul ) )); ), Math.random() * (3000) + 1000 // Întârziere de la 1 la 4 secunde ); ); )

Creăm o funcție care va descrie logica pentru fiecare bloc de testare:

function formTestFor(selector) ( $(selector + " .start-process").click(function () ( var startDate = new Date(); // Pentru frumusețe, adăugați imagini setLoaderImgs(selector); // Definiți fereastra etapelor .eventManager .addStage($(selector + " .table-loader"), "1"); window.eventManager.addStage($(selector + " .table-loader"), "2"); window.eventManager.addStage ($ (selector + " .table-loader"), "3"); // Blocați butonul până la sfârșitul etapei $(selector + " .start-process").attr("dezactivat", "dezactivat" ); // Umpleți coada de așteptare pentru 3 încărcări pe etapă // De fapt, aceste acțiuni ar trebui să apară în locurile în care sunt lansate funcțiile de etapă window.eventManager.addStageWaiter($(selector + " .table-loader"), "1 "); ... window.eventManager.addStageWaiter ($(selector + " .table-loader"), "3"); // Acum să creăm în ordine inversă(pentru claritate) funcții de încărcare // De fapt, aceste acțiuni ar trebui să apară în locurile în care funcțiile sunt definite window.eventManager.onLoadStage($(selector + " .table-loader"), "2", getFakeLoader($(selector + " .table-loader"), "3", startDate, selector + " .row-3 .td-1")); ... window.eventManager.onLoadStage($(selector + " .table-loader"), "1", getFakeLoader($(selector + " .table-loader"), "2", startDate, selector + " .row -2 .td-3")); // Adăugați o ieșire de text obișnuită a etapelor terminate window.eventManager.onLoadStage($(selector + " .table-loader"), "1", funcția () ( $(selector + " .row-1-end td" ).html ("Prima etapă s-a încheiat în " + ((+new Date() - startDate)/1000.0).toFixed(2) + " secunde. Următoarea etapă începe."); )); ... window.eventManager.onLoadStage($(selector + " .table-loader"), "3", function () ( $(selector + " .row-3-end td").html("A treia etapă sa încheiat pentru „ + ((+new Date() - startDate)/1000.0).toFixed(2) + " secunde.
Încărcarea este completă"); )); // După ce a treia etapă este finalizată, deblocați butonul onLoadStage window.eventManager.onLoadStage($(selector + " .table-loader"), "3", funcția () ( // Deblocați butonul $(selector + " .start-process").attr("disabled", null); )); // Rulați acum funcțiile primei etape getFakeLoader($(selector + " .table-loader") , "1", startDate, selector + " .row-1 .td-1")(); getFakeLoader($(selector + " .table-loader"), "1", startDate, selector + " .row-1 .td-2")(); getFakeLoader($(selector + " .table-loader"), "1", startDate, selector + " .row-1 .td-3")(); // Observați.. . )); )

Acum colectăm toate fișierele în proiect și trecem la testarea și demonstrația inițială.

Să vedem rezultatul

Deschideți fișierul index.html în browser. Ar trebui să fie afișată următoarea interfață:

După cum puteți vedea, avem două butoane disponibile pentru lansarea proceselor paralele. După ce faceți clic pe ele, descărcarea blocurilor corespunzătoare ar trebui să înceapă. Și va arăta cam așa:

După ce ambele procese și-au încheiat execuția, priviți momentul și asigurați-vă că etapele au avut loc în ordinea corectă:

După ce am finalizat testarea inițială, trecem la verificarea cerințelor:

Conectarea și configurarea scriptului ar trebui să aibă loc automat (trebuie doar să conectați fișierul js) - Da
Reconectarea fișierului script nu ar trebui să provoace o blocare - Da
Folosiți numai mecanisme jQuery standard - Da (a fost folosită doar funcționalitatea selectorului)
Interfața ar trebui să fie simplă și ușor de înțeles - Da
Puteți crea mai multe lanțuri independente de etape - Da
Ar trebui să puteți corecta întotdeauna rapid acțiunile scriptului - Da (scriptul este scris destul de simplu; partea principală constă în verificarea datelor de intrare)
Scriptul nu ar trebui să impună restricții complexe asupra codului dvs. (maximum - necesitatea de a adăuga o funcție pentru a notifica finalizarea acesteia) - Da (în interiorul funcțiilor getFakeLoader, este numită doar funcția de notificare despre finalizarea sa)

Acum aveți un script simplu și clar care vă va ajuta să organizați rapid execuția pas cu pas a funcțiilor, fie că este vorba de încărcarea datelor sau pur și simplu de efectuarea de operațiuni.