Cishe eminyakeni engu-15 edlule, ngangisebenza enkampanini lapho sakha khona izinhlelo zokusebenza zama-agent ezokuhamba, izisebenzi zezindiza, nezinkampani zezindiza. Sakha nohlaka lwethu lwangaphakathi lwezingxenye ze-UI namandla ohlelo lokusebenza lwekhasi elilodwa. Besinezingxenye zayo yonke into: izinkambu, izinkinobho, amathebhu, ububanzi, amathebula edatha, amamenyu, izikhethi zedethi, okukhethiwe, nokukhetha okuningi. Saze saba nengxenye ye-div. Ingxenye yethu ye-div ibiyinhle ngendlela, isivumele ukuthi senze amakhona ayindilinga kuzo zonke iziphequluli, okuthi, kholwa noma ungakholwa, bekungeyona into elula ukuyenza ngaleso sikhathi.
Umsebenzi wethu wenzeka esikhathini esithile emlandweni wethu lapho i-JS, i-Ajax, ne-HTML eguquguqukayo ibonwa njengoguquko olwasiletha esikhathini esizayo. Kungazelelwe, singabuyekeza ikhasi ngokushintshashintshayo, sithole idatha kuseva, futhi sigweme ukuzulazula siye kwamanye amakhasi, abonakale njengokunensa futhi akhanyise unxande omkhulu omhlophe esikrinini phakathi kwamakhasi amabili. Kube nenkulumo, eyenziwe yaduma nguJeff Atwood (umsunguli we-StackOverflow), eyayifundeka kanje: “Noma iyiphi i-application engabhalwa ku-JavaScript ekugcineni izobhalwa nge-JavaScript.”— UJeff Atwood
Kithina ngaleso sikhathi, lokhu kwakuzwakala njengesibindi sokuyodala lezo zinhlelo zokusebenza. Kwazwakala njengemvume yokulala ukwenza yonke into nge-JS. Ngakho senza yonke into nge-JS, futhi asizange sizinike isikhathi sokucwaninga ngezinye izindlela zokwenza izinto. Asizange sisizwe ngempela isisusa sokufunda kahle ukuthi yini i-HTML ne-CSS engayenza. Asizange siyibone ngempela iwebhu njengenkundla yohlelo lokusebenza eguqukayo iyonke. Isikhathi esiningi sikubone njengento ebesiyidinga ukuze sisebenze eduze, ikakhulukazi uma kukhulunywa ngosekelo lwesiphequluli. Singavele siphonse i-JS eyengeziwe kuyo ukuze senze izinto zenzeke. Ingabe ukuthatha isikhathi sokufunda okwengeziwe ngendlela iwebhu esebenza ngayo nokuthi yini eyayitholakala endaweni yesikhulumi kungangisiza? Impela, bengingase ngiphuce inqwaba yekhodi ebingadingeki ngempela. Kodwa, ngaleso sikhathi, mhlawumbe hhayi kangako. Uyabona, umehluko wesiphequluli wawubaluleke kakhulu ngaleso sikhathi. Lesi kwakuyisikhathi lapho i-Internet Explorer yayiseyisiphequluli esiphezulu, iFirefox ingeyesibili eseduze, kodwa iqala ukulahlekelwa isabelo semakethe ngenxa ye-Chrome eyathola ukuduma ngokushesha. Nakuba i-Chrome neFirefox zazizinhle kakhulu ukuvumelana ngezindinganiso zewebhu, izimo lapho izinhlelo zethu zokusebenza zazisebenza zazisho ukuthi kufanele sisekele i-IE6 isikhathi eside. Ngisho nalapho sivunyelwe ukusekela i-IE8, kwakusadingeka sibhekane nomehluko omkhulu phakathi kweziphequluli. Hhayi lokho kuphela, kodwa iwebhu yangaleso sikhathi yayingenawo amakhono amaningi awakhelwe endaweni yesikhulumi.
Shesha phambili kuze kube namuhla. Izinto zishintshe kakhulu. Akukhona nje kuphela ukuthi sinalawa makhono amaningi kunangaphambili, kodwa izinga atholakala ngalo linyukile nalo. Ake ngiphinde ngibuze umbuzo, bese: Ingabe ukuthatha isikhathi sokufunda kabanzi mayelana nokuthi iwebhu isebenza kanjani nokuthi yini etholakala endaweni yesikhulumi ingakusiza namuhla? Yebo impela. Ukufunda ukuqonda nokusebenzisa inkundla yewebhu namuhla kukubeka enzuzweni enkulu kunabanye onjiniyela. Kungakhathaliseki ukuthi usebenza ekusebenzeni, ukufinyeleleka, ukuphendula, konke ndawonye, noma ukuthumela izici ze-UI, uma ufuna ukukwenza njengonjiniyela onomthwalo wemfanelo, ukwazi amathuluzi atholakalayo kuwena kukusiza ukuthi ufinyelele imigomo yakho ngokushesha nangcono. Ezinye Izinto Ongase Ungasazidingi Umtapowolwazi Ukwazi ukuthi yiziphi iziphequluli ezisekela namuhla, umbuzo-ke uthi: Yini esingayiyeka? Ingabe sidinga ingxenye ye-div ukuze senze amakhona ayindilinga ngo-2025? Yebo, asikwenzi. Indawo yerediyasi yomngcele isekelwe yizo zonke iziphequluli ezisetshenziswa njengamanje ngaphezu kweminyaka eyi-15 kuleli phuzu. Futhi i-corn shape nayo iyeza maduze, emakhoneni ama-fancier. Ake sibheke izici zakamuva ezitholakala kuzo zonke iziphequluli ezinkulu, futhi ongazisebenzisa esikhundleni sokuncika okukhona ku-codebase yakho. Iphuzu akukhona ukulahla ngokushesha yonke imitapo yolwazi yakho oyithandayo bese ubhala kabusha i-codebase yakho. Ngokuqondene nakho konke okunye, uzodinga ukucabangela ukwesekwa kwesiphequluli kuqala bese unquma ngokusekelwe kwezinye izici eziqondene nephrojekthi yakho. Izici ezilandelayo zisetshenziswa ezinjinini ezintathu zesiphequluli eziyinhloko (i-Chromium, i-WebKit, ne-Gecko), kodwa ungase ube nezimfuneko ezihlukile zosekelo lwesiphequluli ezikuvimbela ukuthi uzisebenzise ngokushesha. Manje kuseyisikhathi esihle sokufunda ngalezi zici, noma kunjalo, futhi mhlawumbe uhlele ukuzisebenzisa ngesikhathi esithile. Ama-Popovers Nezingxoxo I-Popover API,
Impela, isivinini sakho sokuxhumeka kwe-inthanethi cishe sesikhuphukile, futhi, kodwa akunjalo kuwo wonke umuntu. Futhi akubona bonke abanamakhono edivayisi afanayo. Ukudonsa ikhodi yenkampani yangaphandle yezinto ongazenza ngeplathifomu, esikhundleni salokho, cishe kusho ukuthi uthumela amakhodi amaningi, ngakho-ke ufinyelela amakhasimende ambalwa kunalokho obungawenza ngokujwayelekile. Kuwebhu, ukusebenza kabi kokulayisha kuholela emazingeni amakhulu okushiywa futhi kulimaza isithunzi somkhiqizo. Isebenzisa Ikhodi Encane Kumadivayisi Ngaphezu kwalokho, ikhodi oyithumelayo kumadivayisi amakhasimende akho kungenzeka isebenze ngokushesha uma isebenzisa izifinyezo ezimbalwa ze-JavaScript ngaphezulu kwenkundla. Futhi kungenzeka ukuthi iyaphendula futhi ifinyeleleka kalula ngokuzenzakalelayo. Konke lokhu kuholela ekwandeni namakhasimende ajabule. Hlola ibhulogi yegebe lokungalingani kokusebenza kuka-Alex Russell waminyaka yonke, ebonisa ukuthi amadivayisi we-premium awekho kakhulu ezimakethe ezinezigidigidi zabasebenzisi ngenxa yokungalingani kwengcebo. Futhi leli gebe likhula ngokuhamba kwesikhathi.
Isakhiwo Sendawo Esakhelwe Ngaphakathi Isici esisodwa seplathifomu yewebhu ezayo maduze futhi engijabule kakhulu ngaso i-CSS Masonry.
Ake ngiqale ngokuchaza ukuthi yini iMasonry. Yini I-Masonry I-Masonry wuhlobo lwesakhiwo olwenziwa lwaduma yi-Pinterest eminyakeni edlule. Idala amathrekhi azimele wokuqukethwe lapho izinto zizipakisha khona eduze nasekuqaleni kwengoma ngangokunokwenzeka.
Abantu abaningi babona i-Masonry njengenketho enhle yamaphothifoliyo namagalari ezithombe, okuyinto engayenza. Kodwa i-Masonry iguquguquka kakhulu kunalokho okubona ku-Pinterest, futhi ayikhawulelwe ekuhlelweni okufana nempophoma. Kusakhiwo seMasonry:
Amathrekhi angaba amakholomu noma imigqa:
Amathrekhi wokuqukethwe akudingekile ukuthi wonke alingane:
Izinto zingasebenzisa amathrekhi amaningi:
Izinto zingabekwa kumathrekhi athile; akudingeki njalo balandele i-algorithm yokubeka ezenzakalelayo:
Amademo Nawa amademo ambalwa alula engiwenze ngokusebenzisa ukuqaliswa okuzayo kwe-CSS Masonry ku-Chromium. Idemo yegalari yezithombe, ebonisa ukuthi izinto (isihloko kuleli cala) zingadlala amathrekhi amaningi:
Enye igalari yezithombe ebonisa amathrekhi osayizi abahlukene:
Isakhiwo sesayithi lezindaba esinamathrekhi abanzi kunamanye, nezinye izinto ezihlanganisa bonke ububanzi besakhiwo:
Ibhodi le-canban elibonisa ukuthi izinto zingabekwa kumathrekhi athile:
Qaphela: Iamademo adlule enziwe ngenguqulo ye-Chromium engakatholakali kubasebenzisi abaningi bewebhu, ngoba i-CSS Masonry isanda kuqala ukusetshenziswa kuziphequluli. Kodwa-ke, abathuthukisi bewebhu bebelokhu besebenzisa imitapo yolwazi ngenjabulo ukudala izakhiwo zeMasonry iminyaka. Amasayithi Asebenzisa I-Masonry Namuhla Ngempela, i-Masonry ivame kakhulu kuwebhu namuhla. Nazi izibonelo ezimbalwa engizithole ngaphandle kwe-Pinterest:
Futhi izibonelo ezimbalwa ezengeziwe, ezingacacile kakhulu:
Ngakho-ke, zakhiwe kanjani lezi zakhiwo? Ama-Workaround Iqhinga elilodwa engilibonile lisetshenziswa ukusebenzisa ukwakheka kwe-Flexbox esikhundleni salokho, ukushintsha isiqondiso sayo sibe yikholomu, nokuyimisa ukuthi igoqe. Ngale ndlela, ungabeka izinto ezinobude obuhlukene kumakholomu amaningi, azimele, unikeze umbono wesakhiwo seMasonry:
Kodwa-ke, kunemikhawulo emibili ngalolu hlelo lokusebenza:
Ukuhleleka kwezinto kuhlukile kulokho obekungaba khona ngesakhiwo sangempela seMasonry. Nge-Flexbox, izinto zigcwalisa ikholomu yokuqala kuqala futhi, lapho isigcwele, bese uya kukholamu elandelayo. Nge-Masonry, izinto zinganqwabelana kunoma iyiphi ithrekhi (noma ikholomu kuleli cala) enesikhala esengeziwe esitholakalayo. Kodwa futhi, futhi mhlawumbe okubaluleke nakakhulu, le ndlela yokusebenza idinga ukuthi usethe ukuphakama okungaguquki esitsheni se-Flexbox; ngaphandle kwalokho, akukho ukugoqa okuzokwenzeka.
Imitapo yolwazi yamaMasonry yenkampani yangaphandle Ezimweni ezithuthuke kakhulu, onjiniyela bebesebenzisa amalabhulali. Umtapo wolwazi owaziwa kakhulu nodumile walokhu umane ubizwa ngokuthi i-Masonry, futhi ulandwa izikhathi ezingaba ngu-200,000 ngesonto ngokusho kwe-NPM. I-squarespace iphinde inikeze ingxenye yesakhiwo enikeza ukwakheka kweMasonry, ngokunye okungenayo ikhodi, futhi amasayithi amaningi ayayisebenzisa. Zombili lezi zinketho zisebenzisa ikhodi ye-JavaScript ukubeka izinto esakhiweni. I-Masonry eyakhelwe ngaphakathi Ngijabule kakhulu ukuthi iMasonry manje isiqala ukuvela kuziphequluli njengesici esakhelwe ngaphakathi se-CSS. Ngokuhamba kwesikhathi, uzokwazi ukusebenzisa i-Masonry njengoba wenza iGridi noma i-Flexbox, okungukuthi, ngaphandle kokudinga ama-workaround noma ikhodi yomuntu wesithathu. Ithimba lami kwaMicrosoft belisebenzisa ukwesekwa kweMasonry eyakhelwe ngaphakathi kuphrojekthi yomthombo ovulekile weChromium, i-Edge, i-Chrome, nezinye iziphequluli eziningi ezisekelwe kuyo. I-Mozilla empeleni yayingumthengisi wokuqala wesiphequluli ukuphakamisa ukuqaliswa kokuhlolwa kwe-Masonry emuva ngo-2020. Futhi u-Apple ube nentshisekelo enkulu ekwenzeni lesi sakhiwo esisha sewebhu senzeke. Umsebenzi wokulinganisa isici nawo uya phambili, ngokuvumelana neqembu elisebenzayo le-CSS mayelana nenkomba evamile ngisho nesibonisi esisha sohlobo: imizila yegridi. Uma ufuna ukufunda okwengeziwe mayelana ne-Masonry futhi ulandelele inqubekelaphambili, hlola ikhasi lami lezinsiza ze-CSS Masonry. Ngokuhamba kwesikhathi, lapho i-Masonry iba isici Esiyisisekelo, njengeGridi noma i-Flexbox, sizokwazi ukumane siyisebenzise futhi sizuze kulokhu:
Ukusebenza okungcono, Ukusabela okungcono, Ukusebenziseka kalula kanye nekhodi elula.
Ake sizihlolisise lezi. Ukusebenza Okungcono Ukwenza isistimu yakho yesakhiwo esifana ne-Masonry, noma ukusebenzisa umtapo wolwazi wezinkampani zangaphandle, kusho ukuthi kuzodingeka usebenzise ikhodi ye-JavaScript ukuze ubeke izinto esikrinini. Lokhu futhi kusho ukuthi le khodi izonikeza ukuvimba. Ngempela, ngeke kuvele lutho, noma izinto ngeke zibe sendaweni efanele noma osayizi abalungile, kuze kube yilapho leyo khodi ye-JavaScript isiqalile. Isakhiwo se-masonry sivame ukusetshenziselwa ingxenye eyinhloko yekhasi lewebhu, okusho ukuthi ikhodi izobe yenza okuqukethwe kwakho okuyinhloko kuvele ngemva kwesikhathi kunokuba bekungenzeka ngenye indlela, yehlisa isithunzi i-LCP yakho, noma i-Largest Contentful Paint metric, edlala indima enkulu ekusebenzeni okucatshangwayo kanye nokuthuthukisa injini yokusesha. Ngihlole ilabhulali ye-Masonry JS ngesakhiwo esilula nangokulingisa uxhumo olunensayo lwe-4G ku-DevTools. Ilabhulali ayinkulu kakhulu (24KB, 7.8KB gzipped), kodwa kuthathe 600ms ukulayisha ngaphansi kwezimo zami zokuhlola. Nakhu okurekhodiwe kokusebenza okubonisa ukuthi isikhathi eside sokulayisha esingu-600ms selabhulali ye-Masonry, nokuthi awukho omunye umsebenzi wokunikeza owenzekile ngenkathi lokho kwenzeka:
Ngaphezu kwalokho, ngemva kwesikhathi sokuqala sokulayisha, iskripthi esilandiwe sabe sesidingeka ukuthi sihlukaniswe, sihlanganiswe, bese sisebenza. Konke lokhu, njengoba kushiwo ngaphambili, bekuvimba ukukhishwa kwekhasi. Ngokusetshenziswa kwe-Masonry eyakhelwe ngaphakathi esipheqululini, ngeke sibe neskripthi esingasilayisha futhi sisebenze. Injini yesiphequluli izokwenza into yayo phakathi nesinyathelo sokuqala sokunikeza ikhasi. Ukusabela Okungcono Ngokufanayo nalapho ikhasi liqala ukulayisha, ukushintsha usayizi wewindi lesiphequluli kuholela ekunikezeni isakhiwo kulelo khasi futhi. Nokho, kuleli qophelo, uma ikhasi lisebenzisa umtapo wezincwadi weMasonry JS, asikho isidingo sokulayisha umbhalo futhi, ngoba kakadelapha. Nokho, ikhodi ehambisa izinto ezindaweni ezifanele idinga ukusebenza. Manje lo mtapo wolwazi ubonakala ushesha kakhulu ekwenzeni lokhu lapho ikhasi lilayisha. Nokho, yenza izinto zibe eziphilayo uma zidinga ukuya endaweni ehlukile ekushintsheni usayizi wewindi, futhi lokhu kwenza umehluko omkhulu. Impela, abasebenzisi abachithi isikhathi beshintsha usayizi wamawindi wesiphequluli sabo njengoba kwenza thina onjiniyela. Kodwa lokhu okwenziwayo wokushintsha usayizi okugqwayizayo kungaba kuhle kakhulu futhi kungeze esikhathini esicatshangwayo esisithathayo ukuze ikhasi lizivumelanise nosayizi walo omusha. Ukusetshenziswa Kalula Nekhodi Elula Kulula kangakanani ukusebenzisa isici sewebhu nokuthi ikhodi ibonakala ilula kangakanani yizici ezibalulekile ezingenza umehluko omkhulu eqenjini lakho. Ngeke zibaluleke njengokwenziwa komsebenzisi kokugcina, kunjalo, kodwa ukuzizwisa kukanjiniyela kuthinta ukugcinwa. Ukusebenzisa isici sewebhu esakhelwe ngaphakathi kuza nezinzuzo ezibalulekile kulokho ngaphambili:
Onjiniyela asebeyazi kakade i-HTML, CSS, ne-JS cishe bazokwazi ukusebenzisa leso sici kalula ngoba siklanyelwe ukuhlanganisa kahle futhi sihambisane nayo yonke ingxenyekazi yewebhu. Abukho ubungozi bokwephula izinguquko ezethulwe endleleni isici esisetshenziswa ngayo. Cishe abukho ubungozi bokuba leso sici sihoxiswe noma singanakekelwa.
Endabeni yeMasonry eyakhelwe ngaphakathi, ngenxa yokuthi iyisakhiwo sakudala, uyisebenzisa ukusuka ku-CSS, njengeGridi noma i-Flexbox, ayikho i-JS ehilelekile. Futhi, ezinye izakhiwo ze-CSS ezihlobene nesakhiwo, njengegebe, zisebenza ngendlela obungayilindela ngayo. Awekho amaqhinga noma amasu okusebenza okumele ukwazi ngawo, futhi izinto ozifundayo zibhalwe ku-MDN. Ku-lib ye-Masonry JS, ukuqaliswa kuyinkimbinkimbi kancane: kudinga isibaluli sedatha esine-syntax ethile, kanye nezinto ezifihliwe ze-HTML ukuze kusethwe ikholomu namasayizi wegebe. Futhi, uma ufuna ukunweba amakholomu, udinga ukufaka usayizi wegebe ngokwakho ukuze ugweme izinkinga: