A ranar 2 ga Fabrairu, 2017 da ta gabata, Ann Taylor ta rubuta makalar 12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right a CodeInWP. Mun kwashe sama da shekara guda muna ci gaba da inganta Page Builder Sandwich: muna gudanar da bincikenmu, muna sauraron kwastomominmu, don haka muna tsammanin Page Builder Sandwich zai shiga cikin makalar CodeInWP ta “Wadanda Suka Yi Daidai”. Amma ba mu shiga ba, saboda matsalar aiki. 
Don haka muka tambayi Ann game da hakan, sai ta ba da amsa:
…Na gwada amfani da sigar kyauta na wani dan lokaci. Tana nuna kyakkyawan fata sosai: tarin kayayyaki (modules), UI mai saukin fahimta, kyakkyawan tsarin WYSIWYG, ana iya jan komai cikin sauki. Sai dai kuma, lokacin da na sanya kusan kayayyaki 10 a shafin, ya zama da wuya a ci gaba da aiki da shi saboda karancin saurin gyara…
Don haka a cewarta, Page Builder Sandwich yana da matsalolin aiki. Kuma tun da muna sauraron ra’ayoyi koyaushe, sai muka duba lamarin.
Gwajin Aiki
Muna bukatar hanyar duba aikin PBS; tunda PBS galibi yana aiki ne a kan burauza ta hanyar Javascript, Timeline profiler na Chrome shine kayan aiki da ya dace da aikin. Mai auna timeline na iya gano da auna wadanne ayyuka ke gudana a shafin yanar gizo yayin aiki, wanda ya dace kwarai wajen gano abubuwan da ke rage gudu.
Mun ga ya kamata mu fara gwada matakai mafi sauki da farko – jawo linzamin kwamfuta a kan abubuwa da layuka daban-daban. Mai sauki ko? Muna da kwarin gwiwar cewa ba za mu gamu da matsalolin aiki ba tare da wani abu mai sauki kamar wannan. Abin takaici, mun yi kuskure.
Bayan mun danna maballin rikodin, mun ja linzamin kwamfuta na kusan dakiku 2 a kan allon, sannan muka danna maballin tsayawa. Ga sakamakon timeline daga mai auna aikin:
Kuma sai ga shi. Ya cika makil da matsalolin da ke tauye aiki!
Akwai abubuwa da yawa da ke faruwa a jadawalin, amma babban abin lura shine akwai yankuna masu launin shunayya da yawa a ciki (wanda bai kamata ya kasance haka ba). Bugu da kari, wadannan yankuna masu launin shunayya a bayyane suke cewa suna da fadi sosai, kuma dukansu kamar suna kaiwa kololuwar jadawalin. Za ku kuma lura cewa jadawalin yana cike a koyaushe, kuma yankunan shunayya kusan ba sa sauka zuwa sifili. Da alama burauzar a koyaushe tana aiki tana yin wani abu, kuma kusan ba ta hutawa.
Amma me duk wadancan yankuna masu launin shunayya ke nufi a zahiri?
Mai auna aikin ya sanar da mu cewa ana kiran su reflows. Ga ma’anar abin da reflow yake daga shafin Google Developer:
Reflow shine sunan aikin burauzar gizo na sake lissafin wurare da siffofin abubuwa a cikin daftarin aiki.. reflow aiki ne da ke dakatar da mai amfani a cikin burauza.
Don haka wannan yana nufin cewa yawo da linzamin kwamfutarka a cikin PBS yana haifar da reflows masu yawan gaske. Abin da ya fi muni shine kowane reflow yana dakatar da burauzar na dan wani lokaci domin ta kammala lissafinta. Karin reflows yana nufin karin dakatarwar burauza, kuma aikin yana kara zama marar santsi. A takaice, yawan yankunan shunayya = matsala.
Don haka ya nuna cewa Ann tana da gaskiya: lallai muna da babbar matsalar aiki, don haka tawagarmu nan take ta fara aiki don gyara shi ba tare da bata lokaci ba.
Gyara Matsalar Reflow / Jank Dinmu
Kafin komai, muna bukatar yin bincike don gano ainihin abin da ke haddasa wannan reflow da farko. Mun gano cewa a zahiri, abubuwa da dama da aka saba amfani da su a Javascript na iya tursasa burauza ta haifar da reflow.
Kusan kowace aiki da za ku iya amfani da ita don samun fadi, tsawo ko matsayin wani sashe na DOM na iya haifar da reflow. Paul Irish ya rubuta cikakken jerin dukkan kaddarori da ayyuka a cikin Javascript da za su iya yin hakan. Mummunan labarin shine Page Builder Sandwich yana amfani da da yawa daga cikin wadannan kaddarori da ayyuka, wadanda dukkansu ke haifar da reflow:
- elem.getBoundingClientRect()
- window.getComputedStyle()
- window.scrollY
- da sauran su da yawa…
Gyara #1: Ajiye Ayyukan Reflow Masu Cin Karfi a Ma’aji (Caching)
Mafita mafi bayyane ita ce KADA a yi amfani da wadancan kaddarori da ayyuka. Sai dai kuma, PBS ya dogara sosai a kansu kuma ba za mu iya aiki ba tare da su ba.
Mafitar da ta rage mana ita ce rage yawan kiran wadancan ayyukan gwargwadon iko. Bangare mai wuya a nan shi ne mun yi amfani da wadancan kaddarori da ayyuka sau da yawa a sassa daban-daban na PBS, kuma mafi yawan lokuta, muna amfani da su a kan abu daya na DOM sau da yawa. Don gyara wannan, mun kirkiri tsarin ma’aji namu na musamman ga kowace kadara/aiki mai matsala.
Misali, aikin getBoundingClientRect yana ba mu ainihin ma’aunin pixels na sama, hagu, fadi, tsawo, dama, da kasa na wani abu na DOM. Muna amfani da wannan aikin a kowane lokaci don lissafin inda za a zana layukan shaci na abubuwa a PBS. Ga aikin ma’aji da muka kirkira don wannan:
// Cache: Our client rects are kept here, we can use this to clear them later.
var elemsWithBoundingRects = [];
window.pbsGetBoundingClientRect = function( element ) {
// Check if we already got the client rect before.
if ( ! element._boundingClientRect ) {
// If not, get it then store it for future use.
element._boundingClientRect = element.getBoundingClientRect();
elemsWithBoundingRects.push( element );
}
return element._boundingClientRect;
};
Maimakon kiran getBoundingClientRect , yanzu muna amfani da pbsGetBoundingClientRect . Yanzu a duk lokacin da aka nemi client rect, muna adana wannan darajar don amfani a gaba, ta haka muke takaita adadin abubuwan da ke haifar da reflow.
Muna kuma bukatar hanyar share ma’ajiyar a lokacin da client rects da aka adana suka daina aiki. Darajar client rect da aka adana tana canzawa yayin da mai amfani ya matsar da shafin ko ya kara/canza/cire abubuwa a allon. Don haka mun kirkiri aikin share ma’aji wanda za mu iya kira a duk lokacin da muke bukatar sabbin darajojin client rect:
var clearClientRects = function() {
var i;
for ( i = 0; i < elemsWithBoundingRects.length; i++ ) {
if ( elemsWithBoundingRects[ i ] ) {
elemsWithBoundingRects[ i ]._boundingClientRect = null;
}
}
elemsWithBoundingRects = [];
};
Mun kuma yi wannan tsarin ma’ajiyar ga sauran kiran ayyuka masu cin karfi da mukan saba amfani da su.
Gyara #2: Hada Karatu & Rubutu Wuri Guda Ta Amfani da FastDom
Aiwatar da gyara #1 ya kara ingancin aikin PBS, amma hakan bai isa ba.
Bayan kara yin bincike a Google, mun ci karo da wata makala ta Wilson Page a kan Hana ‘layout thrashing’. Wilson ya ce:
Layout Thrashing (reflow) na faruwa ne lokacin da JavaScript ke yawan rubutu da karatu a jere daga DOM sau da yawa, wanda ke haifar da reflows na daftarin aiki.
A zahiri, bai isa a takaita kiranka ga takamaiman kaddarori da ayyuka masu haifar da reflow kawai ba. Lokacin da kake gudanar da jerin “karatu” da “rubutu” masu yawa a jere a kan DOM, hakan ma yana haifar da reflow na burauza. Ga misali na yau da kullun, kai tsaye daga shafin Wilson:
// Read
var h1 = element1.clientHeight;
// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';
// Read (triggers reflow)
var h2 = element2.clientHeight;
// Write (invalidates layout)
element2.style.height = (h2 * 2) + 'px';
// Read (triggers reflow)
var h3 = element3.clientHeight;
// Write (invalidates layout)
element3.style.height = (h3 * 2) + 'px';
// Document reflows at end of frame
Misalin da ke sama yana haifar da reflows sau 3 saboda ma’aunin dukkan shafin yana lalacewa bayan an yi rubutu. Gyaran da aka ba da shawara a kan wannan shine sake tsara lambar don tattara dukkan karatu da rubutu wuri guda ta yadda duk aikin zai haifar da reflow guda 1 kacal a burauza:
// Read
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';
// Document reflows at end of frame
Wannan karamin bangare na lamba da ke sama ya sa gyara matsalar ya yi kama da abu mai sauki. Amma a zahiri, a cikin PBS, karatu da rubuta abubuwan da ke haifar da reflow yana faruwa a wurare daban-daban a lokuta daban-daban yayin gudanar da PBS. Sake tsara dubban layukan lambar Javascript abu ne da ba zai yiwu ba.
Cikin sa’a a gare mu, Wilson ya kuma samar da mafita a cikin makalarsa. Ya kirkiri wani karamin rubutun aiki don taimakawa wajen tattara wadancan karatu da rubutu wuri guda, mai suna FastDom.
Ga wasu lambobin tsari daga Page Builder Sandwich da ke amfani da FastDom sannan kuma suka hada da Gyaranmu #1 da ke sama:
// Bunch together the reads from other threads.
fastdom.measure( function() {
// Use our cached client rect.
var rect = window.pbsGetBoundingClientRect( elem );
// Bunch together the writes from other threads.
fastdom.mutate( function() {
elem.style.top = ( rect.top + window.pbsScrollY() ) + 'px';
elem.style.height = rect.height + 'px';
elem.style.left = rect.left + 'px';
elem.style.width = rect.width + 'px';
}.bind( this ) );
}.bind( this ) );
Abin da FastDom ke yi shi ne yana tattara dukkan kiran fastdom.measure da dukkan kiran fastdom.mutate wuri guda kuma ya aiwatar da su a lokuta daban-daban ba tare da jiran juna ba, yadda ya kamata yana hada dukkan karatu da rubutu wuri guda don rage duk reflows a cikin burauzar.
Gyara #3: Shiga Abubuwan Salo Yana Cin Lokaci Sosai
Mun kuma gano tare da taimakon jsPerf cewa wasu ayyukan samo salo sun fi sauran sauri.
A cikin PBS, galibi muna bukatar samun ainihin darajar wani salo na musamman na wani abu. Misali, yawanci muna amfani da wannan don samun gefen sama:
var styles = window.getComputedStyle( elem );
var marginTop = styles.marginTop;
Amma, mun gano cewa yin wannan yana da sauri sosai:
var marginTop = elem.style.marginTop;
Sai dai kuma, elem.style.marginTop da getComputedStyle sun sha bamban sosai. Na farkon yana ba mu salon da ke jikin abun kawai, kuma ba ya la’akari da kowane takardar salo; kuma na biyun yana la’akari da duka salon cikin layi da takardun salo.
Bugu da kari kuma, koda lokacin da aka adana sakamakon getComputedStyle a ma’aji, har yanzu yana da jinkiri sosai. Kamar yadda aka gano, shiga cikin asalin style object din kansa shine aikin da ke daukar lokaci.
Cikin sa’a a gare mu, PBS yana sanya salon inline a jikin abubuwa, kuma tunda salon inline yana da fifiko (mafi yawan lokuta) akan takardun salo, za a samu lokuta da samun darajar salon inline zai wadatar. Don haka idan muka hada hanyoyin biyu da ke sama, za mu iya fitar da lambar aiki da ke gudu da sauri sosai:
var marginTop = elem.style.marginTop;
if ( ! marginTop ) {
var styles = window.getComputedStyle( elem );
marginTop = styles.marginTop;
}
Sakamakon Inganta Lambar Tsari
Gyararrakinmu guda 3 da ke sama sun dauki bincike mai yawa, gwaji da ainihin aiwatarwa (kuma sun jinkirta sakin fasalinmu na Fonts), amma a karshe duk sun cancanci hakan.
Idan muka koma ga gwajinmu na farko na jawo linzamin kwamfuta a kan allon na tsawon dakiku 2. Ga tsohon timeline marar kyau/marar santsi:
Kuma ga yadda sabon timeline dinmu yake bayan inganta aikin:
Kamar yadda kuke gani, akwai karancin abubuwa masu launin shunayya a jadawalin. Kuma akwai bambanci na gani dangane da yawan ayyukan da burauzar ke yi. Abubuwa masu siffar murabba’i a kasa su ma sun fi siranta, wanda ke nufin ana gudanar da ayyukan da sauri fiye da da.
Idan ka kwatanta adadin dogaye/faffadan yankuna masu launin shunayya a cikin tsohon da sabon jadawalin, muna magana ne a kan wani gagarumin karin ingancin aiki da kashi 200%! Muna kuma ganin karin saurin aiki a dukkan bangarori. Ba abu marar kyau ba ko kadan!
Abubuwan Lura & Darussa da Aka Koya
A gaskiya, ba mu yi zaton PBS na da matsalolin aiki ba kafin Ann ta kawo maganar. Galibi saboda muna amfani da kwamfutoci masu karfi da aka kera don aikin habakawa, kuma matsalolin aiki ba su fito fili sosai ba. Idan muka duba baya, duba ingancin aiki ya kamata ya zama daya daga cikin manyan abubuwan da za a ba fifiko. Amma akalla a yanzu, ya zuwa sigar 4.3 an magance shi. 
Ga wadanda ke son inganta aikin manhajar WordPress plugin dinsu, musamman idan kuna amfani da Javascript mai nauyi sosai, ga abubuwan lura da na koya daga wannan gogewar:
- Rage/ajiye kiran kaddarori/ayyuka da ke haifar da reflow a ma’aji. Yi amfani da wannan a matsayin jagora: What forces layout/reflow. The comprehensive list.
- Tattara “karatu” da “rubutu” zuwa salon DOM wuri guda. Yi amfani da FastDom don yi muku wannan.
- Yi amfani da Timeline profiler na Chrome, kuma ka tabbatar kana da karancin reflows (abubuwa masu launin shunayya) gwargwadon iko.
Kuma sai ga shi. Ya cika makil da matsalolin da ke tauye aiki!
Kamar yadda kuke gani, akwai karancin abubuwa masu launin shunayya a jadawalin. Kuma akwai bambanci na gani dangane da yawan ayyukan da burauzar ke yi. Abubuwa masu siffar murabba’i a kasa su ma sun fi siranta, wanda ke nufin ana gudanar da ayyukan da sauri fiye da da.
