Blog

Bishii Febraayo 2, 2017 ee la soo dhaafay, Ann Taylor waxay maqaalka 12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right ku qortay CodeInWP. In ka badan hal sano ayaan si joogto ah u horumarinaynay Page Builder Sandwich: waxaan sameynaa cilmi-baaris, waxaan dhageysanaa macaamiisheena, sidaas darteed waxaan u maleeynay in Page Builder Sandwich uu ka mid noqon doono maqaalka CodeInWP ee “Who Got it Right”. Hase yeeshee, ma aannaan gaarin arrintaas xawaaraha iyo waxqabadka dartiis. 

Markaa waxaan Ann wax ka weydiinnay arrintaas, waxayna ku jawaabtay:

…Wax yar ayaan tijaabiyay nooca bilaashka ah. Waxa ay muujinaysaa rajo weyn: modules badan, UI aad u dareen-gal ah oo fudud, waayo-aragnimo weyn oo WYSIWYG ah, wax walba si fudud ayaa loo jiidi karaa. Si kastaba ha ahaatee, markii aan bogga ku yeeshay ku dhawaad 10 modules, waxa ay noqotay mid adag in la sii wado shaqada sababtoo ah xawaaraha wax ka beddelka oo aad u hooseeyay awgeed…

Sida ay sheegtayna, Page Builder Sandwich waxa uu leeyahay dhibaatooyin xagga waxqabadka ah. Maadaama aan had iyo jeer dhageysanno jawaab-celinta, waan baarnay arrintaas.

Tijaabinta Waxqabadka

Waxaan u baahannay hab aan ku hubinno waxqabadka PBS; maadaama PBS inta badan ku shaqeyso barowsarka iyada oo loo marayo Javascript, Timeline profiler-ka Chrome ayaa ahaa qalabka saxda ah ee hawshaas. Timeline profiler-ku waxa uu aqoonsan karaa oo cabbiri karaa hawlgallada ka dhex socda bogga inta uu shaqeynayo, taas oo ku habboon helitaanka meelaha xawaaraha cidhiidhiga ku noqda.

Waxaan go’aansannay inaan marka hore tijaabinno tallaabooyinka ugu fudud – inaan jiirka ku dul marino waxyaabo (elements) iyo safaf badan. Fudud sax? Waxaan ku kalsoonayn inaanan la kulmi doonin wax dhibaato xagga waxqabadka ah wax sidan u fudud awgood. Nasiib-darro, waan qaldanayn.

Markii aan riixnay badhanka duubista, waxaan jiirka ku marnay shaashadda ilaa 2 ilbiriqsi, ka dibna waxaan riixnay badhanka joojinta.  Waa kan timeline-kii ka dhashay ee profiler-ka:

Yaab iyo amakaag! Waxa ay si buuxda u buuxsantay cidhiidhyo xagga waxqabadka ah!

Waxyaabo badan ayaa ka dhacaya garaafka, laakiin arrinta ugu cad ayaa ah inay ku jiraan meelo badan oo guduud ah (purple) (taas oo aanay ahayn inay sidaas noqoto). Waxaa intaas dheer, meelahan guduudka ah aad bay u ballaadhan yihiin, waxayna u muuqdaan inay wada gaarayaan meesha ugu sarreysa ee garaafka. Waxaad sidoo kale dareemi doontaa in garaafku had iyo jeer buuxo, meelaha guduudka ahna aysan ku dhowaad waligood hoos ugu dhicin eber. Waxay u egtahay in barowsarku had iyo jeer ku mashquulsan yahay wax samaynaya, oo uusan marnaba nasanayn.

Laakiin maxay dhab ahaantii ka dhigan yihiin dhammaan meelahaas guduudka ahi?

Profiler-ka ayaa si naxariis leh noogu sheegay in loogu yeero reflows. Waa tan qeexitaanka waxa uu reflow yahay oo laga soo xigtay barta Google Developer:

Reflow waa magaca hawsha barowsarka webka ee dib-u-xisaabinta boosaska iyo qaababka joomatari ee curiyeyaasha ku jira dukumentiga.. reflow waa hawlgal hortaagan isticmaalaha oo ka dhex dhaca barowsarka.

Markaa tani waxay la macno tahay in jiirkaaga oo aad ku dul wareejiso PBS ay kiciso reflows aad u badan. Waxa kasii daran ayaa ah in reflow kasta uu barowsarka si ku-meel-gaar ah u joojiyo si uu u dhammeystiro xisaabintiisa. Reflows badan waxay la macno yihiin hakadyo badan oo barowsarka ah, waayo-aragnimaduna waxay noqonaysaa mid sii qasantan (janky). Si ka fudud haddii loo dhigo, meelo badan oo guduud ah = xun.

Markaa waxa caddaatay in Ann ay saxnayd: runtii waxaan leennahay cidhiidhi weyn oo xagga waxqabadka ah, markaa kooxdayadu waxay markiiba u guntatay sidii ay u sixi lahayd arrintaas.

Xallinta Dhibaatadeenna Reflow / Jank

Ka hor wax kasta, waxaan u baahannay inaan sameyno cilmi-baaris si aan u ogaanno waxa sababaya reflow-gan marka horeba. Waxaan ogaannay inay muuqato, in waxyaabo badan oo caadi ah oo Javascript ku jira ay ku kicin karaan barowsarka inuu keeno reflow.

Ku dhawaad shaqo kasta oo aad u isticmaali karto inaad ku hesho ballaca, dhererka ama booska curiyaha DOM waxay kicin kartaa reflow. Paul Irish ayaa qoray liis ballaadhan oo ku saabsan dhammaan sifooyinka iyo shaqooyinka Javascript ee samayn kara arrintan. Warka xun ayaa ah in Page Builder Sandwich uu isticmaalo qaar badan oo ka mid ah sifooyinkan iyo shaqooyinkan, kuwaas oo dhammaantood keena reflow:

• elem.getBoundingClientRect()
• window.getComputedStyle()
• window.scrollY
• iyo kuwo kaloo badan…

Xalka #1: Kaydinta Hawlgallada Reflow ee Culayska Badan

Xalka ugu cad ayaa ah inaan LA isticmaalin sifooyinkaas iyo shaqooyinkaas. Si kastaba ha ahaatee, PBS aad ayey ugu tiirsan tahay iyaga mana ka maarmeyno.

Xalka noo haray ayaa ah inaan dhimno wicitaannada shaqooyinkaas intii suurtogal ah. Qaybta adag waxay ahayd inaan sifooyinkaas iyo shaqooyinkaas marar badan ku isticmaalnay qaybo kala duwan oo PBS ah, inta badanna, waxaan ku isticmaalnay isla curiyaha DOM dhawr jeer. Si aan tan u xallinno, waxaan u samaynay hab kaydin oo noo gaar ah sifo/shaqo kasta oo dhibaato leh.

Tusaale ahaan, shaqada getBoundingClientRect  waxay na siisaa cabbiraadaha pixel-ka ee hadda ee kor, bidix, ballac, dherer, midig, iyo hoos ee curiyaha DOM. Waxaan shaqadan isticmaalnaa mar kasta si aan u xisaabinno goobta lagu sawirayo xariiqaha dibadda ee curiyaha gudaha PBS. Waa kan shaqada kaydinta ee aan tan u abuurnay:

// Cache: Client rects-keena halkan ayaa lagu hayaa, waxaan u isticmaali karnaa inaan hadhow tirtirno.
var elemsWithBoundingRects = [];

window.pbsGetBoundingClientRect = function( element ) {

	// Hubi haddii aan hore u helnay client rect.
	if ( ! element._boundingClientRect ) {

		// Haddii kale, soo qaad ka dibna u keydi isticmaalka mustaqbalka.
		element._boundingClientRect = element.getBoundingClientRect();
		elemsWithBoundingRects.push( element );
	}
	return element._boundingClientRect;
};
​

Halkii aan ka wici lahayn getBoundingClientRect , waxaan hadda isticmaalnay pbsGetBoundingClientRect . Hadda mar kasta oo la weydiiyo client rect, waxaan qiimahaas u kaydinnaa tixraaca mustaqbalka, taas oo xaddidaysa tirada kiciyeyaasha reflow.

Waxaan sidoo kale u baahannay hab aan ku tirtirno kaydka marka client rects-ka la keydiyay ay noqdaan kuwo aan sax ahayn. Qiimayaasha client rect-ka la kaydiyay waxay isbeddelaan marka isticmaaluhu rogo bogga ama ku daro/beddelo/ka saaro curiyeyaal shaashadda. Sidaa darteed waxaan abuurnay shaqo tirtirta kaydka oo aan wici karno mar kasta oo aan u baahanno qiimayaal cusub oo client rect ah:

var clearClientRects = function() {
	var i;
	for ( i = 0; i < elemsWithBoundingRects.length; i++ ) {
		if ( elemsWithBoundingRects[ i ] ) {
			elemsWithBoundingRects[ i ]._boundingClientRect = null;
		}
	}
	elemsWithBoundingRects = [];
};​

Waxaan sidoo kale habkan kaydinta la midka ah u samaynay wicitaannada kale ee shaqooyinka culus ee aan sida caadiga ah isticmaalno.

Xalka #2: Isku-dubbaridka Akhrinta & Qorista Iyadoo La Adeegsanayo FastDom

Hirgelinta xalka #1 waxay kordhisay waxqabadka PBS, laakiin ma ahayn mid ku filan.

Markii aan wax yar Google ka sii baarnay, waxaan la kulannay maqaal uu qoray Wilson Page oo ku saabsan Ka-hortagga ‘layout thrashing’. Wilson wuxuu leeyahay:

Layout Thrashing (reflow) waxay dhacdaa marka JavaScript si xoog leh wax ugu qorto, ka dibna ka akhrido DOM, dhowr jeer taasoo keenaysa reflows-ka dukumentiga.

Sida muuqata, kuma filna inaad xaddiddo wicitaannadaada sifooyinka iyo shaqooyinka gaarka ah ee kiciya reflow. Markaad ku sameyso dhowr “akhris” iyo “qoris” oo isxigxiga DOM, waxay sidoo kale kicisaa reflow barowsar. Waa kan tusaale caadi ah, oo toos looga soo qaatay barta Wilson:

// Akhri
var h1 = element1.clientHeight;

// Qor (waxay burisaa qaabka)
element1.style.height = (h1 * 2) + 'px';

// Akhri (waxay kicisaa reflow)
var h2 = element2.clientHeight;

// Qor (waxay burisaa qaabka)
element2.style.height = (h2 * 2) + 'px';

// Akhri (waxay kicisaa reflow)
var h3 = element3.clientHeight;

// Qor (waxay burisaa qaabka)
element3.style.height = (h3 * 2) + 'px';

// Dukumentigu waxa uu sameeyaa reflow dhamaadka frame-ka​

Tusaalaha kore wuxuu kiciyaa 3 reflow sababtoo ah cabbirrada bogga oo dhan ayaa buraya ka dib marka wax la qoro. Xalka loo soo jeediyay arrintan ayaa ah in dib loo habeeyo koodhka si la isugu geeyo dhammaan akhrinta iyo qorista si waxaas oo dhami u kiciyaan kaliya 1 reflow oo barowsar ah:

// Akhri
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;

// Qor (waxay burisaa qaabka)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';

// Dukumentigu waxa uu sameeyaa reflow dhamaadka frame-ka​

Koodhka gaaban ee kore wuxuu ka dhigayaa xallinta dhibaatada mid fudud oo kale. Laakiin xaqiiqdii, gudaha PBS, akhrinta iyo qorista waxyaabaha kiciya reflow waxay ka dhacaan meelo badan oo kala duwan waqtiyo badan oo kala duwan inta lagu jiro nolosha shaqada PBS. Dib-u-habeynta kumannaan xariiq oo koodhka Javascript ah ma aha wax macquul ah.

Nasiib wanaag, Wilson wuxuu sidoo kale maqaalkiisa ku bixiyay xal. Waxa uu sameeyay qoraal yar oo utility ah si uu uga caawiyo isku-keenidda akhrintaas iyo qoristaas, kaas oo loogu yeero FastDom.

Waa kan koodh ka yimid Page Builder Sandwich oo adeegsanaya FastDom isla markaana ay ku jirto Xalka #1 ee kore:

// Isku keen akhrinta laga helo threads-ka kale.
fastdom.measure( function() {

	// Isticmaal client rect-kayaga la kaydiyay.
	var rect = window.pbsGetBoundingClientRect( elem );

	// Isku keen qorista laga helo threads-ka kale.
	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 ) );​

Waxa FastDom uu qabto ayaa ah inuu isku keeno dhammaan wicitaannada fastdom.measure  iyo dhammaan wicitaannada fastdom.mutate  uuna u fuliyo si aan isku mar ahayn, isagoo si wax ku ool ah isugu keenaya dhammaan akhrinta iyo qorista si loo yareeyo dhammaan reflows-ka barowsarka.

Xalka #3: Helitaanka Style Objects Waa Wax Culays Badan

Waxaan sidoo kale caawinta jsPerf ku ogaannay in qaar ka mid ah shaqooyinka qaabka lagu helo ay ka dheereeyeen kuwa kale.

