Aceste zile, cu conexiuni în bandă largă normă, nu avem nevoie să ne îngrijorăm la fel de mult despre viteza internetului sau despre fișierul paginilor noastre. Cu toate acestea, asta nu înseamnă că nu trebuie încă să facem acest lucru. Dacă doriți să reduceți timpii de încărcare de pe serverul dvs., să micșorați numărul de cereri HTTP și să faceți acest bit suplimentar pentru vizitatorii dvs., există câteva tehnici pe care le puteți utiliza. Acest tutorial acoperă o serie de trucuri PHP, inclusiv caching și compresie.

1. Amalgamarea CSS cu PHP

În calitate de dezvoltatori web, deseori ne despărțim CSS-ul între mai multe fișiere separate pentru a păstra o separare logică și pentru a face modificările mai ușoare. Cu toate acestea, acest lucru crește numărul de cereri către server, ceea ce duce la o încărcare mai lentă a paginii. Folosind unele PHP putem avea cele mai bune din ambele lumi; păstrând mai multe fișiere în capătul nostru și utilizând o cerere pentru a le recupera pe toate.

preparare

Înainte de a putea optimiza fișierele CSS, vom avea nevoie de un CSS la care să lucrăm! Deci, să facem trei fișiere și să punem niște CSS în ele.

 // main.css // Doar un exemplu de corp CSS width: 800px; marja: 0 auto; culoare: gri;  #wrapper margin-top: 30px; fundal: url (... /images/cats.png);  

 // typography.css // Doar un exemplu de corp CSS font-family: Arial, san-serif; font-weight: bold;  puternic font-size: 120%;  

 // forms.css // Doar câteva exemple de formulare CSS position: relative; top: 400px; z-index: 99;  intrare height: 50px; lățime: 400px;  

PHP

Trebuie să obținem conținutul acestor fișiere și să le adăugăm unul la altul într-o ordine specificată. Deci, scriptul nostru trebuie să primească numele fișierelor CSS prin intermediul parametrilor URL, să deschidă toate fișierele și să le pună împreună. O explicație a codului urmează.

  fișier $) $ fișiere [$ key] = str_replace (array ('/', '\\', '.'), $ $) $ $ cssData = "; foreach ($ fișiere ca fișier $) $ cssFileName = $ cssPath. fișier $. “.Css'; fișierul $ fileHandle = fopen ($ cssFileName, 'r'); $ cssData. = "\ n". fread ($ fileHandle, dimensiunea fisierului ($ cssFileName)); fclose ($ filehandle);  // Spuneți browser-ului că avem un fișier CSS și trimiteți datele. antet ("Tip de conținut: text / css"); dacă (isset ($ cssData)) echo $ cssData; echo "\ n \ n // Generat:". data ( "r");  altceva echo "// Fișierele nu sunt disponibile sau nu sunt specificate fișiere."; ?> 

Sparge-o

Arată destul de complicat, dar stai cu mine, e foarte simplu.

  fișier $) $ fișiere [$ key] = str_replace (array ('/', '\\', '.'), 

Această bucată de cod stabilește calea pentru dosarul CSS și verifică dacă ni s-au trimis unele fișiere pentru a lucra cu. Calea CSS trebuie să aibă șanțuri posterioare, altfel ne vom găsi cu greutăți în galeți. Dacă vrem, am putea verifica automat o slash și adăugăm-o dacă este necesar. Cu toate acestea, pentru simplitate am omis acest comportament.

Apoi verificăm fiecare nume de fișier și eliminăm orice opriri și / sau tăieturi complete. Acest lucru împiedică utilizatorii să navigheze sistemul de fișiere prin trecerea unor nume de fișiere precum "... / ... / secret / file".

 $ cssData = "; foreach ($ fișiere ca fișier $) $ cssFileName = $ cssPath. $ fișier" .css '; $ fileHandle = fopen ($ cssFileName,' r '); $ cssData. fread ($ fileHandle, fișier ($ cssFileName)); fclose ($ fileHandle); 

Acum trebuie să construim datele noastre CSS din fișierele individuale. Pentru a face acest lucru, vom trece prin matricea fișierelor cu foreach, deschideți fiecare fișier și adăugați conținutul pe datele noastre. "\ N" adaugă pur și simplu un caracter de linie nouă pentru a păstra lucrurile frumoase și ordonate. Funcția file size () este utilizată pentru a găsi lungimea fișierului astfel încât să putem spune fread () cât de mult dorim (întregul fișier).

 // Spuneți browserului că avem un fișier CSS și trimiteți datele. antet ("Tip de conținut: text / css"); dacă (isset ($ cssData)) echo $ cssData; echo "\ n \ n // Generat:". data ( "r");  altceva echo "// Fișierele nu sunt disponibile sau nu sunt specificate fișiere."; ?> 

Ultimul bit al scriptului este să trimită datele CSS în browser. Aceasta înseamnă că trebuie să-i spunem PHP că trimitem date CSS și că ar trebui să informeze browserul. Facem acest lucru cu funcția antet, setând tipul de conținut la "text / css". Apoi trimitem CSS clientului. Mai întâi verificăm dacă există date CSS pe care să le trimiteți. Dacă nu există, înseamnă că nu au fost trimise nume de fișiere CSS. Dacă acesta este cazul, pur și simplu răspundem cu un comentariu CSS spunând astfel. Dacă, totuși, avem unele date de trimis, atunci le trimitem și adăugăm un mesaj detaliat când a fost generat. Dacă v-ați dorit, de exemplu, să adăugați câteva informații despre drepturile de autor la toate CSS-urile dintr-o dată, atunci acesta ar fi un loc ideal.

Punerea la test

Bine, acum este timpul să testați scenariul; trebuie să construim mai întâi o structură de directoare și apoi să plasăm scriptul și fișierele CSS. Aruncați o privire la imaginea de mai jos și încercați să reproduceți structura respectivă. Dacă doriți ceva diferit, nu uitați să schimbați căile pentru a reflecta aceste schimbări.

Odată ce totul este în locul potrivit, ne putem testa scenariul. Structura directorului va trebui să fie plasată în folderul "htdocs" sau "www" al unui server web cu PHP (în prezent, aproape orice server de web). Navigați la fișierul index.php. Ar trebui să fiți întâmpinați de un singur comentariu: "Fișierele nu sunt disponibile sau nu sunt specificate fișiere". Aceasta înseamnă că nu am dat nici un fișier pentru ca aceasta să se împrăștie. Cu toate acestea, vestea bună este că acesta este un comentariu valid CSS și nu va provoca probleme.

Să dăm ceva puțin mai dificil; tastați în 'index.php? q [] = principal', ar trebui să obțineți CSS din fișierul principal.css și un aviz în partea de jos.

Dacă dorim să tragem mai multe fișiere împreună (deoarece acesta era cu adevărat întregul punct al scriptului), putem trimite această solicitare: 'index.php? Q [] = main & q [] = formulare'. După cum puteți vedea, putem repeta "q [] =" de câte ori ne dorim, deoarece adaugă fiecare valoare unei matrice. Ați putea adăuga împreună 50 de fișiere CSS dacă doriți să utilizați acest script.

perfectare

Utilizarea acestei metode poate fi foarte utilă și poate oferi beneficii cum ar fi posibilitatea de a avea o foaie de stil implicită pentru fiecare pagină și un fișier CSS suplimentar pentru paginile cu formulare. Este, de asemenea, ușor de implementat dacă deja utilizați un fel de procesare CSS cu PHP. Dacă doriți, puteți chiar să redenumiți index.php la index.css atât timp cât configurați .htaccess pentru a trata fișierele CSS ca PHP.

S-ar putea să observați că eu tratez diferite ordine de fișiere CSS ca fiind diferite. Acest lucru se datorează faptului că ați dori să aveți o singură foaie de stil suprascrisă de altul și, prin urmare, ordinea fișierelor este importantă. Dacă aceasta nu este o problemă pentru dvs., este posibil să doriți să efectuați o funcție de sortare pe matricea fișierelor înainte de procesare.

Doar un cuvânt de prudență; dacă plasați fișierul index.php în alt dosar decât cel care conține CSS, atunci trebuie să scrieți căile relative de fundal ca și cum index.php a fost foaia dvs. de stil. Acesta este motivul pentru care browserul crede că este. În mod alternativ, puteți adăuga un cod pentru a rescrie aceste adrese URL, cu toate acestea, care depășește domeniul de aplicare al acestui tutorial.

2. Eliminarea spațiului alb din HTML și CSS

Mulți dintre noi folosesc cantități mari de spațiu alb când scriem coduri. Vestea bună este că spațiul alb din PHP nu este trimis la browser. Cu toate acestea, se face în HTML.

Browserele tind să afișeze doar un spațiu, indiferent câte file utilizați în codul dvs. Aceasta înseamnă că există o lățime de bandă pierdută. Cu toate acestea, cu unele simple PHP putem elimina această lățime de bandă leeching spații libere.

preparare

Încă o dată, vom avea nevoie de câteva date brute pentru a lucra cu; copiați exemplul HTML și codul CSS de mai jos. Salvați următoarele într-un fișier .htm și .css într-un director din directorul webroot al serverului dvs..

        
 
 
Pisoii de vânzare!
 
 Există o mulțime de spații aici! Dar trebuie să scăpăm de ele! 
 
 
 Lorem Ipsum dol ... 
 
   

 corp min-height: 800px; fundal: negru; font-size: 18px;  #wrapper width: 960px; margine: 20 pixeli automat; padding: 15px;  #header h1 text-indent: -99999em; fundal: url (... /images/header.png); afișare: bloc; lățime: 100%; înălțime: 48px;  #mainbody font-weight: bold;  

PHP

Unul dintre avantajele acestei metode este acela că același script va funcționa atât cu HTML, cât și cu CSS. Scriptul nostru trebuie să accepte un nume de fișier ca parte a cererii. Odată ce fișierul a fost încărcat, acesta trebuie să îndepărteze toate spațiile libere până la un singur caracter spațiu. Acest lucru se datorează faptului că nu dorim să eliminăm toate spațiile dintre cuvinte!

Încă o dată, este o grămadă de PHP aici, dar voi trece cu atenție prin ea.

O privire mai atentă

Acesta nu este atât de complicat, dar vom continua să ne despărțim și să ne asigurăm că înțelegem ce se întâmplă.

Obținem numele fișierului prin intermediul unui parametru trecut cu cererea GET și verificând pentru a vă asigura că acesta este un tip de fișier permis. Apoi continuăm să preluăm datele și să le procesăm pentru a elimina spațiile excesive. Această metodă este relativ primitivă și nu va elimina toate spațiile goale inutile, dar se va ocupa de cea mai mare parte a acesteia în doar câteva rânduri de cod!

  
Acest fragment stabilește doar câteva variabile. Încă o dată, transmitem datele noastre prin "q", deoarece este frumos și scurt. Acest lucru ne oferă, de asemenea, un loc pentru a defini directorul nostru de fișiere și extrageți extensia de fișier. Funcția explode () rupe numele fișierului ori de câte ori vede un "." și pune biții într-o matrice.
 
 dacă $ ext! = 'css' ȘI $ ext! = 'htm' ȘI $ ext! = 'html') // Verificați dacă oamenii răi ... mor ("Hackeri ...!");  altceva  
 
