ഇൻറർനെറ്റ് കണക്ഷൻ വേഗത വർദ്ധിക്കുന്നതിനൊപ്പം ഡെസ്ക്ടോപ്പിൻ്റെ മാത്രമല്ല ശക്തിയുടെ വർദ്ധനവും മൊബൈൽ ഉപകരണങ്ങൾവെബ് പേജുകൾ ഭാരമേറിയതായി മാറുന്നു. ബന്ധിപ്പിച്ച ഫയലുകളുടെ എണ്ണവും വലുപ്പവും വർദ്ധിച്ചുകൊണ്ടിരിക്കുന്നു: JavaScript ഫയലുകൾ, css ഫയലുകൾ, ഇമേജുകൾ, മൂന്നാം കക്ഷി സൈറ്റ് വിജറ്റുകൾ, iframes. ഓൺ ഈ നിമിഷംബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിൻ്റെ പ്രത്യേകത, ഒരു js ഫയൽ ലോഡുചെയ്യുമ്പോൾ, സ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യുന്നതുവരെ റെൻഡറിംഗ് തടഞ്ഞിരിക്കുന്നു. ആധുനിക ബ്രൗസറുകൾവി പശ്ചാത്തലംപ്രമാണം പാഴ്‌സ് ചെയ്യുകയും സ്ക്രിപ്റ്റുകളും ശൈലികളും ഡൗൺലോഡ് ചെയ്യുകയും ചെയ്യും, എന്നാൽ റെൻഡറിംഗ് തടയപ്പെടും. താരതമ്യം നെറ്റ്വർക്ക് പരാമീറ്ററുകൾവേണ്ടി വ്യത്യസ്ത ബ്രൗസറുകൾ browserscope.org-ൽ കാണാവുന്നതാണ്. തടയൽ പൂർണ്ണമായും ഇല്ലാതാക്കാൻ ഞങ്ങൾക്ക് കഴിയില്ല, പക്ഷേ നമുക്ക് സെർവർ ഒപ്റ്റിമൈസ് ചെയ്യാം ക്ലയൻ്റ് ഭാഗംറെൻഡർ തടയൽ ഏറ്റവും കുറഞ്ഞ സമയമെടുക്കുന്ന തരത്തിൽ ആപ്ലിക്കേഷൻ.

സെർവർ സൈഡ് പരിഹാരങ്ങൾ:
- കൈമാറ്റം ചെയ്ത ഫയലുകളുടെ വലുപ്പം കുറയ്ക്കുക
- CDN ഉപയോഗിക്കുക
- എടുത്തുകൊണ്ടുപോവുക സ്റ്റാറ്റിക് ഫയലുകൾഒരു പ്രത്യേക ഡൊമെയ്‌നിലോ ഒരു ഡൊമെയ്‌നിന് കീഴിലോ, അങ്ങനെ എണ്ണം വർദ്ധിക്കുന്നു ഒരേസമയം കണക്ഷനുകൾബ്രൗസർ.
- ട്രാൻസ്ഫർ ചെയ്ത ഫയലുകളുടെ കംപ്രഷൻ പ്രവർത്തനക്ഷമമാക്കുക (gzip)

ഉപഭോക്തൃ വശത്തിനുള്ള പരിഹാരങ്ങൾ:
- അഭ്യർത്ഥനകളുടെ എണ്ണം കുറയ്ക്കുക.
- ഉപയോഗിച്ച് ക്ലയൻ്റ് വശത്തുള്ള ഫയലുകൾ കാഷെ ചെയ്യുക തലക്കെട്ടുകൾ കാലഹരണപ്പെടുന്നുഎടാഗുകളും.
- പൊതുവായി ലഭ്യമായ CDN-കൾ ഉപയോഗിക്കുക (Google CDN, Yandex CDN). അതിനാൽ പൊതു CDN-ൽ നിന്നുള്ള ഫയൽ ഇതിനകം തന്നെ ബ്രൗസർ കാഷെയിൽ സംഭരിക്കപ്പെടാനുള്ള സാധ്യതയുണ്ട്.

സൈറ്റ് ലോഡിംഗ് വേഗത ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ഒരു മാർഗ്ഗം, റെൻഡറിംഗ് തടയാത്ത ഫയലുകൾ അസമന്വിതമായി ലോഡ് ചെയ്യുക എന്നതാണ്.

JavaScript അസിൻക്രണസ് ലോഡിംഗ് സ്ക്രിപ്റ്റ്:

(function() (var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "ഫയൽ URL"; document.getElementsByTagName("head") .appendChild(script); ))();

ഉള്ളടക്കം, ചിത്രങ്ങൾ, സ്റ്റൈൽ ഫയലുകൾ എന്നിവയുൾപ്പെടെ മുഴുവൻ പേജും ലോഡ് ചെയ്തതിന് ശേഷം JavaScript എക്സിക്യൂട്ട് ചെയ്യേണ്ടതുണ്ടെങ്കിൽ ബാഹ്യ സ്ക്രിപ്റ്റുകൾ, തുടർന്ന് നിങ്ങൾ ലോഡറിലേക്ക് ഓൺലോഡ് ഇവൻ്റിനായുള്ള ട്രാക്കിംഗ് ചേർക്കേണ്ടതുണ്ട്.

എങ്കിൽ (window.addEventListener) ( window.addEventListener ("ലോഡ്", async_load, false); ) അല്ലെങ്കിൽ (window.attachEvent) എങ്കിൽ ( window.attachEvent("onload", async_load); )

ജാവാസ്ക്രിപ്റ്റ് അസിൻക്രണസ് ലോഡിംഗ് സ്ക്രിപ്റ്റ്, ഓൺലോഡ് ഇവൻ്റ് (ഫംഗ്ഷൻ() (ഫംഗ്ഷൻ async_load())(var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s .src = "ഫയൽ URL"; document.getElementsByTagName("head").appendChild(script); ) എങ്കിൽ (window.addEventListener) (window.addEventListener("load", async_load, false); ) ഇല്ലെങ്കിൽ (window.attachEvent ) ( വിൻഡോ .attachEvent("onload", async_load); )))();

എന്നാൽ ഒരൊറ്റ ഫയൽ ഡൗൺലോഡ് ചെയ്യേണ്ടിവരുമ്പോൾ ഇതൊരു ഒറ്റപ്പെട്ട കേസാണ്. പലപ്പോഴും പ്രായോഗികമായി പല ഫയലുകളും ബന്ധിപ്പിച്ചിരിക്കുന്നു.

