Utilizatorul dorește mereu conținut. Și, cât mai curând posibil. Nu este obișnuit să aștepte și nu-i place să o facă. Robotul de căutare, în ceva, este similar cu cel al utilizatorului. De asemenea, dorește conținut. Cu toate acestea, în momentul emiterii sale, probabil că nu-i pasă, dar este foarte preocupat de raportul dintre conținutul util și cantitatea totală de informații de pe pagină.
În acest articol voi scrie cât de repede și fără probleme pot încărca conținut și fac ceva de genul SSI, dar pe client și nu pe server.
Ce este important pe pagină?
În primul rând, trebuie să decideți exact ce este important pe pagină și trebuie încărcat cu primul val. Cred că ele sunt importante:- Conținut (corpul principal al paginii)
- Navigare (dacă utilizatorul are JS dezactivat sau este un bot, trebuie să dați legături în orice caz)
- Logo-ul site-ului (în opinia mea, aveți nevoie de el imediat.) Dar acest lucru este discutabil)
Unde încărc conținut?
Pentru a descărca ceva, mai întâi trebuie să hotărâți unde vom introduce ceva. Vă propun să faceți o pagină în care să indicăm locurile în care vor fi încărcate date suplimentare, dar să le lăsați goale. Aceste locuri furnizează id-ul, pe care îl vom găsi în textul paginii.
Iată o pagină ca aceasta. Am de gând să descarcă id = "left", id = "right", id = "img".
Ce descărcăm?
Acum trebuie să creăm fișiere de testare, care vor fi încărcate. Am decis să mă limitez la fișiere, nu la rezultatele scenariilor. De ce? Despre asta mai târziu.
- left.html - Acesta este textul din stânga
right.html - Acesta este textul potrivit
img.html - Aceasta este o imagine
Că nu existau probleme cu Ajax, îți sugerez imediat să fac totul în utf-8. Deci, este mai corect și mai convenabil.
Motorul încărcătorului
Vă sugerăm să folosiți biblioteca jQuery. Este mic, rapid și convenabil. Conectându-l o dată, toate scripturile de pe pagină pot fi scrise împreună cu acesta, reducând munca și cantitatea de cod. Dar, de fapt, același lucru se poate face pe JS pur, sau folosind alte biblioteci.
În primul rând, trebuie să puneți blocurile pe pagina noastră în conformitate cu fișierele încărcate. În JS pentru aceasta, este convenabil să folosiți obiecte. Deci, creați un obiect.
/ * DATE DE ÎNCĂRCARE * /
var to_load = '#left': 'left1.html',
"#right": "right.html",
"#img": "img.html"
>
Acum trebuie să prindeți momentul în care conținutul principal a fost deja încărcat. În acest moment, trebuie să începeți să expediați blocurile noastre suplimentare. Capturarea evenimentului:
/ * ÎNCĂRCARE CONȚINUT SUPLIMENTAR * /
$ (document) .ready (function () alert ('Este timpul să încărcați conținut suplimentar');
>);
Vom reda funcția noastră pentru ao face utilă. Pentru aceasta, trebuie să ne plimbăm prin cheile câmpurilor de tip hash ale obiectului nostru și să încărcăm conținutul corespunzător în blocurile corespunzătoare.
/ * ÎNCĂRCARE CONȚINUT SUPLIMENTAR * /
$ (document) .ready (funcția () pentru (k în to_load) $ (k) .load (to_load [k]);
>
>);
În principiu, totul funcționează deja. Dar vreau estetica. Trebuie să lăsăm utilizatorul să știe că încă încărcăm ceva. De obicei, pentru aceasta este folosită o imagine GIF. Să nu ne abatem de tradiție. Deci, să afișăm imaginea gif a încărcăturii în toate blocurile.
/ * ÎNCĂRCARE CONȚINUT SUPLIMENTAR * /
$ (document) .ready (funcția () pentru (k în to_load) $ (k) .append ('');
>
pentru (k în to_load) $ (k) .empty ();
$ (k). încărcare (to_load [k]);
>
>);
Totul! Pagina noastră este gata! În primul rând, după cum vrem noi, descărcați rapid conținutul potrivit, atât de iubit de motoarele de căutare și de utilizatorul atât de necesar și apoi să încărcați totul. Și dacă utilizatorul apasă Esc, descărcarea se oprește și salvează traficul.
Aici aici o contrapunere. Se pare că este simplu și fără zgomot inutil, am optimizat pagina pentru motoarele de căutare și pentru utilizatori simultan. Urmează anumite întrebări. De exemplu, Yandex nu va deranja pentru o astfel de îngrijire cu privire la utilizatori? Sunt fotografiile descărcate în acest fel stocate în cache? Și oricum, este realist să aplicăm acest lucru în practică, mai degrabă pe site-uri obișnuite decât pe aplicații pe Internet?
Să încercăm să răspundem la câteva dintre întrebările care au apărut.
Răspunsuri la întrebări
Vor fi cacate piesele obținute cu Ajax?
Este dificil și depinde de implementare. Dacă accesați scriptul pentru piese, totul depinde de antetele pe care le trimiteți la browser.
Dacă faceți așa cum fac eu, adică să încărcați html-ki, atunci totul este complicat. Problema este că IE cache aceste piese, și le apucă destul de strâns, așa că, dacă ați lovit Ctrl + R (reîncărcarea pagina ocolind cache), piesele vor fi încă luate din memoria cache.
Alte browsere nu cachează conținutul astfel obținut, cu excepția cazului în care se specifică altfel în mod explicit în antetele de răspuns ale serverului.
Va deranja un astfel de Yandex?
Cred că nu. Yandex interzice, de obicei, pentru înlocuirea conținutului. Adică atunci când un bot alimentează o pagină și utilizatorul vede alta. În acest caz, atât botul, cât și utilizatorul văd același lucru. Doar utilizatorul are ocazia să vadă mai multe. În orice caz, așteptați și vedeți.
Este realist să se aplice încărcarea dinamică a conținutului de pe partea clientului pe site-urile obișnuite?
Cred că da. Trebuie doar să vă obișnuiți și să vă adaptați. În orice caz, cred că va fi mai exact să descărcați elemente statice repetate pe fiecare pagină. În acest caz, caching-ul se va juca în mâinile noastre. Apelurile multiple la serverele de server, în acest fel, vor genera o încărcare mare pe server, ceea ce va afecta performanța acestuia. Prin urmare, vă sfătuiesc să încărcați html-slices statice. Asta este, folosiți această abordare ca "client SSI".
Puteți, desigur, descărca în acest fel piesele generate de scriptul serverului. Dar dacă serverul începe să încetinească - nu spune că nu te-am avertizat;)
Ce se întâmplă dacă utilizatorul are JS dezactivat?
Nu se va întâmpla nimic critic. Doar utilizatorul nu va primi conținut suplimentar, dar va primi doar ceea ce a fost inițial în pagina de cod. Acest lucru ar trebui să i se potrivească, teoretic, pentru că el a limitat deliberat funcționalitatea browserului său, aici site-ul a limitat-o în capacitățile unora. Dar acest lucru nu este important, deoarece un astfel de utilizator, cu designul corespunzător al paginii, va avea în continuare acces la conținut și navigație.