Aici verificăm să vă asigurați că fișierul este fie CSS, fie HTML. Dacă ar fi altceva, s-ar putea să ne găsim dându-i hackerilor o gaură în site-ul nostru ca să le arătăm settings.php! Deci, după ce le-am dat hackerilor posibilitatea de a trece la prelucrarea datelor noastre!
 
 // Să se ducă la afaceri $ handle = fopen ($ fileName, 'r'); $ fileData = fread ($ mâner, file size ($ fileName)); // Acum, pentru unele regex wizzardry! $ ($ ext == 'css') antet ("Content-type:") text / css "); echo $ newData;?> 
 
Acum, pentru atracția principală; tot ceea ce facem cu adevărat aici este deschiderea dosarului și citirea lui - așa cum am făcut-o în primul scenariu - și apoi extragerea cât mai multor spații libere posibil. Acest lucru se realizează printr-o expresie regulată relativ simplă care caută prin fișier spațiile, filele sau liniile noi și apoi le înlocuiește cu un singur spațiu.
 
În cele din urmă trimitem datele, stabilind antetele necesare dacă avem de-a face cu CSS.
 
Dar funcționează?
 
Dacă intrați în browser și navigați la "index.php? Q = css.css" ar trebui să vedeți o linie de CSS în pagină. Acest lucru arată că totul este bine! De asemenea, putem vedea același efect asupra codului sursă pentru exemplul html. De fapt, în exemplul mic, am redus un fișier CSS de 314 de caractere până la 277 de caractere și un fișier html de 528 de caractere până la 448 de caractere. Nu este rău pentru 15 linii de cod.
  