ഒന്നിലധികം കണക്ടറുകൾ അസമന്വിതമായി ലോഡുചെയ്യുന്നതിനുള്ള സ്‌ക്രിപ്റ്റ് JavaScript ഫയലുകൾ(ഫംഗ്ഷൻ() (ഫംഗ്ഷൻ async_load())( [ "URL_1.js", "URL_2.js", "URL_3.js" ].forEach(function(src) (var s = document.createElement("script"); സെ ( "ലോഡ്", async_load, false); ) ഇല്ലെങ്കിൽ (window.attachEvent) ( window.attachEvent("onload", async_load); ) ))();

എന്നാൽ ഈ നടപ്പാക്കലിൽ ഒരു മൈനസ് ഉണ്ട് - സ്ക്രിപ്റ്റുകൾ ക്രമരഹിതമായ ക്രമത്തിൽ ലോഡ് ചെയ്യും, അതനുസരിച്ച്, അവ ക്രമരഹിതമായി കൃത്യസമയത്ത് നടപ്പിലാക്കും. ഈ സ്ക്രിപ്റ്റ്എങ്കിൽ അസിൻക്രണസ് ലോഡിംഗ് അനുയോജ്യമാണ് ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂഷൻഫയലുകൾ പരസ്പരം ആശ്രയിക്കുന്നില്ല, DOM-നെ ആശ്രയിക്കുന്നില്ല. അല്ലെങ്കിൽ, അതിൻ്റെ ഉപയോഗം പേജിലെ പിശകുകളിലേക്കോ അപ്രതീക്ഷിത നിർവ്വഹണ ഫലങ്ങളിലേക്കോ നയിച്ചേക്കാം. ക്രമാനുഗതമായ നിർവ്വഹണത്തിന്, എന്നാൽ അസമന്വിത ഡൗൺലോഡിംഗിനായി, നിങ്ങൾ async=false എന്ന് വ്യക്തമാക്കേണ്ടതുണ്ട്, തുടർന്ന് ഫയലുകൾ ക്രമരഹിതമായ ക്രമത്തിൽ ഡൗൺലോഡ് ചെയ്യപ്പെടും, പക്ഷേ ക്രമത്തിൽ എക്സിക്യൂട്ട് ചെയ്യപ്പെടും.

HTML 5. അസിൻക്രണസ് ജാവാസ്ക്രിപ്റ്റ് ലോഡിംഗ്

HTML 5 സ്റ്റാൻഡേർഡ് ജാവാസ്ക്രിപ്റ്റിൻ്റെ അസിൻക്രണസ് ലോഡിംഗിനെ പിന്തുണയ്ക്കുന്നു. അസിൻക് അല്ലെങ്കിൽ ഡിഫർ കീവേഡ് ചേർത്തുകൊണ്ട് ഇത് ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്:

ഡിഫർ ആട്രിബ്യൂട്ടുമായി ബന്ധിപ്പിച്ചിട്ടുള്ള ഒരു സ്‌ക്രിപ്റ്റ് മറ്റ് സ്‌ക്രിപ്റ്റുകളുമായി ബന്ധപ്പെട്ട് എക്‌സിക്യൂഷൻ ക്രമം തടസ്സപ്പെടുത്താതെ എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടുകയും അതിൻ്റെ എക്‌സിക്യൂഷൻ പിന്നീട് സംഭവിക്കുകയും ചെയ്യും മുഴുവൻ ലോഡ്കൂടാതെ പേജ് പാഴ്‌സ് ചെയ്യുന്നു, പക്ഷേ DOMContentLoaded എന്ന് വിളിക്കുന്നതിന് മുമ്പ്.

async ആട്രിബ്യൂട്ടുമായി ബന്ധിപ്പിച്ചിട്ടുള്ള ഒരു സ്‌ക്രിപ്റ്റ്, അത് പൂർണ്ണമായി ലോഡുചെയ്‌തതിന് ശേഷം എത്രയും വേഗം എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടും, എന്നാൽ വിൻഡോ ഒബ്‌ജക്റ്റ് ലോഡുചെയ്യുന്നതിന് മുമ്പ് ഡോക്യുമെൻ്റ് പാഴ്‌സ് ചെയ്യപ്പെടുന്നതുവരെ അത് കാത്തിരിക്കുന്നില്ല. സ്ക്രിപ്റ്റുകൾ കണക്റ്റുചെയ്തിരിക്കുന്ന അതേ ക്രമത്തിൽ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുമെന്ന് ബ്രൗസറുകൾ ഉറപ്പുനൽകുന്നില്ല.

അസിൻക്രണസ് JavaScript ലോഡിംഗിനുള്ള ലൈബ്രറികൾ

RequireJS ഒരു JavaScript ലോഡിംഗ് മൊഡ്യൂളാണ്. ബ്രൗസറുകൾക്കായി ഒപ്റ്റിമൈസ് ചെയ്‌തു, പക്ഷേ നോഡ്, റിനോ പോലുള്ള മറ്റ് പരിതസ്ഥിതികളിൽ ഇത് ഉപയോഗിക്കാൻ കഴിയും.

ആവശ്യമാണ്(["സ്ക്രിപ്റ്റ്"], ഫംഗ്ഷൻ(സ്ക്രിപ്റ്റ്) ( console.log("സ്ക്രിപ്റ്റ്.js ലോഡ് ചെയ്തതിന് ശേഷം ആരംഭിക്കുക"); ));

extsrc.js എന്നത് പേജ് ലോഡുചെയ്‌ത് ഉപയോക്താവിന് പ്രദർശിപ്പിച്ചതിന് ശേഷം എക്‌സിക്യൂട്ട് ചെയ്യേണ്ട സ്‌ക്രിപ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്ന ഒരു ലൈബ്രറിയാണ്. document.write ഉപയോഗിച്ച് ശരിയായി പ്രവർത്തിക്കുന്നു.

yepnope.js - JavaScript, CSS ഫയലുകൾ അസമന്വിതമായി ലോഡ് ചെയ്യാൻ അനുവദിക്കുന്നു.

Yepnope([ "script.js", "style.css" ]);

ഡൗൺലോഡ് ചെയ്യാനുള്ള എളുപ്പവഴി ജാവാസ്ക്രിപ്റ്റ് സ്ക്രിപ്റ്റുകൾ

പ്രായോഗികമായി, ഡിസ്പ്ലേ തടയാത്ത ജാവാസ്ക്രിപ്റ്റ് സ്ക്രിപ്റ്റുകളുടെ ഒപ്റ്റിമൽ ക്രോസ്-ബ്രൗസർ ലോഡിംഗ് നേടുന്നത് ബുദ്ധിമുട്ടുള്ളതും ചിലപ്പോൾ അസാധ്യവുമാണെന്ന് ഇത് മാറുന്നു. മിക്കതും ഒപ്റ്റിമൽ വഴിക്ലോസിംഗ് ബോഡി ടാഗിന് മുമ്പായി ഡോക്യുമെൻ്റിൻ്റെ അവസാനം ചേർത്തിരിക്കുന്നു. നിയന്ത്രണങ്ങൾ കാരണം വ്യത്യസ്ത ബ്രൗസറുകൾകൂടാതെ HTML തന്നെ, ഡിസ്പ്ലേ തടയാത്ത അത്തരം ഒരു ലോഡിംഗ് ഓപ്ഷൻ ഏറ്റവും ലളിതമായി കണക്കാക്കാം.

ഞാൻ 2 ഒഴിവാക്കാൻ ശ്രമിക്കുന്നു CSS ഫയൽഎൻ്റെ സൈറ്റിലെ റെൻഡറിംഗ് തടയുന്നവ - അവ ദൃശ്യമാകും Google പേജ്സ്പീഡ് ഇൻസൈറ്റുകൾ. ഞാൻ പറ്റിച്ചു വ്യത്യസ്ത രീതികൾ, അവയൊന്നും വിജയിച്ചില്ല. എന്നാൽ അടുത്തിടെ ഞാൻ തിങ്കിംഗ് അസിൻക് എന്നതിനെക്കുറിച്ചുള്ള ഒരു പോസ്റ്റ് കണ്ടെത്തി, ഞാൻ ഈ കോഡ് പ്രയോഗിച്ചപ്പോൾ: അത് പ്രശ്നം പരിഹരിച്ചു.

എന്നിരുന്നാലും, പ്രസിദ്ധീകരണത്തിന് ശേഷം, പേജിന് അതിൻ്റെ ശൈലി നഷ്ടപ്പെട്ടു. കോഡ് പ്രവർത്തിക്കുന്നതിനാൽ എന്താണ് സംഭവിക്കുന്നതെന്ന് എനിക്ക് തീരെ ഉറപ്പില്ല, എന്നാൽ പോസ്റ്റ്-ലോഡ് ശൈലിയാണ് പ്രവർത്തിക്കാത്തത്. ഇതിൽ നിങ്ങളുടെ സഹായത്തിന് നന്ദി. നന്ദി

4 ഉത്തരങ്ങൾ

എലമെൻ്റ് ഉപയോഗിക്കുകയും മീഡിയ ആട്രിബ്യൂട്ട് ഒരു അസാധുവായ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുകയും ചെയ്യുക എന്നതാണ് ശൈലികൾ അസമന്വിതമായി ലോഡുചെയ്യുന്നതിനുള്ള തന്ത്രം (ഞാൻ media="none" ഉപയോഗിക്കുന്നു, എന്നാൽ ഏത് മൂല്യവും പ്രവർത്തിക്കും). ഒരു മീഡിയ ചോദ്യം തെറ്റാണെന്ന് വിലയിരുത്തുമ്പോൾ, ബ്രൗസർ സ്റ്റൈൽഷീറ്റ് ലോഡുചെയ്യും, പക്ഷേ പേജ് റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് ഉള്ളടക്കം ലഭ്യമാകുന്നത് വരെ അത് കാത്തിരിക്കില്ല.

സ്റ്റൈൽഷീറ്റ് ലോഡിംഗ് പൂർത്തിയാക്കിയ ശേഷം, മീഡിയ ആട്രിബ്യൂട്ട് ഇതിലേക്ക് സജ്ജീകരിക്കണം അനുവദനീയമായ മൂല്യം, അതിനാൽ ശൈലി നിയമങ്ങൾ പ്രമാണത്തിൽ പ്രയോഗിക്കും. എല്ലാത്തിലും മീഡിയ പ്രോപ്പർട്ടി ടോഗിൾ ചെയ്യാൻ ഓൺലോഡ് ഇവൻ്റ് ഉപയോഗിക്കുന്നു:

ഈ CSS ലോഡിംഗ് രീതി സന്ദർശകർക്ക് വളരെ വേഗത്തിൽ ഉപയോഗപ്രദമായ ഉള്ളടക്കം നൽകും സ്റ്റാൻഡേർഡ് സമീപനം. ക്രിട്ടിക്കൽ CSS ഇപ്പോഴും സാധാരണ തടയൽ സമീപനത്തിൽ ഉപയോഗിക്കാൻ കഴിയും (അല്ലെങ്കിൽ നിങ്ങൾക്കത് ഇൻലൈൻ ചെയ്യാം പരമാവധി പ്രകടനം), കൂടാതെ ക്രിട്ടിക്കൽ അല്ലാത്ത ശൈലികൾ വർദ്ധിപ്പിച്ച് ലോഡുചെയ്യാനും പിന്നീട് പാഴ്‌സിംഗ്/റെൻഡറിംഗ് പ്രക്രിയയിൽ പ്രയോഗിക്കാനും കഴിയും.

ഈ രീതി JavaScript ഉപയോഗിക്കുന്നു, എന്നാൽ നിങ്ങൾക്ക് ഇനിപ്പറയുന്നതിലെ തത്തുല്യമായ തടയൽ ഘടകങ്ങൾ പൊതിഞ്ഞ് JavaScript ഇതര ബ്രൗസറുകൾ സേവിക്കാൻ കഴിയും:

www.itcha.edu.sv എന്നതിൽ നിങ്ങൾക്ക് പ്രവർത്തനം കാണാം

നിങ്ങൾക്ക് ഇത് പല തരത്തിൽ നേടാൻ ശ്രമിക്കാം:

1. മീഡിയ="ബോഗസ്", എ എന്നിവ കാലിൽ ഉപയോഗിക്കുന്നു

2. DOM പഴയ രീതി ഉൾപ്പെടെ

(function())( var bsa = document.createElement("script"); bsa.type = "text/javascript"; bsa.async = true; bsa.src = "https://s3.buysellads.com/ac / bsa.js"; (document.getElementsByTagName("തല")||document.getElementsByTagName("ശരീരം")).appendChild(bsa); ))();