Gudaha PBS, waxaan inta badan u baahannahay inaan helno qiimaha hadda ee qaab gaar ah oo curiye leeyahay. Tusaale ahaan, waxaan caadi ahaan tan u isticmaalnaa inaan ku helno margin-ka sare:

var styles = window.getComputedStyle( elem );
var marginTop = styles.marginTop;​

Laakiin, waxaan ogaannay in samaynta tan ay aad uga dhakhso badan tahay:

var marginTop = elem.style.marginTop;​

Si kastaba ha ahaatee, elem.style.marginTop  iyo getComputedStyle  aad bay u kala duwan yihiin. Midka hore waxa uu kaliya na siinayaa qaabaynta tooska ah ee curiyaha, mana tixgeliyo wax stylesheets ah; midka labaadna waxa uu tixgeliyaa labadaba qaababka tooska ah iyo stylesheets.

Waxa intaas dheer in xitaa marka natiijada getComputedStyle  la kaydiyay, ay weli aad u gaabinaysay. Sida ay noqotay, helitaanka style object-ka laftiisa ayaa ah hawsha gaabiska ah.

Nasiib wanaag, PBS waxay ku darsataa qaabab toos ah curiyeyaasha, maadaama ay qaababka tooska ahi mudnaanta koowaad leeyihiin (inta badan) marka la barbar dhigo stylesheets-ka, waxaa jiri doona xaalado ay ku filan tahay helitaanka qiimaha qaabka tooska ah. Markaa haddii aan isku darno labada hab ee kore, waxaan la imaan karnaa koodh aad uga dheereeya sidii hore:

var marginTop = elem.style.marginTop;
if ( ! marginTop ) {
	var styles = window.getComputedStyle( elem );
	marginTop = styles.marginTop;
}​

Natiijooyinka Horumarinta Koodhka

3-dayada xal ee kore waxay qaateen cilmi-baaris badan, tijaabin iyo hirgelin dhab ah (waxayna dib u dhigeen soo saarista muuqaalkayaga Fonts), laakiin ugu dambayntii wax kasta waxay noqdeen kuwo u qalma.

Ku noqoshada tijaabadeennii hore ee ahayd ku dul wareejinta jiirka shaashadda muddo 2 ilbiriqsi ah. Waa kan timeline-kii hore ee foosha xumaa/qasnaa:

Waana kan sida uu u eg yahay timeline-keena cusub ka dib horumarinta waxqabadka:

Sida aad arki karto, waxyaabo guduudan oo yar ayaa ku jira garaafka. Waxaana jira farqi la taaban karo oo ku saabsan tirada hawlgallada uu qabanayo barowsarku. Waxyaabaha leydi-wareegga ah ee xagga hoose sidoo kale way dhuuban yihiin, taasoo la macno ah in hawlgalladu u socdaan si ka dhakhso badan sidii hore.

Haddii aad isbarbardhigto tirada meelaha dhaadheer/ballaadhan ee guduudka ah ee garaafyada hore iyo kuwa cusub, waxaan arkaynaa kordhis ballaadhan oo 200% ah oo xagga waxqabadka ah! Waxaan sidoo kale arkaynaa kordhinta waxqabadka dhinac kasta. Xumaan ma leh gabi ahaanba!

Wixii Laga Bartay & Casharrada

Run ahaantii, uma aanan malaynayn in PBS ay leedahay arrimo waxqabad ka hor intaysan Ann soo qaadin. Sababta ugu weyn waxay tahay inaan isticmaalaynay mashiinno loogu talagalay horumarinta oo caqabadaha waxqabadku ma ahayn kuwo sidaas u muuqda. Dib markaan u eegno, hubinta waxqabadku waxay ahayd inay noqoto mid ka mid ah mudnaanta koowaad. Laakiin ugu yaraan hadda, laga bilaabo nooca 4.3 waa la xalliyay.

Kuwa doonaya inay horumariyaan waxqabadka plugin-kooda WordPress, gaar ahaan haddii aad sidoo kale isticmaalayso Javascript culus, waa kuwan waxyaabihii aan ka bartay waayo-aragnimadan:

1. Xaddid/kaydi wicitaannadaada sifooyinka/shaqooyinka kiciya reflow. U isticmaal tan hage ahaan: What forces layout/reflow. The comprehensive list.
2. Isku gee “akhrinta” iyo “qorista” qaababka DOM. Isticmaal FastDom si uu tan kuugu sameeyo.
3. Isticmaal Timeline profiler-ka Chrome, oo hubi inaad hesho reflows (waxyaabaha guduudka ah) intii suurtogal ah ugu yar.