Concluzie
 
Deci, acesta este un bun exemplu al modului în care putem face foarte mult cu foarte puține lucruri. Dacă aveți o privire asupra sursei de pagini ca Google, veți observa că acestea nu au aproape nici un spațiu alb, deoarece, atunci când primiți milioane de cereri, se adaugă câteva kilobyte suplimentare pe cerere. Din păcate, cei mai mulți dintre noi nu sunt norocoși! 
 
3. Caching în PHP Scripts
 
În această parte, vă voi arăta cum să "actualizați" caching-ul în script-urile dvs. folosind scriptul de mai sus ca exemplu. Scopul este de a accelera lucrurile prin faptul că nu trebuie să regenerați datele de fiecare dată când cineva solicită un fișier. Generarea conținutului la fiecare solicitare este doar o pierdere, mai ales pe date statice, cum ar fi CSS-ul nostru.
 
Pentru a adăuga cache, trebuie să adăugăm trei lucruri la scenariul nostru. În primul rând, trebuie să colectăm datele introduse în script și să generăm un nume de fișier unic setului de intrări. În al doilea rând, trebuie să căutăm un fișier cache și să vedem dacă acesta este suficient de recent. În cele din urmă, trebuie fie să folosim copia stocată în cache, fie să generăm conținut nou și să îl stocăm în memoria cache pentru data viitoare.
  
Întreruperea fluxului
 
Această parte a procesului depinde într-adevăr de scenariul individual, totuși voi arăta unde voi rupe fluxul acestui script pentru cache.
 
  
 
Punerea în acțiune
 
Acum vom scrie codul pentru cache în acest script. Voi arăta mai întâi scenariul realizat și apoi veți trece prin fiecare piesă. 
  (timp () - 86400)) $ cacheHandle = fopen ($ cacheName, 'r'); $ newData = fread ($ cacheHandle, dimensiune fisier ($ cacheName)); fclose ($ cacheHandle); $ isCached = TRUE;  altceva // Ajunge la afaceri $ handle = fopen ($ fileName, 'r'); $ fileData = fread ($ mâner, file size ($ fileName)); // Acum, pentru vrăjitoria regex! $ cacheHandle = fopen ($ cacheName, 'w +'); fwrite ($ cacheHandle, $ newData); $ newData = preg_replace ('/ \ s + /', $ $ fileData); ($ cacheHandle); $ isCached = FALSE; // Timpul de ieșire a datelor dacă ($ ext == 'css') header ("Content-type: text / css" echo "// Recuperat din fișierul cache. \ n "; altceva if ($ isCached) echo '„;  echo $ newData; ?> 
 
Explicatia
 
