Kwa kuongezeka kwa kasi ya uunganisho wa Mtandao na kuongezeka kwa nguvu sio tu ya desktop, bali pia vifaa vya simu Kurasa za wavuti zinazidi kuwa nzito. Idadi na saizi ya faili zilizounganishwa inakua: faili za JavaScript, faili za css, picha, wijeti za tovuti za watu wengine, iframes. Washa wakati huu Ufafanuzi wa jinsi vivinjari hufanya kazi ni kwamba wakati wa kupakia faili ya js, utoaji umezuiwa hadi hati itekelezwe. Vivinjari vya kisasa V usuli itachanganua hati na kupakua hati na mitindo, lakini uwasilishaji utazuiwa. Kulinganisha vigezo vya mtandao Kwa vivinjari tofauti inaweza kutazamwa katika browserscope.org. Hatuwezi kuondoa kuzuia kabisa, lakini tunaweza kuboresha seva na sehemu ya mteja maombi ili kutoa kuzuia huchukua muda mfupi zaidi.

Suluhisho za upande wa seva:
- Punguza saizi ya faili zilizohamishwa
- Tumia CDN
- Chukua nje faili tuli kwenye kikoa tofauti au chini ya kikoa, na hivyo kuongeza idadi viunganisho vya wakati mmoja kivinjari.
- Wezesha ukandamizaji wa faili zilizohamishwa (gzip)

Suluhisho kwa upande wa mteja:
- Kupunguza idadi ya maombi.
- Faili za akiba kwa upande wa mteja kutumia Mada za kichwa zinaisha muda wake na Etags.
- Tumia CDN zinazopatikana kwa umma (Google CDN, Yandex CDN). Kwa hivyo kuna uwezekano kwamba faili kutoka kwa CDN ya umma tayari itahifadhiwa kwenye kashe ya kivinjari.

Njia moja ya kuongeza kasi ya upakiaji wa tovuti ni kupakia faili kwa usawa, ambayo haizuii uwasilishaji.

Hati ya upakiaji ya JavaScript isiyolingana:

(kazi() ( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL ya faili"; document.getElementsByTagName("head") .appendChild(script); ))();

Ikiwa JavaScript inahitaji kutekelezwa baada ya ukurasa mzima kupakiwa, ikiwa ni pamoja na maudhui, picha, faili za mtindo na maandishi ya nje, basi unahitaji kuongeza ufuatiliaji wa tukio la upakiaji kwenye kipakiaji.

Ikiwa (window.addEventListener) ( window.addEventListener("load", async_load, false); ) vinginevyo ikiwa (window.attachEvent) ( window.attachEvent("onload", async_load); )

Hati ya upakiaji ya JavaScript isiyolingana ikizingatia tukio la upakiaji (kazi() ( kazi async_load())( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s .src = "URL ya faili"; document.getElementsByTagName("head").appendChild(script); ) ikiwa (window.addEventListener) ( window.addEventListener("load", async_load, false); ) vinginevyo ikiwa (window.attachEvent ) ( window .attachEvent("kupakua", async_load); ) ))();

Lakini hii ni kesi pekee wakati kupakua faili moja inahitajika. Mara nyingi katika mazoezi faili nyingi zimeunganishwa.

Hati ya kupakia viunganishi vingi bila mpangilio Faili za JavaScript(function() ( chaguo za kukokotoa async_load())( [ "URL_1.js", "URL_2.js", "URL_3.js" ].forEach(function(src) ( var s = document.createElement("script"); s .type = "maandishi/javascript"; s.async = kweli; s.src = src; document.getElementsByTagName("head").appendChild(script); )); ) ikiwa (window.addEventListener) (window.addEventListener ( "mzigo", async_load, uongo); ) vinginevyo ikiwa (window.attachEvent) ( window.attachEvent("onload", async_load); ) ))();