3. നിങ്ങൾക്ക് പ്ലഗിനുകൾ പരീക്ഷിക്കാൻ കഴിയുമെങ്കിൽ, നിങ്ങൾക്ക് CSS ലോഡ് ചെയ്യാൻ ശ്രമിക്കാം

// ഇവിടെ loadCSS ഉൾപ്പെടുത്തുക... ഫംഗ്‌ഷൻ loadCSS(href, മുമ്പ്, മീഡിയ)( ... ) // ഒരു ഫയൽ ലോഡ് ചെയ്യുകCSS("path/to/mystylesheet.css");

ലിങ്ക് ഘടകങ്ങൾക്കായുള്ള പ്രീലോഡ് കീവേഡാണ് ഭാവിയെന്ന് തോന്നുന്നു.

സമന്വയ പതിപ്പ്

അസിൻക് പതിപ്പ്

നിർഭാഗ്യവശാൽ...

ഈ സവിശേഷതയെ ഇതുവരെ പിന്തുണയ്‌ക്കാത്ത ശ്രദ്ധേയമായ ബ്രൗസറുകളിൽ എഡ്ജും iOS സഫാരിയും ഉൾപ്പെടുന്നു.

എങ്കിലും...

ഇന്ന് പ്രീലോഡ് ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു സാധ്യതയുള്ള പരിഹാരമായി ലോഡ്സിഎസ്എസ് കാണപ്പെടുന്നു (ഫാൾബാക്കുകൾക്കൊപ്പം).

ബ്രോഡ്‌ബാൻഡ് ഇൻ്റർനെറ്റ് ആക്‌സസിൻ്റെ വർദ്ധിച്ചുവരുന്ന വ്യാപനം ഉണ്ടായിരുന്നിട്ടും, HTML പേജുകൾ ലോഡുചെയ്യുന്നതിൻ്റെ വേഗതയുമായി ബന്ധപ്പെട്ട പ്രശ്‌നങ്ങൾ ഇപ്പോഴും നിരവധി ഇൻ്റർനെറ്റ് ഉപയോക്താക്കളോട് നിസ്സംഗത പുലർത്തുന്നില്ല, പ്രത്യേകിച്ചും മുൻ സോവിയറ്റ് യൂണിയൻ്റെ വിശാലതയിൽ. CSS (കാസ്‌കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) ഈ വിഷയത്തിൽ സഹായിക്കും, ഇത് നമ്മുടെ സമയവും ട്രാഫിക്കും ലാഭിക്കും.

1. പേജ് ലേഔട്ടിനായി പട്ടികകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക

പേജ് ലേഔട്ടിന് പട്ടികകളേക്കാൾ CSS ഉപയോഗിക്കുന്നതാണ് നല്ലത് എന്നതിൻ്റെ ആറ് കാരണങ്ങൾ ഇതാ:

• ബ്രൗസറുകൾ ടേബിളുകൾ രണ്ടുതവണ പാഴ്‌സ് ചെയ്യുന്നു: ഒരു തവണ പട്ടികയുടെ ഘടന വിലയിരുത്തുന്നതിനും ഒരിക്കൽ അതിൻ്റെ ഉള്ളടക്കം നിർണ്ണയിക്കുന്നതിനും.
• ടേബിളുകൾ ഉടനടി പൂർണ്ണമായി പ്രദർശിപ്പിക്കും, അവ ലോഡ് ചെയ്യുമ്പോൾ അല്ല.
• പട്ടികകൾ ഉപയോഗിക്കാൻ നിർബന്ധിതരാകുന്നു സുതാര്യമായ ചിത്രങ്ങൾനിരകളുടെ വീതി മുതലായവ നിർണ്ണയിക്കാൻ.
• CSS-ന് ഓവർലോഡ് ചെയ്ത പട്ടികകളേക്കാൾ വളരെ കുറച്ച് കോഡ് ആവശ്യമാണ്.
• എല്ലാ CSS കോഡുകളും ഒരു ബാഹ്യ ഫയലിലേക്ക് എക്‌സ്‌പോർട്ടുചെയ്യാനാകും, അത് ഒരിക്കൽ മാത്രം ലോഡ് ചെയ്യുകയും ബ്രൗസർ കാഷെയിൽ സംഭരിക്കുകയും ചെയ്യും.
• ചെയ്തത് CSS സഹായംപേജ് ഘടകങ്ങൾ ലോഡ് ചെയ്യുന്ന ക്രമം നിങ്ങൾക്ക് നിയന്ത്രിക്കാനാകും.

2. ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കാൻ ചിത്രങ്ങൾ ഉപയോഗിക്കരുത്

മിക്ക ബട്ടണുകളും ലേബലുകളും CSS ഉപയോഗിച്ച് റെൻഡർ ചെയ്യാൻ കഴിയും. ഉദാഹരണം നോക്കുക:

a:link.example, a:visited.example, a:active.example ( color:#fff; പശ്ചാത്തലം:#f90; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2 em; ബോർഡർ:4px #00f ഔട്ട്‌സെറ്റ് ) a:hover.example (color:#fff; പശ്ചാത്തലം:#fa1; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; ബോർഡർ :4px #00f ഇൻസെറ്റ്

ഈ CSS നിർവചിക്കുന്നു ലളിതമായ ബട്ടൺ, നിങ്ങൾ കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ അതിൻ്റെ രൂപം മാറുന്നു. ഈ രീതിയിൽ നിങ്ങൾക്ക് കൂടുതൽ സങ്കീർണ്ണമായ വസ്തുക്കൾ സൃഷ്ടിക്കാൻ കഴിയും.

3. CSS വഴി ചിത്രങ്ങൾ ലോഡുചെയ്യുന്നു

ചിലത് പശ്ചാത്തല ചിത്രങ്ങൾ CSS വഴി ലോഡ് ചെയ്യുന്നതാണ് നല്ലത്. ഉദാഹരണത്തിന്, 200x100 ചിത്രം പ്രദർശിപ്പിക്കുന്നതിന്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന കോഡ് ഉപയോഗിക്കാം:

ഒപ്പം അനുബന്ധ CSS:

മനോഹരമായ ചിത്രം (പശ്ചാത്തലം: url(filename.gif); വീതി: 200px; ഉയരം: 100px )

ഇത് ആദ്യം അർത്ഥശൂന്യമായി തോന്നിയേക്കാം, എന്നാൽ ഇത് യഥാർത്ഥത്തിൽ നിങ്ങളുടെ പേജ് ലോഡുചെയ്യുന്നത് വളരെ വേഗത്തിലാക്കും. ഈ സാഹചര്യത്തിൽ, എല്ലാ വാചകങ്ങളും പ്രദർശിപ്പിച്ചതിനുശേഷം മാത്രമേ ബ്രൗസർ ചിത്രം ലോഡുചെയ്യാൻ തുടങ്ങുകയുള്ളൂ, ഒരേസമയം അല്ല. ഈ രീതിയിൽ, ചിത്രം ലോഡുചെയ്യുമ്പോൾ ഉപയോക്താക്കൾക്ക് പേജിനൊപ്പം പ്രവർത്തിക്കാൻ കഴിയും.

പൂർണ്ണമായും അലങ്കാരവസ്തുക്കൾ ലോഡുചെയ്യുന്നതിന് ഈ സാങ്കേതികവിദ്യ ഏറ്റവും അനുയോജ്യമാണ്, പശ്ചാത്തല ഘടകങ്ങൾപേജുകൾ. ചിത്രം ഉള്ളടക്കത്തിൻ്റെ ഭാഗമാണെങ്കിൽ, നിങ്ങൾ തുടർന്നും IMG ടാഗ് ഉപയോഗിക്കേണ്ടതുണ്ട്.

4. സന്ദർഭോചിതമായ ശൈലികൾ ഉപയോഗിക്കുന്നു

ഈ കോഡ് ഫലപ്രദമല്ല:

ഇതൊരു വാക്യമാണ്

ഇത് മറ്റൊരു വാചകമാണ്

ഇതാണ് വേറെയുംവാചകം

ഇത് ഒരു വാചകം കൂടി

.ടെക്സ്റ്റ് (നിറം: #03c; font-size:2em )

ഓരോ ഖണ്ഡികയ്ക്കും ഒരു ക്ലാസ് നൽകുന്നതിനുപകരം, അവയെ ഒന്നായി തരംതിരിക്കാം DIV ഘടകംഒരേ ക്ലാസിനൊപ്പം:

ഇതൊരു വാക്യമാണ്

ഇത് മറ്റൊരു വാചകമാണ്

ഇത് മറ്റൊരു വാചകമാണ്

ഇത് ഒരു വാചകം കൂടി

.ടെക്സ്റ്റ് പി (നിറം: #03c; ഫോണ്ട്-സൈസ്:2എം)

ക്ലാസ് ടെക്‌സ്‌റ്റുള്ള ഒരു ഘടകത്തിനുള്ളിലെ ഓരോ ഖണ്ഡികയ്ക്കും #03c ൻ്റെ നിറവും 2em ഫോണ്ട് വലുപ്പവും ഉണ്ടായിരിക്കുമെന്ന് ഈ കോഡ് ബ്രൗസറിനോട് പറയുന്നു.

ഇവിടെ നിറം സൂചിപ്പിക്കുന്നത് ആറല്ല, മൂന്ന് പ്രതീകങ്ങളിൽ മാത്രമാണെന്ന് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം. IN ഈ സാഹചര്യത്തിൽ#0033cc എന്ന നിറത്തിൻ്റെ ചുരുക്കെഴുത്താണ് #03c.

5. ചുരുക്കെഴുത്തുകൾ ഉപയോഗിക്കുന്നു

ഫോണ്ട്

എഴുതുന്നതാണ് നല്ലത്:

ഫോണ്ട്: 1എം/1.5എം ബോൾഡ് ഇറ്റാലിക് സെരിഫ്

ഫോണ്ട് വലുപ്പം: 1എം; ലൈൻ-ഉയരം: 1.5എം; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്; ഫോണ്ട് ശൈലി: ഇറ്റാലിക്; font-family: serif

അതിർത്തികൾ

ബോർഡർ: 1px കറുത്ത സോളിഡ്

ബോർഡർ വീതി: 1px; അതിർത്തി നിറം: കറുപ്പ്; ബോർഡർ ശൈലി: സോളിഡ്

പശ്ചാത്തലം

പശ്ചാത്തലം: #fff url(image.gif) ഇല്ല-മുകളിൽ ഇടത് ആവർത്തിക്കുക

പശ്ചാത്തല നിറം: #fff; പശ്ചാത്തല-ചിത്രം: url(image.gif); പശ്ചാത്തലം-ആവർത്തനം: നോ-ആവർത്തനം; പശ്ചാത്തല-സ്ഥാനം: മുകളിൽ ഇടത്;

പാഡിംഗും ബോർഡറുകളും

ഉപയോഗിക്കുക:

മാർജിൻ: 2px 1px 3px 4px; (മുകളിൽ, വലത്, താഴെ, ഇടത്)

അതുപോലെ:

മാർജിൻ: 5എം 1എം 3എം; (മുകളിൽ, ഇടത്, വലത്, താഴെ)

മാർജിൻ: 5% 1%; (മുകളിലേക്കും താഴേക്കും, ഇടത്തോട്ടും വലത്തോട്ടും)

ഈ നിയമങ്ങൾ മാർജിൻ, ബോർഡർ, പാഡിംഗ് ആട്രിബ്യൂട്ടുകൾ എന്നിവയ്ക്ക് ബാധകമാണ്.

6. സ്‌പെയ്‌സുകളും ലൈൻ ബ്രേക്കുകളും കമൻ്റുകളും ചെറുതാക്കുക

ഓരോ പ്രതീകവും - അക്ഷരമോ സ്ഥലമോ - ഒരു ബൈറ്റ് എടുക്കുന്നു. ഓരോ അധിക പ്രതീകവും പേജുകളുടെ വലുപ്പം വർദ്ധിപ്പിക്കുന്നു. അതിനാൽ, ലേഔട്ട് പ്രക്രിയയിൽ എൻ്ററും ടാബും കുറച്ച് അമർത്താൻ ശ്രമിക്കുക. കൂടാതെ, CSS ശൈലികൾ സംയോജിപ്പിക്കാൻ മറക്കരുത്.

7. ആപേക്ഷിക ലിങ്കുകൾ ഉപയോഗിക്കുക

കേവല ലിങ്കുകൾ ആപേക്ഷിക ലിങ്കുകളേക്കാൾ കൂടുതൽ ഇടം എടുക്കുന്നു. കൂടാതെ, ഇത് ബ്രൗസറിൽ അധിക ലോഡ് സൃഷ്ടിക്കുന്നു, അത് കൂടുതൽ പ്രധാനമാണ്. ഉദാഹരണം സമ്പൂർണ്ണ റഫറൻസ്: . എഴുതിയാൽ കൂടുതൽ ശരിയാകും< a href=»filename.htm»>. എന്നാൽ നിങ്ങൾക്ക് ആവശ്യമുള്ള ഫയൽ മറ്റൊരു ഡയറക്ടറിയിൽ ആണെങ്കിലോ? ഈ പ്രശ്നം മനസ്സിലാക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന ചില ഉദാഹരണങ്ങൾ ഇതാ:

• — http://www.URL.com എന്ന സൈറ്റിൻ്റെ റൂട്ട് പേജിലേക്ക് വിളിക്കുന്നു
• — റൂട്ട് ഡയറക്ടറിയിൽ ഒരു പേജ് വിളിക്കുന്നു http://www.URL.com/filename.html
• — “റൂട്ട്” ഉപഡയറക്‌ടറിയിൽ ഫയൽ ചെയ്യുക http://www.URL.com/directory/filename.html
• — നിലവിലെ ഡയറക്‌ടറിയിലേക്കും index.htmlയിലേക്കും പ്രവേശനം
• — കറൻ്റ്, index.html എന്നിവയുടെ പാരൻ്റ് ഡയറക്ടറി
• - അതേ കാര്യം, ഫയലിനെ സൂചിപ്പിക്കുന്നു
• - നിലവിലെ ഒന്നിന് മുകളിലുള്ള രണ്ട് ഡയറക്‌ടറികളിൽ index.html

8. META ടാഗുകൾ ഉപയോഗിച്ച് ഭ്രമിക്കരുത്

മിക്ക META ടാഗുകളും പൂർണ്ണമായും അനാവശ്യമാണ്. നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, നിലവിലുള്ള എല്ലാ ഓപ്ഷനുകളും പരിശോധിക്കാം. സെർച്ച് എഞ്ചിൻ ഒപ്റ്റിമൈസേഷനായി ഏറ്റവും പ്രധാനപ്പെട്ട ടാഗുകൾ (കീവേഡുകളും വിവരണങ്ങളും) ഉപയോഗിക്കുന്നു. META ടാഗിൽ ഉള്ളടക്ക ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുമ്പോൾ, അത് 200 പ്രതീകങ്ങളിൽ താഴെയായി സൂക്ഷിക്കാൻ ശ്രമിക്കുക. വലിയ വിവരണങ്ങളും നിരവധി കീവേഡുകളും സെർച്ച് എഞ്ചിനുകൾക്ക് സ്പാം ആയി കാണാൻ കഴിയും.

9. CSS ഉം JavaScript ഉം വെവ്വേറെ ഫയലുകളിൽ സൂക്ഷിക്കുക

എല്ലാവർക്കും ഇത് അറിയാം, പക്ഷേ അവർ എല്ലായ്പ്പോഴും അത് ഉപയോഗിക്കുന്നില്ല. ഒരു ബാഹ്യ ഫയലിൽ നിന്നുള്ള ഒരു CSS കോൾ ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

അതനുസരിച്ച് ജാവാസ്ക്രിപ്റ്റ്:

ഏതെങ്കിലും ബാഹ്യ ഫയലുകൾ ഒരിക്കൽ മാത്രം ഡൗൺലോഡ് ചെയ്യപ്പെടുകയും തുടർന്ന് ലോക്കൽ കാഷെയിൽ സൂക്ഷിക്കുകയും ചെയ്യും. "കണക്‌റ്റുചെയ്‌ത" ബാഹ്യ ഫയലുകളുടെ എണ്ണത്തിൽ നിയന്ത്രണങ്ങളൊന്നുമില്ല.

10. ഡയറക്ടറി ലിങ്കുകളുടെ അവസാനം / (സ്ലാഷ്) സ്ഥാപിക്കുക

ഇങ്ങനെ എഴുതണം.

സ്റ്റൈൽ ഷീറ്റുകൾ ഒരു വെബ് പേജിലേക്ക് മൂന്ന് വ്യത്യസ്ത രീതികളിൽ ചേർക്കാം, അവ അവയുടെ കഴിവുകളിൽ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു.

അനുബന്ധ ശൈലി ഷീറ്റുകൾ

ഒരു സൈറ്റിനായുള്ള ശൈലികളും നിയമങ്ങളും നിർവചിക്കുന്നതിനുള്ള ഏറ്റവും ശക്തവും സൗകര്യപ്രദവുമായ മാർഗ്ഗം. ഏത് വെബ് പേജിനും ഉപയോഗിക്കാവുന്ന ഒരു പ്രത്യേക ഫയലിലാണ് ശൈലികൾ സംഭരിച്ചിരിക്കുന്നത്. അനുബന്ധ ശൈലികളുടെ ഒരു പട്ടിക ഉൾപ്പെടുത്തുന്നതിന്, പേജ് തലക്കെട്ടിൽ ഒരു ടാഗ് ഉപയോഗിക്കുക (ഉദാഹരണം 1).

ഉദാഹരണം 1: ഒരു ലിങ്ക് ചെയ്ത സ്റ്റൈൽ ഷീറ്റ് ബന്ധിപ്പിക്കുന്നു

ശൈലികൾ ഹലോ, ലോകം!

ഈ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ സ്റ്റൈൽ ഫയലിലേക്കുള്ള പാത ആപേക്ഷികമോ കേവലമോ ആകാം.

ഈ രീതിയുടെ പ്രയോജനങ്ങൾ

എത്ര വെബ് പേജുകൾക്കും ഒരു സ്റ്റൈൽ ഫയൽ ഉപയോഗിക്കുന്നു; മറ്റ് സൈറ്റുകളിലും ഇത് ഉപയോഗിക്കാൻ കഴിയും.

വെബ് പേജുകൾ പരിഷ്കരിക്കാതെ തന്നെ നിങ്ങൾക്ക് സ്റ്റൈൽ ഷീറ്റ് മാറ്റാൻ കഴിയും.

ഒരൊറ്റ ഫയലിൽ നിങ്ങൾ ശൈലി മാറ്റുമ്പോൾ, അതിലേക്ക് ഒരു ലിങ്കുള്ള എല്ലാ പേജുകളിലേക്കും ശൈലി സ്വയമേവ പ്രയോഗിക്കപ്പെടും. നിസ്സംശയമായും സൗകര്യപ്രദമാണ്. ഞങ്ങൾ ഫോണ്ട് വലുപ്പം ഒരിടത്ത് മാത്രം വ്യക്തമാക്കുന്നു, ഞങ്ങളുടെ സൈറ്റിൻ്റെ എല്ലാ നൂറോ അതിലധികമോ വെബ് പേജുകളിലും ഇത് മാറുന്നു.

സ്‌റ്റൈൽ ഫയൽ ആദ്യം ലോഡുചെയ്യുമ്പോൾ, അത് വെബ് പേജുകളിൽ നിന്ന് വേറിട്ട് നിങ്ങളുടെ ലോക്കൽ കമ്പ്യൂട്ടറിൽ കാഷെ ചെയ്യപ്പെടും, അതിനാൽ സൈറ്റ് വേഗത്തിൽ ലോഡുചെയ്യുന്നു.

ഗ്ലോബൽ സ്റ്റൈൽ ഷീറ്റുകൾ

ഡോക്യുമെൻ്റിൽ തന്നെ സ്റ്റൈൽ നിർവചിക്കപ്പെട്ടിട്ടുണ്ട്, ഇത് സാധാരണയായി വെബ് പേജിൻ്റെ തലയിലാണ് സ്ഥിതി ചെയ്യുന്നത്. വഴക്കവും കഴിവുകളും കണക്കിലെടുക്കുമ്പോൾ, ഒരു ശൈലി ഉപയോഗിക്കുന്ന ഈ രീതി മുമ്പത്തേതിനേക്കാൾ താഴ്ന്നതാണ്, എന്നാൽ എല്ലാ ശൈലികളും ഒരിടത്ത് സ്ഥാപിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, പ്രമാണത്തിൻ്റെ ബോഡിയിൽ തന്നെ. ശൈലിയുടെ നിർവചനം ഒരു ടാഗ് ഉപയോഗിച്ചാണ് വ്യക്തമാക്കിയിരിക്കുന്നത് (ഉദാഹരണം 2).

ഉദാഹരണം 2: ഒരു ഗ്ലോബൽ സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിക്കുന്നത്

H1 ശൈലികൾ (ഫോണ്ട് വലുപ്പം: 120%; /* ഫോണ്ട് വലുപ്പം */ ഫോണ്ട്-കുടുംബം: Verdana, Arial, Helvetica, sans-serif; /* ഫോണ്ട് കുടുംബം */ നിറം: #336; /* വാചക നിറം */ ) ഹലോ, ലോകം!

ഈ ഉദാഹരണം തലക്കെട്ട് ശൈലിയിൽ മാറ്റം കാണിക്കുന്നു. ഒരു വെബ് പേജിൽ, നിങ്ങൾ ഇപ്പോൾ ഈ ടാഗ് മാത്രം വ്യക്തമാക്കിയാൽ മതി, അതിലേക്ക് ശൈലികൾ സ്വയമേവ ചേർക്കപ്പെടും.

ആന്തരിക ശൈലികൾ

ഇൻലൈൻ ശൈലികൾ അടിസ്ഥാനപരമായി ഒരു വെബ് പേജിൽ ഉപയോഗിക്കുന്ന ഒരൊറ്റ ടാഗിലേക്കുള്ള വിപുലീകരണമാണ്. ഒരു ശൈലി നിർവചിക്കാൻ സ്റ്റൈൽ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു, അതിൻ്റെ മൂല്യങ്ങൾ ഒരു സ്റ്റൈൽ ഷീറ്റ് ഭാഷ ഉപയോഗിച്ചാണ് വ്യക്തമാക്കുന്നത് (ഉദാഹരണം 3).

ഉദാഹരണം 3: ആന്തരിക ശൈലികൾ ഉപയോഗിക്കുന്നത്

ശൈലികൾ ഹലോ, ലോകം!

ഒറ്റ ടാഗുകൾക്കായി ആന്തരിക സ്‌റ്റൈലിംഗ് ഉപയോഗിക്കുന്നതിനോ അത് ഉപയോഗിക്കരുതെന്നോ ശുപാർശ ചെയ്യുന്നു, കാരണം നിരവധി ഘടകങ്ങൾ മാറ്റുന്നത് പ്രശ്‌നകരമാണ്. ഉള്ളടക്കവും അതിൻ്റെ രൂപകൽപ്പനയും വേർതിരിക്കുമ്പോൾ ആന്തരിക ശൈലികൾ ഘടനാപരമായ പ്രമാണത്തിൻ്റെ പ്രത്യയശാസ്ത്രവുമായി പൊരുത്തപ്പെടുന്നില്ല.

CSS ഉപയോഗിക്കുന്നതിനുള്ള എല്ലാ വിവരിച്ച രീതികളും സ്വതന്ത്രമായോ പരസ്പരം സംയോജിപ്പിച്ചോ ഉപയോഗിക്കാം. ഈ സാഹചര്യത്തിൽ, അവരുടെ ശ്രേണി ഓർമ്മിക്കേണ്ടത് ആവശ്യമാണ്. ആന്തരിക ശൈലി എല്ലായ്‌പ്പോഴും ആദ്യം പ്രയോഗിക്കുന്നു, തുടർന്ന് ഗ്ലോബൽ സ്‌റ്റൈൽ ഷീറ്റും അവസാനമായി ബന്ധപ്പെട്ട സ്‌റ്റൈൽ ഷീറ്റും. ഒരു പ്രമാണത്തിലേക്ക് സ്റ്റൈൽ ഷീറ്റുകൾ ചേർക്കുന്നതിന് ഉദാഹരണം 4 രണ്ട് രീതികൾ ഉപയോഗിക്കുന്നു.

ഉദാഹരണം 4. വ്യത്യസ്ത ശൈലികളുടെ കണക്ഷൻ രീതികളുടെ സംയോജനം

H1 ശൈലികൾ (ഫോണ്ട്-സൈസ്: 120%; ഫോണ്ട്-ഫാമിലി: ഏരിയൽ, ഹെൽവെറ്റിക്ക, സാൻസ്-സെരിഫ്; നിറം: പച്ച; ) ഹലോ, വേൾഡ്! ഹലോ വേൾഡ്!

മുകളിലെ ഉദാഹരണത്തിൽ, ആദ്യ തലക്കെട്ട് 36px ചുവപ്പായി സജ്ജീകരിച്ചിരിക്കുന്നു, അടുത്തത് പച്ചയും മറ്റൊരു ഫോണ്ടും ആയി സജ്ജീകരിച്ചിരിക്കുന്നു.

ഈ ഘടന ഉള്ളിലാണെങ്കിൽ എന്താണ് ശ്രദ്ധിക്കപ്പെടുക. ബ്ലിങ്ക് ഡെവലപ്പർ മെയിലിംഗ് ലിസ്റ്റിലെ വിവരണത്തിൽ നിന്ന് ഇത് എന്താണ് ഭീഷണിപ്പെടുത്തുന്നതെന്നും എന്താണ് നൽകുന്നതെന്നും വളരെ വ്യക്തമല്ല, അതിനാൽ ഇത് ഇവിടെ വിശദീകരിക്കാൻ ഞാൻ തീരുമാനിച്ചു.

ഇന്നത്തെ സാധാരണ CSS ലോഡിംഗ്...ഉള്ളടക്കം...

CSS റെൻഡറിംഗ് തടയുന്നു, all-of-my-styles.css പൂർണ്ണമായി ലോഡുചെയ്യുന്നത് വരെ ഒരു വെളുത്ത സ്ക്രീനിൽ ഉറ്റുനോക്കാൻ ഉപയോക്താവിനെ നിർബന്ധിക്കുന്നു.

ഒരു സൈറ്റിൻ്റെ എല്ലാ CSS ഉം ഒന്നോ രണ്ടോ അസറ്റുകളായി സംയോജിപ്പിക്കുന്നത് സാധാരണ രീതിയാണ്, അതായത് നിലവിലെ പേജിന് ബാധകമല്ലാത്ത നിരവധി നിയമങ്ങൾ ഉപയോക്താവ് ഡൗൺലോഡ് ചെയ്യുന്നു. കാരണം, ഒരു സൈറ്റിൽ നിരവധി "ഘടകങ്ങൾ" ഉള്ള വ്യത്യസ്‌ത തരം പേജുകൾ ഉൾപ്പെടുന്നു, കൂടാതെ HTTP/1-ലെ വ്യക്തിഗത ഘടക തലത്തിൽ CSS റെൻഡർ ചെയ്യുന്നത് പ്രകടനത്തെ ദോഷകരമായി ബാധിക്കുന്നു.

SPDY, HTTP/2 എന്നിവയുടെ കാര്യത്തിൽ ഇത് ഒരു പ്രശ്‌നമല്ല, ഇവിടെ നിരവധി ചെറിയ ഉറവിടങ്ങൾ ചുരുങ്ങിയ ഓവർഹെഡ് ഉപയോഗിച്ച് കൈമാറ്റം ചെയ്യാനും സ്വതന്ത്രമായി കാഷെ ചെയ്യാനും കഴിയും.

…ഉള്ളടക്കം…

ഇത് ആവർത്തനത്തിൻ്റെ പ്രശ്നം പരിഹരിക്കുന്നു, എന്നാൽ ഇത് ചെയ്യുന്നതിന് ഔട്ട്പുട്ട് സമയത്ത് പേജിൽ എന്തായിരിക്കുമെന്ന് നിങ്ങൾ അറിഞ്ഞിരിക്കണം, അത് സ്ട്രീമിംഗ് ഔട്ട്പുട്ടിനെ തടസ്സപ്പെടുത്തിയേക്കാം. കൂടാതെ, ബ്രൗസറിന് എന്തെങ്കിലും റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് എല്ലാ CSS-ഉം ലോഡുചെയ്യേണ്ടതുണ്ട്. മന്ദഗതിയിലുള്ള ലോഡിംഗ് /site-footer.css റെൻഡറിംഗ് വൈകും ആകെ.

CSS ലോഡ് ചെയ്യുന്നതിനുള്ള ആധുനിക സമീപനം // https://github.com/filamentgroup/loadCSS !function(e)("ഉപയോഗിക്കുക കർശനമായ" var n=function(n,t,o)(function i(e)(f.body റിട്ടേൺ ചെയ്യുക ?e():void setTimeout(function())(i(e))))var d,r,a,l,f=e.document,s=f.createElement("link"),u=o| | "എല്ലാ" റിട്ടേൺ t?d=t:(r=(f.body||f.getElementsByTagName("head")).childNodes,d=r),a=f.styleSheets,s.rel="stylesheet" , s.href=n,s.media="only x",i(function())(d.parentNode.insertBefore(s,t?d:d.nextSibling))),l=function(e)(ഇതിനായി (var n=s.href,t=a.length;t--;)if(a[t].href===n)return e() setTimeout(function())(l(e)))) ,s. addEventListener&&s.addEventListener("load",function())(this.media=u)),s.onloadcssdefined=l,l(function())(s.media!==u&&(s.media=u) ))),s ) "നിർവചിക്കപ്പെടാത്തത്"!= കയറ്റുമതിയുടെ തരം?exports.loadCSS=n:e.loadCSS=n)("defined"!=ആഗോള തരം / .പ്രധാന ലേഖനം, .അഭിപ്രായങ്ങൾ, .എബൗട്ട്-മീ, അടിക്കുറിപ്പ് (പ്രദർശനം: ഒന്നുമില്ല; ) loadCSS("/the-rest-of-the-styles.css");

ഈ കോഡിൽ, ഞങ്ങൾക്ക് ദ്രുത പ്രാരംഭ റെൻഡറിംഗ് നൽകുന്ന ചില ഇൻലൈൻ ശൈലികൾ ഞങ്ങൾ തയ്യാറാക്കിയിട്ടുണ്ട്, കൂടാതെ ഞങ്ങൾക്ക് ഇതുവരെ ശൈലികൾ ഇല്ലാത്ത ഘടകങ്ങൾ മറയ്ക്കുകയും തുടർന്ന് JavaScript ഉപയോഗിച്ച് ബാക്കിയുള്ള CSS അസമന്വിതമായി ലോഡ് ചെയ്യുകയും ചെയ്യുന്നു. ഈ ബാക്കിയുള്ള CSS ഡിസ്‌പ്ലേയെ അസാധുവാക്കും: .main-article മുതലായവയ്‌ക്കായി ഒന്നുമില്ല.

ജീവിതത്തോട് ഏറ്റവും അടുത്ത ഒരു ഉദാഹരണം എൻ്റെ ഓഫ്‌ലൈൻ വിക്കിയാണ്, അവിടെ അത് ഒരു ചാം പോലെ പ്രവർത്തിച്ചു:

3G-യിൽ, ആദ്യ റെൻഡർ 0.6 സെക്കൻഡ് വേഗതയുള്ളതാണ്. പൂർണ്ണ ഫലങ്ങൾമുമ്പും ശേഷവും .

എന്നാൽ കുറച്ച് പോരായ്മകളുണ്ട്:

ഒരു (ചെറിയ) JavaScript ലൈബ്രറി ആവശ്യമാണ്

നിർഭാഗ്യവശാൽ, WebKit-ൽ നടപ്പിലാക്കിയതാണ് ഇതിന് കാരണം. പേജിലേക്ക് ചേർത്തുകഴിഞ്ഞാൽ, സ്‌ക്രിപ്റ്റ് മുഖേന ചേർത്തതാണെങ്കിലും സ്റ്റൈൽഷീറ്റ് ലോഡുചെയ്യുന്നത് വരെ വെബ്‌കിറ്റ് റെൻഡറിംഗ് തടയുന്നു.

Firefox, IE/Edge എന്നിവയിൽ, സ്ക്രിപ്റ്റ് ചേർത്ത സ്റ്റൈൽ ഫയലുകൾ പൂർണ്ണമായും അസമന്വിതമായി ലോഡ് ചെയ്യപ്പെടുന്നു. സ്ഥിരതയുള്ള Chrome പതിപ്പ്ഇപ്പോഴും WebKit പോലെയാണ് പെരുമാറുന്നത്, എന്നാൽ കാനറിയിൽ ഞങ്ങൾ Firefox/Edge സ്വഭാവത്തിലേക്ക് മാറി.

നിങ്ങൾ രണ്ട് ഡൗൺലോഡ് ഘട്ടങ്ങളിലേക്ക് പരിമിതപ്പെടുത്തിയിരിക്കുന്നു

മുമ്പത്തെ ഉദാഹരണത്തിൽ, ഡിസ്പ്ലേ: ഒന്നുമില്ല ഉപയോഗിച്ച് ഇതുവരെ ശൈലികളില്ലാത്ത ഉള്ളടക്കം ഇൻലൈൻ CSS മറയ്ക്കുന്നു, തുടർന്ന് അസമന്വിതമായി ലോഡുചെയ്ത CSS അത് വെളിപ്പെടുത്തുന്നു. രണ്ടോ അതിലധികമോ CSS ഫയലുകളിലേക്ക് ഈ ആശയം മുന്നോട്ട് കൊണ്ടുപോകുമ്പോൾ, അവ ക്രമം തെറ്റിയേക്കാം, ഇത് ലോഡ് ചെയ്യുമ്പോൾ ഉള്ളടക്കം കുതിച്ചുയരാൻ ഇടയാക്കും:

ഉള്ളടക്കം കുതിക്കുന്നത് ഉപയോക്താക്കളെ പ്രകോപിപ്പിക്കുന്നു പോപ്പ്-അപ്പ് പരസ്യങ്ങളുമായി ഏതാണ്ട് തുല്യമാണ്. ഈ വെറുപ്പുളവാക്കുന്ന കാര്യം കത്തിക്കുക.

നിങ്ങൾ രണ്ട് ലോഡിംഗ് ഘട്ടങ്ങളിലേക്ക് പരിമിതപ്പെടുത്തിയിരിക്കുന്നതിനാൽ, എന്താണ് പെട്ടെന്ന് വരയ്ക്കേണ്ടതെന്നും "മറ്റെല്ലാം" എന്തായിരിക്കുമെന്നും നിങ്ങൾ തിരഞ്ഞെടുക്കണം. തീർച്ചയായും, ആദ്യ സ്‌ക്രീനിലെ ഉള്ളടക്കങ്ങൾ ഉടനടി പ്രദർശിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കും, എന്നാൽ ആ "ആദ്യ സ്ക്രീനിൻ്റെ" വലുപ്പം എല്ലാവർക്കും വ്യത്യസ്തമാണ്. അതെ, ക്രിസ്മസ് ട്രീ സ്റ്റിക്കുകൾ, എല്ലാ വലുപ്പങ്ങൾക്കും നിങ്ങൾ ഒരു പരിഹാരം കണ്ടെത്തേണ്ടതുണ്ട്.

വഴി ലളിതവും മികച്ചതുമാണ്...............

ശൈലികൾ ലോഡുചെയ്യുമ്പോൾ ഓരോരുത്തർക്കും ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നതിൽ നിന്ന് തടയുക എന്നതാണ് പ്ലാൻ, എന്നാൽ അതിന് മുമ്പ് ഉള്ളടക്കം റെൻഡർ ചെയ്യാൻ അനുവദിക്കുക. ശൈലികൾ സമാന്തരമായി ലോഡ് ചെയ്യുന്നു, പക്ഷേ തുടർച്ചയായി പ്രയോഗിക്കുന്നു. ഇതിന് നന്ദി, അത് പോലെ പെരുമാറാൻ തുടങ്ങുന്നു.

സൈറ്റ് ഹെഡർ, ലേഖനം, അടിക്കുറിപ്പ് എന്നിവയ്‌ക്കായുള്ള CSS ലോഡുചെയ്‌തു, മറ്റെല്ലാം ലോഡുചെയ്യുന്നു, പേജ് ഇങ്ങനെയായിരിക്കും:

• "തൊപ്പി": പ്രദർശിപ്പിച്ചിരിക്കുന്നു
• ലേഖനം: പ്രദർശിപ്പിച്ചിരിക്കുന്നു
• അഭിപ്രായങ്ങൾ: പ്രദർശിപ്പിച്ചിട്ടില്ല, അവരുടെ മുന്നിലുള്ള CSS ഇതുവരെ ലോഡ് ചെയ്തിട്ടില്ല (/comment.css)
• "എന്നെക്കുറിച്ച്" വിഭാഗം: പ്രദർശിപ്പിച്ചിട്ടില്ല, അതിന് മുന്നിലുള്ള CSS ഇതുവരെ ലോഡ് ചെയ്തിട്ടില്ല (/comment.css)
• അടിക്കുറിപ്പ്: റെൻഡർ ചെയ്‌തിട്ടില്ല, സ്വന്തം CSS ഇതിനകം ലോഡുചെയ്‌തിട്ടുണ്ടെങ്കിലും അതിൻ്റെ മുന്നിലുള്ള CSS ഇതുവരെ ലോഡ് ചെയ്‌തിട്ടില്ല (/comment.css).

ഇത് ഞങ്ങൾക്ക് സ്ഥിരമായ പേജ് റെൻഡറിംഗ് നൽകുന്നു. "ആദ്യത്തെ സ്‌ക്രീൻ" എന്താണെന്ന് നിങ്ങൾ തീരുമാനിക്കേണ്ടതില്ല, ആ ഘടകത്തിൻ്റെ ആദ്യ സംഭവത്തിന് മുമ്പ് പേജ് ഘടകത്തിൻ്റെ CSS ഉൾപ്പെടുത്തിയാൽ മതി. ഇത് സ്ട്രീമിംഗ് ഡൗൺലോഡുകളുമായി പൂർണ്ണമായും പൊരുത്തപ്പെടുന്നു, കാരണം അത് ആവശ്യമുള്ള നിമിഷം വരെ ഔട്ട്പുട്ട് ചെയ്യേണ്ട ആവശ്യമില്ല.

ലേഔട്ട് സിസ്റ്റങ്ങൾ ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾ ശ്രദ്ധിക്കേണ്ടതുണ്ട്, അവിടെ ലേഔട്ട് നിർണ്ണയിക്കുന്നത് ഉള്ളടക്കം (ഉദാ: പട്ടികകളും ഫ്ലെക്സ്ബോക്സുകളും) ലോഡ് ചെയ്യുമ്പോൾ ഉള്ളടക്കം കുതിച്ചുയരുന്നത് ഒഴിവാക്കാൻ. അല്ല പുതിയ പ്രശ്നം, എന്നാൽ ക്രമാനുഗതമായ റെൻഡറിംഗിലൂടെ നിങ്ങൾ അത് കൂടുതൽ തവണ കാണേണ്ടി വരും. നിങ്ങൾക്ക് Flexbox-ൻ്റെ സ്വഭാവം ഹാക്കുകൾ ഉപയോഗിച്ച് പരിഹരിക്കാൻ കഴിയും, എന്നാൽ CSS ഗ്രിഡുകൾ ഒരു മുഴുവൻ പേജ് ലേഔട്ട് ചെയ്യുന്നതിനുള്ള മികച്ച സംവിധാനമാണ് (ചെറിയ ഘടകങ്ങൾക്ക് Flexbox മികച്ചതാണ്, എന്നിരുന്നാലും).

Chrome-ലെ മാറ്റങ്ങൾ

Chrome/Safari-യുടെ നിലവിലെ പെരുമാറ്റം പിന്നിലേക്ക് പൊരുത്തപ്പെടുന്നതാണ്, അവ ആവശ്യമുള്ളതിലും കൂടുതൽ സമയം റെൻഡറിംഗ് തടയുന്നു. ഫയർഫോക്സിൻ്റെ പെരുമാറ്റം കുറച്ചുകൂടി സങ്കീർണ്ണമാണ്, പക്ഷേ ഒരു പരിഹാരമുണ്ട്...

ഫോക്സിനായി പരിഹരിക്കുക

ഫയർഫോക്സ് എല്ലായ്‌പ്പോഴും റെൻഡറിംഗ് തടയാത്തതിനാൽ, നഗ്നമായ ഉള്ളടക്കം മിന്നിമറയുന്നത് ഒഴിവാക്കാൻ നിങ്ങൾ ഇത് അൽപ്പം ടിങ്കർ ചെയ്യേണ്ടതുണ്ട്. ഭാഗ്യവശാൽ ഇത് വളരെ എളുപ്പമാണ്, കാരണം ഇത് പാഴ്‌സിംഗ് തടയുന്നു, മാത്രമല്ല ശൈലികൾ ലോഡ് ചെയ്യാൻ കാത്തിരിക്കുകയും ചെയ്യുന്നു:

…

ഇത് പ്രവർത്തിക്കുന്നതിന്, ഘടകം ശൂന്യമായിരിക്കരുത്; അതിൽ ഒരു ഇടം മതിയാകും.

IE ഉള്ള ഫയർഫോക്സും എഡ്ജും നിങ്ങൾക്ക് അതിശയകരമായ ക്രമാനുഗതമായ റെൻഡറിംഗ് കാണിക്കും, Chrome, Safari എന്നിവ കാണിക്കും വെളുത്ത സ്ക്രീൻഎല്ലാ CSS-ഉം പൂർണ്ണമായി ലോഡ് ആകുന്നത് വരെ. Chrome-ൻ്റെയും Safari-ൻ്റെയും നിലവിലെ പെരുമാറ്റം എല്ലാ ശൈലികളും ഉൾപ്പെടുത്തുന്നതിനേക്കാൾ മോശമല്ല, അതിനാൽ നിങ്ങൾക്ക് ഇപ്പോൾ ഈ രീതി ഉപയോഗിക്കാൻ തുടങ്ങാം. വരും മാസങ്ങളിൽ, എഡ്ജിൻ്റെ സമീപനത്തിലേക്ക് Chrome മാറും, കൂടുതൽ ഉപയോക്താക്കൾക്ക് വേഗത്തിലുള്ള റെൻഡറിംഗ് കാണാനാകും.

അതിനാൽ നിങ്ങൾക്ക് ഷിപ്പ് ചെയ്യാൻ മാത്രം വളരെ എളുപ്പമുള്ള ഒരു മാർഗം ഇതാ ആവശ്യമായ CSSഅതേ സമയം വേഗത്തിലുള്ള റെൻഡറിംഗ് ലഭിക്കും. നിങ്ങളുടെ ആരോഗ്യത്തിനായി ഇത് ആസ്വദിക്കൂ!