Acesta este un pic mai complicat și puțin mai probabil să te lasă să te scarpinți. Dar nu vă faceți griji, nu s-au schimbat prea multe și vom trece prin fiecare secțiune. O caracteristică suplimentară pe care am inclus-o este revigorarea cache-ului la fiecare 24 de ore. Acest lucru este util, dacă schimbați ceva, puteți să așteptați 24 de ore sau pur și simplu să goliți directorul cache. Dacă doriți un interval diferit de reîmprospătare, calculați-l doar în câteva secunde.
 
 $ cacheName = './cache/'. $ nameExplode [0]. $ nameExplode [1]. „Tmp“; 
 
Acest cod de biți primește numele și extensia fișierului, le lipeste împreună și adaugă directorul de cache și extensia ".tmp" potrivită.
 
 dacă (file_exists ($ cacheName) și filemtime ($ cacheName)> (time () - 86400)) $ cacheHandle = fopen ($ cacheName, 'r'); $ newData = fread ($ cacheHandle, dimensiune fisier ($ cacheName)); fclose ($ cacheHandle); $ isCached = TRUE;  altceva  
 
Aici verificăm dacă avem un fișier de memorie cache salvat și dacă fișierul cache a fost creat în decurs de 24 de ore. Dacă ambele aceste condiții sunt îndeplinite, atunci deschidem fișierul și extragem conținutul acestuia pentru a înlocui ieșirea scripturilor. Am setat, de asemenea, $ isCached la true astfel încât să putem scoate niște mesaje la sfârșit.
 
 // Permite cache-ul! $ cacheHandle = fopen ($ cacheName, 'w +'); fwrite ($ cacheHandle, $ newData); fclose ($ cacheHandle); $ isCache = FALSE;  
 
Acum suntem caching-ul de ieșire a script-ul pentru a ne folosi în cererile ulterioare. Deschidem pur și simplu un fișier în modul de scriere, aruncăm datele în el și apoi îl închidem. În mod strict nu trebuie să închideți fișiere în PHP, dar este considerat o practică bună, așa că am făcut-o aici.
 
 // Timpul de ieșire a datelor. dacă ($ ext == 'css') antet ("Content-type: text / css"); dacă ($ isCached) echo "// Recuperat din fișierul cache. \ n";  altceva if ($ isCached) echo '„;  
 
Aceasta este o altă parte a scriptului care a fost modificat puțin, astfel încât să putem oferi feedback prin browser. Dacă fișierul a fost preluat din memoria cache, putem adăuga un mesaj la ieșirea scriptului. Observați că mesajul pentru scripturile CSS are "\ n" la sfârșit. Acest lucru se datorează faptului că personajele // // comentează întreaga noastră linie și '\ n' împinge totul pe altă linie. Dacă doriți să dezactivați mesajele, tot ce trebuie să faceți este să comenteze linia '$ isCached = TRUE;.
 
Dându-i un Whirl
 
Dacă vom folosi din nou scriptul nostru, nu vom observa nicio modificare până când nu vom reîmprospăta a doua oară când vom vedea un mesaj care spune că fișierul a fost extras din memoria cache. Succes dulce! Această configurare de cache poate fi aplicată și pentru primul script, cu puțină modificare, însă aceasta este lăsată ca un exercițiu pentru cititor.
  
perfectare
 
A fi capabil să adăugați rapid caching simplu dar eficient la orice script pe care lucrați este o abilitate extrem de utilă. Acesta adaugă doar un bit suplimentar la script, reducând sarcina pe serverul dvs. și accelerând site-ul pentru utilizatori. Acum asta e câștigul câștigător! 
Rezumând-o
 
În acest tutorial v-am arătat câteva moduri la îndemână, dar simple pentru a vă grăbi site-ul cu un pic de PHP. Chiar sper că le veți găsi utile și că le puteți aplica la un proiect în viitor. Cum îmbunătățiți performanța site-ului dvs.?
 
 
Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.
 
 
 
 



		
			
	   
	




Cod