Lakini kuna minus katika utekelezaji huu - hati zitapakiwa kwa mpangilio na, ipasavyo, zitatekelezwa kwa nasibu kwa wakati. Hati hii upakiaji wa asynchronous ni bora ikiwa Utekelezaji wa JavaScript faili hazitegemei kila mmoja na hazitegemei DOM. Vinginevyo, matumizi yake yanaweza kusababisha makosa kwenye ukurasa au matokeo yasiyotarajiwa ya utekelezaji. Kwa utekelezaji wa mfuatano, lakini upakuaji usiolingana, unahitaji kubainisha async=false, kisha faili zitapakuliwa kwa mpangilio nasibu, lakini kutekelezwa kwa zamu.

HTML 5. Asynchronous JavaScript Inapakia

Kiwango cha HTML 5 kinaauni upakiaji usiolingana wa JavaScript. Hii inaweza kufanywa kwa kuongeza async au kuahirisha neno kuu. Kwa mfano:

Hati ambayo imeunganishwa na sifa ya kuahirisha itatekelezwa bila kusumbua mpangilio wa utekelezaji kuhusiana na hati zingine na utekelezaji wake utafanyika baada ya. mzigo kamili na kuchanganua ukurasa, lakini kabla ya DOMContentLoaded inaitwa.

Hati ambayo imeunganishwa na sifa ya usawazishaji itatekelezwa haraka iwezekanavyo baada ya kupakiwa kikamilifu, lakini haisubiri hati kuchanganuliwa kabla ya kupakia kipengee cha dirisha. Vivinjari havihakikishi kuwa hati zitatekelezwa kwa mpangilio ule ule ambazo zimeunganishwa.

Maktaba za upakiaji wa JavaScript usiolingana

RequireJS ni moduli ya upakiaji ya JavaScript. Imeboreshwa kwa vivinjari, lakini inaweza kutumika katika mazingira mengine kama vile Node, Rhino.

Inahitaji(["script"], function(script) ( console.log("start after load script.js"); ));

extsrc.js ni maktaba ambayo huendesha hati za kutekelezwa baada ya ukurasa kupakiwa na kuonyeshwa kwa mtumiaji. Inafanya kazi kwa usahihi na document.write.

yepnope.js - inaruhusu upakiaji wa asynchronous wa faili za JavaScript na CSS.

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

Njia rahisi ya kupakua Hati za JavaScript

Inabadilika kuwa katika mazoezi, kufikia upakiaji bora wa kivinjari wa maandishi ya JavaScript ambayo haizuii maonyesho ni ngumu, na wakati mwingine haiwezekani. Wengi njia mojawapo inaongezwa hadi mwisho wa hati kabla ya lebo ya kufunga ya mwili. Kutokana na vikwazo vivinjari tofauti na HTML yenyewe, chaguo kama hilo la upakiaji ambalo halizuii onyesho linaweza kuzingatiwa kuwa rahisi zaidi.

Ninajaribu kuwatenga 2 Faili ya CSS ambazo zinazuia utoaji kwenye tovuti yangu - zinaonekana ndani Ukurasa wa Google Maarifa ya kasi. Nilishikilia mbinu tofauti, hakuna hata moja iliyofanikiwa. Lakini hivi majuzi nilipata chapisho kuhusu Kufikiria Async na nilipotumia nambari hii: ilirekebisha shida.

Walakini, baada ya kuchapishwa, ukurasa ulipoteza mtindo wake. Sina hakika sana kinachoendelea kwa sababu msimbo hufanya kazi, lakini ni mtindo wa upakiaji ambao haufanyi kazi. Asante kwa msaada wako katika hili. Shukrani kwa

4 majibu

Ujanja wa kupata mitindo ya kupakia asynchronously ni kutumia kipengee na kuweka sifa ya midia kwa thamani batili (mimi hutumia media="none" lakini thamani yoyote itafanya). Hoja ya media inapotathminiwa kuwa sivyo, kivinjari bado kitapakia laha ya mtindo, lakini hakitasubiri hadi maudhui yapatikane kabla ya kutoa ukurasa.

Baada ya laha ya mtindo kumaliza kupakia, sifa ya midia inapaswa kuwekwa thamani inayoruhusiwa, hivyo sheria za mtindo zitatumika kwa hati. Tukio la upakiaji linatumika kugeuza kipengele cha midia kwenye kila kitu:

Mbinu hii ya upakiaji ya CSS itatoa maudhui muhimu kwa wageni haraka zaidi kuliko mbinu ya kawaida. CSS muhimu bado inaweza kutumika kwa mbinu ya kawaida ya kuzuia (au unaweza kuiwekea mstari utendaji wa juu), na mitindo isiyo ya muhimu inaweza kupakiwa kwa kuongezeka na kutumiwa baadaye katika mchakato wa uchanganuzi/utoaji.

Njia hii hutumia JavaScript, lakini unaweza kutumikia vivinjari visivyo vya JavaScript kwa kufunga vipengee sawa vya kuzuia katika :

Unaweza kuona operesheni kwenye www.itcha.edu.sv

unaweza kujaribu kuipata kwa njia kadhaa:

1. Kutumia media="bogus" na a kwenye mguu

2. Ikiwa ni pamoja na DOM njia ya zamani

(kazi())( var bsa = document.createElement("script"); bsa.type = "text/javascript"; bsa.async = kweli; bsa.src = "https://s3.buysellads.com/ac / bsa.js"; (document.getElementsByTagName("head")||document.getElementsByTagName("mwili")).appendChild(bsa); ))();

3.kama unaweza kujaribu programu-jalizi unaweza kujaribu loadCSS

// ni pamoja na loadCSS hapa... kazi loadCSS(href, before, media)( ... ) // pakia faili loadCSS("path/to/mystylesheet.css");

Siku zijazo inaonekana kuwa neno kuu la kupakia mapema kwa vipengee vya kiungo.

Toleo la maingiliano

Toleo la Async

Kwa bahati mbaya...

Vivinjari mashuhuri ambavyo bado havitumii kipengele hiki ni pamoja na Edge na iOS Safari.

Hata hivyo...

loadCSS inaonekana kuwa suluhisho linalowezekana ambalo hukuruhusu kutumia upakiaji mapema leo (pamoja na njia mbadala).

Licha ya kuongezeka kwa kuenea kwa ufikiaji wa mtandao wa broadband, matatizo ya kasi ya upakiaji wa kurasa za HTML bado haijali watumiaji wengi wa mtandao, hasa katika ukubwa wa Umoja wa Kisovyeti wa zamani. CSS (Majedwali ya Mitindo ya Kuachia) inaweza kusaidia katika suala hili, ikituokoa wakati na trafiki.

1. Epuka kutumia majedwali kwa mpangilio wa ukurasa

Hapa kuna sababu sita kwa nini ni bora kutumia CSS badala ya jedwali za mpangilio wa ukurasa:

• Vivinjari huchanganua majedwali mara mbili: mara moja kutathmini muundo wa jedwali, na mara moja kuamua yaliyomo.
• Majedwali yanaonyeshwa kwa ukamilifu mara moja, na sio wakati yanapakia.
• Jedwali zinalazimishwa kutumia picha za uwazi kuamua upana wa nguzo, nk.
• CSS inahitaji msimbo mdogo zaidi kuliko jedwali zilizopakiwa kupita kiasi.
• Msimbo wote wa CSS unaweza kutumwa kwa faili ya nje, ambayo itapakiwa mara moja tu na kuhifadhiwa kwenye akiba ya kivinjari.
• Katika Msaada wa CSS Unaweza kudhibiti mpangilio ambao vipengele vya ukurasa vinapakiwa.

2. Usitumie picha kuonyesha maandishi

Vifungo na lebo nyingi zinaweza kutolewa kwa kutumia CSS. Angalia mfano:

a:link.example, a:visited.example, a:active.example ( color:#fff; background:#f90; font size:1.2em; font-weight:bold; text-decoration:none; padding:0.2 em; mpaka:4px #00f mwanzoni ) a:hover.example ( rangi:#fff; usuli:#fa1; ukubwa wa fonti:1.2em; uzito wa fonti:bold; upambaji wa maandishi:hakuna; padding:0.2em; mpaka :4px #00f imewekwa

CSS hii inafafanua kifungo rahisi, ambayo hubadilisha mwonekano wake unapoelea juu ya mshale. Kwa njia hii unaweza kuunda vitu ngumu zaidi.

3. Inapakia picha kupitia CSS

Baadhi picha za mandharinyuma Ni bora kupakia kupitia CSS. Kwa mfano, ili kuonyesha picha ya 200x100, unaweza kutumia msimbo ufuatao:

Na CSS inayolingana:

Picha nzuri ( mandharinyuma: url(jina la faili.gif); upana: 200px; urefu: 100px)

Hii inaweza kuonekana kuwa haina maana mwanzoni, lakini inaweza kufanya ukurasa wako upakie haraka zaidi. Katika kesi hii, kivinjari kitaanza kupakia picha tu baada ya maandishi yote kuonyeshwa, na si wakati huo huo. Kwa njia hii, watumiaji wanaweza kufanya kazi na ukurasa wakati picha bado inapakia.

Mbinu hii inafaa zaidi kwa kupakia mapambo tu, vipengele vya usuli kurasa. Ikiwa picha ni sehemu ya maudhui, bado utahitaji kutumia lebo ya IMG.

4. Kutumia mitindo ya kimuktadha

Nambari hii haifanyi kazi:

Hii ni sentensi

Hii ni sentensi nyingine

Hii ni mwingine tena sentensi

Hii ni sentensi moja zaidi

.maandishi ( rangi: #03c; ukubwa wa fonti:2em )

Badala ya kugawa darasa kwa kila aya, zinaweza kugawanywa katika moja Kipengele cha DIV na darasa moja:

Hii ni sentensi

Hii ni sentensi nyingine

Hii ni sentensi nyingine tena

Hii ni sentensi moja zaidi

.maandishi p ( rangi: #03c; ukubwa wa fonti:2em )

Msimbo huu huambia kivinjari kuwa kila aya ndani ya kipengele chenye maandishi ya darasa itakuwa na rangi ya #03c na saizi ya fonti ya 2em.

Labda umegundua kuwa rangi hapa imeonyeshwa kwa herufi tatu tu, sio sita. KATIKA kwa kesi hii#03c ni mkato wa rangi #0033cc.

5. Kutumia vifupisho

Fonti

Ni bora kuandika:

fonti: 1em/1.5em serif ya italiki iliyokoza

saizi ya herufi: 1em; urefu wa mstari: 1.5m; font-uzito: ujasiri; mtindo wa fonti: italiki; font-familia: serif

Mipaka

mpaka: 1px nyeusi imara

upana wa mpaka: 1px; mpaka-rangi: nyeusi; mtindo wa mpaka: imara

Usuli

mandharinyuma: #fff url(image.gif) hakuna kurudia juu kushoto

rangi ya mandharinyuma: #fff; picha ya mandharinyuma: url(image.gif); kurudia-rudia: hakuna kurudia; background-msimamo: juu kushoto;

Padding na Mipaka

Tumia:

ukingo: 2px 1px 3px 4px; (juu, kulia, chini, kushoto)

Vile vile:

ukingo: 5m 1em 3em; (juu, kushoto na kulia, chini)

kiasi: 5% 1%; (juu na chini, kushoto na kulia)

Sheria hizi zinatumika kwa ukingo, mpaka, na sifa za kuweka pedi.

6. Punguza nafasi, mapumziko ya mstari na maoni

Kila mhusika - herufi au nafasi - inachukua hadi byte moja. Kila herufi ya ziada huongeza tu saizi ya kurasa. Kwa hivyo, jaribu kubonyeza Ingiza na Tab kidogo wakati wa mchakato wa mpangilio. Pia, usisahau kuchanganya mitindo ya CSS.

7. Tumia viungo vya jamaa

Viungo kabisa huchukua nafasi nyingi zaidi kuliko jamaa. Na zaidi ya hayo, inajenga mzigo wa ziada kwenye kivinjari, ambayo ni muhimu zaidi. Mfano kumbukumbu kamili: . Itakuwa sahihi zaidi kuandika< a href=»filename.htm»>. Lakini vipi ikiwa faili unayohitaji iko kwenye saraka tofauti? Hapa kuna mifano ya kukusaidia kuelewa suala hili:

• - Kupigia simu ukurasa wa msingi wa tovuti http://www.URL.com
• - Kupigia simu ukurasa katika saraka ya mizizi http://www.URL.com/filename.html
• - Faili katika saraka ndogo ya "mizizi" http://www.URL.com/directory/filename.html
• - Upatikanaji wa saraka ya sasa na index.html
• - Saraka ya mzazi ya sasa na index.html
• - Kitu kimoja, kuonyesha faili
• - index.html katika saraka mbili juu ya ya sasa

8. Usikubali kubebwa na kutumia vitambulisho vya META

Lebo nyingi za META sio lazima kabisa. Ikiwa una nia, unaweza kuangalia chaguzi zote zilizopo. Lebo muhimu zaidi (maneno muhimu na maelezo) hutumiwa kwa uboreshaji wa injini ya utafutaji. Unapotumia sifa ya maudhui kwenye lebo ya META, jaribu kuiweka chini ya herufi 200. Maelezo makubwa na maneno mengi muhimu yanaweza kutambuliwa kama barua taka na injini za utafutaji.

9. Weka CSS na JavaScript katika faili tofauti

Kila mtu anajua hili, lakini hawatumii kila wakati. Hivi ndivyo simu ya CSS kutoka kwa faili ya nje inaonekana kama:

Na ipasavyo JavaScript:

Faili yoyote ya nje inapakuliwa mara moja tu na kisha kuhifadhiwa kwenye kache ya ndani. Hakuna vikwazo kwa idadi ya faili za nje "zilizounganishwa".

10. Weka / (slash) mwishoni mwa viungo vya saraka

Inahitaji kuandikwa hivi.

Karatasi za mtindo zinaweza kuongezwa kwenye ukurasa wa wavuti kwa njia tatu tofauti, ambazo hutofautiana katika uwezo wao.

Karatasi za mtindo zinazohusiana

Njia yenye nguvu zaidi na rahisi ya kufafanua mitindo na sheria za tovuti. Mitindo huhifadhiwa katika faili tofauti ambayo inaweza kutumika kwa ukurasa wowote wa wavuti. Ili kujumuisha jedwali la mitindo inayohusiana, tumia lebo kwenye kichwa cha ukurasa (mfano 1).

Mfano 1: Kuunganisha laha ya mtindo iliyounganishwa

Mitindo Habari, ulimwengu!

Njia ya faili ya mtindo inaweza kuwa ya jamaa au kabisa, kama inavyoonyeshwa katika mfano huu.

Faida za njia hii

Faili ya mtindo mmoja hutumiwa kwa idadi yoyote ya kurasa za wavuti; inawezekana pia kuitumia kwenye tovuti zingine.

Unaweza kubadilisha laha ya mtindo bila kurekebisha kurasa za wavuti.

Unapobadilisha mtindo katika faili moja, mtindo huo unatumika kiotomatiki kwa kurasa zote ambapo kuna kiunga kwake. Bila shaka inafaa. Tunabainisha saizi ya fonti katika sehemu moja tu, na inabadilika kwenye kurasa zote za wavuti mia au zaidi za tovuti yetu.

Wakati faili ya mtindo inapopakiwa kwa mara ya kwanza, huhifadhiwa kwenye kompyuta yako ya ndani, tofauti na kurasa za wavuti, hivyo tovuti hupakia kwa kasi zaidi.

Karatasi za mtindo wa kimataifa

Mtindo umefafanuliwa katika hati yenyewe na kawaida iko kwenye kichwa cha ukurasa wa wavuti. Kwa suala la kubadilika na uwezo, njia hii ya kutumia mtindo ni duni kuliko ya awali, lakini pia inakuwezesha kuweka mitindo yote katika sehemu moja. Katika kesi hii, moja kwa moja kwenye mwili wa hati. Ufafanuzi wa mtindo umebainishwa na lebo (mfano 2).

Mfano 2: Kutumia laha ya mtindo wa kimataifa

Mitindo ya H1 ( ukubwa wa fonti: 120%; /* Ukubwa wa herufi */ fonti-familia: Verdana, Arial, Helvetica, sans-serif; /* Familia ya herufi */ rangi: #336; /* Rangi ya maandishi */ ) Hujambo, dunia!

Mfano huu unaonyesha mabadiliko kwa mtindo wa kichwa. Kwenye ukurasa wa wavuti, sasa unahitaji tu kubainisha lebo hii na mitindo itaongezwa kwake kiotomatiki.

Mitindo ya ndani

Mitindo ya ndani kimsingi ni kiendelezi kwa lebo moja inayotumiwa kwenye ukurasa wa wavuti. Sifa ya mtindo hutumiwa kufafanua mtindo, na maadili yake yamebainishwa kwa kutumia lugha ya laha ya mtindo (mfano 3).

Mfano 3: Kutumia Mitindo ya Ndani

Mitindo Habari, ulimwengu!

Inashauriwa kutumia styling ya ndani kwa vitambulisho moja au usiitumie kabisa, kwa kuwa kubadilisha idadi ya vipengele inakuwa tatizo. Mitindo ya ndani hailingani na itikadi ya hati ya muundo wakati maudhui na muundo wake vinapotenganishwa.

Njia zote zilizoelezwa za kutumia CSS zinaweza kutumika kwa kujitegemea au kwa kuchanganya na kila mmoja. Katika kesi hii, ni muhimu kukumbuka uongozi wao. Mtindo wa ndani daima hutumiwa kwanza, kisha karatasi ya mtindo wa kimataifa, na mwisho wa karatasi ya mtindo unaohusishwa. Mfano wa 4 hutumia njia mbili za kuongeza laha za mtindo kwenye hati.

Mfano 4. Mchanganyiko wa mbinu tofauti za uunganisho wa mitindo

Mitindo ya H1 ( ukubwa wa fonti: 120%; familia ya fonti: Arial, Helvetica, sans-serif; rangi: kijani; ) Hujambo, ulimwengu! Salamu, Dunia!

Katika mfano hapo juu, kichwa cha kwanza kimewekwa 36px nyekundu, na kinachofuata kimewekwa kijani na fonti tofauti.

Nini kitaonekana ikiwa muundo huu uko ndani. Kutoka kwa maelezo katika orodha ya barua ya msanidi wa Blink haijulikani wazi ni nini hii inatishia na inatoa nini, kwa hivyo niliamua kuelezea hapa.

Upakiaji wa kawaida wa CSS kwa leo...maudhui...

CSS inazuia uwasilishaji, na hivyo kulazimisha mtumiaji kutazama skrini nyeupe hadi all-of-my-styles.css itakapopakiwa kikamilifu.

Ni jambo la kawaida kuchanganya CSS zote za tovuti kuwa kipengee kimoja au mbili, ambayo ina maana kwamba mtumiaji anapakua sheria nyingi ambazo hazitumiki kwa ukurasa wa sasa. Hii ni kwa sababu tovuti inajumuisha aina tofauti za kurasa zilizo na "vipengee" vingi, na uwasilishaji wa CSS katika kiwango cha sehemu mahususi katika HTTP/1 hudhuru utendakazi.

Hili si tatizo katika kesi ya SPDY na HTTP/2, ambapo rasilimali nyingi ndogo zinaweza kuhamishwa kwa uendeshaji mdogo, na kuhifadhiwa kwa kujitegemea.

...maudhui...

Hii inasuluhisha suala la upungufu, lakini ili kufanya hivyo unahitaji kujua ni nini kitakuwa kwenye ukurasa wakati wa pato, ambayo inaweza kuingilia kati na pato la utiririshaji. Zaidi ya hayo, kivinjari bado kinapaswa kupakia CSS yote kabla ya kutoa chochote. Upakiaji wa polepole /site-footer.css utachelewesha uwasilishaji Jumla.

Mbinu ya kisasa ya kupakia CSS // https://github.com/filamentgroup/loadCSS !function(e)("tumia kali" var n=function(n,t,o)(function i(e)(return f.body ?e():void setTimeout(function())(i(e))))var d,r,a,l,f=e.document,s=f.createElement("link"),u=o| | "wote" rudisha t?d=t:(r=(f.body||f.getElementsByTagName("kichwa")).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)(kwa (var n=s.href,t=a.length;t--;)kama(a[t].href===n)rejesha e() setTimeout(kazi())(l(e)))) ,s. addEventListener&&s.addEventListener("load",function())(this.media=u)),s.onloadcssdefined=l,l(function())(s.media!==u&(s.media=u) ))),s ) "undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n)("undefined"!=typeof global?global:this) /* Mitindo ya kichwa cha ukurasa, pamoja na: * / .makala kuu, .maoni, .kuhusu-mimi, kijachini ( onyesho: hakuna; ) loadCSS("/the-rest-of-the-styles.css");

Katika msimbo huu, tumetayarisha baadhi ya mitindo ya ndani ambayo hutupatia uwasilishaji wa haraka wa awali na kuficha vipengele hivyo ambavyo bado hatuna mitindo, kisha tunapakia CSS iliyosalia bila kulinganishwa kwa kutumia JavaScript. Sehemu hii iliyosalia ya CSS itabatilisha onyesho: hakuna kwa .main-makala n.k.

Mfano karibu na maisha ni wiki yangu ya nje ya mtandao, ambapo ilifanya kazi kama hirizi:

Kwenye 3G, toleo la kwanza ni sekunde 0.6 kwa kasi zaidi. Matokeo kamili kabla na baada.

Lakini kuna hasara kadhaa:

Unahitaji maktaba (ndogo) ya JavaScript

Kwa bahati mbaya, hii ni kwa sababu ya utekelezaji katika WebKit. Mara baada ya kuongezwa kwenye ukurasa, WebKit huzuia utoaji hadi laha ya mtindo ipakiwe, hata ikiwa iliongezwa na hati.

Katika Firefox na IE/Edge, faili za mtindo zilizoongezwa na hati hupakiwa kwa usawa kabisa. Imara Toleo la Chrome bado inafanya kama WebKit, lakini huko Canary tulibadilisha tabia ya Firefox/Edge.

Umezuiliwa kwa awamu mbili za upakuaji

Katika mfano uliotangulia, CSS ya ndani huficha maudhui ambayo bado hayana mitindo kwa kutumia display:none , kisha CSS iliyopakiwa isivyolingana inafichua. Kuchukua wazo hili zaidi kwa faili mbili au zaidi za CSS, zinaweza kupakia nje ya mpangilio, na kusababisha yaliyomo kuruka inapopakia:

Kuruka maudhui hukasirisha watumiaji karibu sawa na matangazo ya pop-up. Choma kitu hiki cha kuchukiza.

Kwa kuwa umepunguzwa kwa awamu mbili za upakiaji, unapaswa kuchagua kile kitakachotolewa haraka mara moja, na nini kitakuwa "kila kitu kingine". Bila shaka, utataka kuonyesha yaliyomo kwenye skrini ya kwanza mara moja, lakini ukubwa wa "skrini ya kwanza" ni tofauti kwa kila mtu. Ndio, vijiti vya mti wa Krismasi, italazimika kupata suluhisho moja kwa saizi zote.

Njia ni rahisi na bora zaidi...............

Mpango ni kwa kila mmoja kuzuia maudhui yasitolewe wakati mitindo inapakia, lakini ruhusu maudhui yatolewe kabla yake. Mitindo ni kubeba kwa sambamba, lakini inatumika sequentially. Shukrani kwa hili, huanza kuishi kama.

Wacha tuseme CSS ya kichwa cha tovuti, nakala na kijachini imepakiwa, na kila kitu kingine kinapakia tu, hivi ndivyo ukurasa utakavyoonekana wakati huo:

• "Kofia": imeonyeshwa
• Kifungu: kuonyeshwa
• Maoni: hayajaonyeshwa, CSS iliyo mbele yao bado haijapakia (/comment.css)
• Sehemu ya "Kunihusu": haijaonyeshwa, CSS iliyo mbele yake bado haijapakiwa (/comment.css)
• Kijachini: hakijatolewa, CSS iliyo mbele yake bado haijapakiwa (/comment.css), ingawa CSS yake tayari imepakiwa.

Hii inatupa utoaji thabiti wa ukurasa. Sio lazima kuamua ni nini kinahesabiwa kama "skrini ya kwanza", jumuisha tu CSS ya sehemu ya ukurasa kabla ya tukio la kwanza la sehemu hiyo. Hii inaoana kikamilifu na upakuaji wa utiririshaji, kwani hakuna haja ya kutoa hadi wakati huo huo inahitajika.

Unahitaji kuwa mwangalifu unapotumia mifumo ya mpangilio ambapo mpangilio unaamuliwa na yaliyomo (km majedwali na vijisanduku vya kukunja) ili kuepuka kurukaruka kwa maudhui yanapopakia. Sio tatizo jipya, lakini kwa utoaji wa taratibu utalazimika kuipata mara nyingi zaidi. Unaweza kurekebisha tabia ya Flexbox na hacks, lakini gridi za CSS ni mfumo bora zaidi wa kuweka ukurasa mzima (Flexbox ni nzuri kwa vifaa vidogo, ingawa).

Mabadiliko katika Chrome

Tabia ya sasa ya Chrome/Safari inaendana nyuma, wao huzuia tu uwasilishaji kwa muda mrefu kuliko inavyohitajika. Tabia ya Firefox ni ngumu zaidi, lakini kuna suluhisho ...

Rekebisha kwa Fox

Kwa kuwa Firefox haizuii utoaji kila wakati katika kesi ya , unahitaji kuchezea nayo kidogo ili kuzuia kufifia kwa yaliyomo uchi. Kwa bahati nzuri hii ni rahisi sana kwani inazuia uchanganuzi lakini pia inangoja mitindo kupakia:

…

Ili hii ifanye kazi, kipengele lazima kisiwe tupu; nafasi ndani yake inatosha.

Firefox na Edge na IE itakuonyesha uwasilishaji mzuri wa polepole, wakati Chrome na Safari zitaonyesha Skrini nyeupe mpaka CSS yote imejaa kikamilifu. Tabia ya sasa ya Chrome na Safari sio mbaya zaidi kuliko kuweka mitindo yote ndani, kwa hivyo unaweza kuanza kutumia njia hii sasa. Katika miezi ijayo, Chrome itabadilika kwa mbinu ya Edge, na watumiaji zaidi wataona uwasilishaji haraka zaidi.

Kwa hivyo hapa kuna njia rahisi kwako ya kusafirisha tu CSS inahitajika na wakati huo huo kupata utoaji wa haraka zaidi. Furahia kwa afya yako!