Bọọluogi

Ní ọjọ́ kejì oṣù Kejì, ọdún 2017 sẹ́yìn, Ann Taylor kọ àpilẹ̀kọ 12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right lórí CodeInWP. A ti ń tẹ̀síwájú láti máa mú Page Builder Sandwich sunwọ̀n síi fún ohun tó ju ọdún kan lọ báyìí: a máa ń ṣe ìwádìí wa, a sì máa ń gbọ́ ti àwọn oníbàárà wa, nítorí náà a rò pé Page Builder Sandwich yóò wọ inú àpilẹ̀kọ “Who Got it Right” ti CodeInWP. Àmọ́ a kò wọlé nítorí iṣẹ́-ṣíṣe rẹ̀.

Nítorí náà, a béèrè lọ́wọ́ Ann nípa rẹ̀, ó sì fèsì pé:

…Mo dán ẹ̀dà ọ̀fẹ́ náà wò díẹ̀. Ó fi ìlérí púpọ̀ hàn: ọ̀pọ̀lọpọ̀ modules, UI tó rọrùn láti lóye, ìrírí WYSIWYG tó tayọ, ohun gbogbo ń fawọ́ káàkiri pẹ̀lú ìrọ̀rùn. Àmọ́, nígbà tí mo ní nǹkan bí modules 10 lórí ojú-ewé náà, ó di ohun tó nira láti tẹ̀síwájú nínú ṣíṣiṣẹ́ pẹ̀lú rẹ̀ nítorí pé iyára àtúnṣe rẹ̀ kéré…

Nítorí náà gẹ́gẹ́ bí ọ̀rọ̀ rẹ̀, Page Builder Sandwich ní àwọn ìṣòro iṣẹ́-ṣíṣe. Àti pé níwọ̀n bí a ti máa ń fetí sí àwọn èrò àwọn ènìyàn nígbà gbogbo, a lọ yẹ̀ ẹ́ wò.

Dídán Iṣẹ́-ṣíṣe Náà Wò

A nílò ọ̀nà láti yẹ iṣẹ́-ṣíṣe PBS wò; níwọ̀n bí PBS ti ń ṣiṣẹ́ jùlọ lórí browser nípasẹ̀ Javascript, Timeline profiler ti Chrome jẹ́ ohun èlò tó tọ́ fún iṣẹ́ náà. Timeline profiler náà lè mọ̀ kí ó sì wọn irú àwọn ìlànà tí ń wáyé nínú webpage lásìkò tí ó ń ṣiṣẹ́, èyí tó péye fún wíwá àwọn ibi tí iyára ti ń dínkù.

A rò pé ó yẹ kí a kọ́kọ́ dán àwọn ìgbésẹ̀ tí ó rọrùn jùlọ wò – gbígbé eku-kọ̀mpútà (mouse) wa kọjá lórí ọ̀pọ̀lọpọ̀ àwọn èròjà àti ìlà. Ó rọrùn, àbí bẹ́ẹ̀ kọ́? A ní ìgboyà pé a kò ní bá àwọn ìṣòro iṣẹ́-ṣíṣe pàdé pẹ̀lú ohun tó rọrùn bíi èyí. Ó mà ṣe o, a ṣìbágbé.

Bí a ṣe tẹ bọ́tìnì láti gbà á sílẹ̀ tán, a gbé eku-kọ̀mpútà náà fún nǹkan bí ìṣẹ́jú-àáyá 2 lórí ojú-ìwòye (screen), lẹ́yìn náà a tẹ bọ́tìnì ìdúró. Èyí ni àbájáde timeline láti inú profiler náà:

Wò ó kí o sì rí i. Ó kún fún àwọn ìdènà iṣẹ́-ṣíṣe pátápátá!

Ọ̀pọ̀lọpọ̀ nǹkan ló ń ṣẹlẹ̀ nínú àtẹ náà, ṣùgbọ́n ìṣòro tó hàn gbangba jùlọ ni pé ọ̀pọ̀lọpọ̀ àwọn agbègbè aláwọ̀ eléso-àlùkò ló wà nínú rẹ̀ (èyí tí kò yẹ kí ó rí bẹ́ẹ̀). Láfikún sí i, àwọn agbègbè aláwọ̀ eléso-àlùkò wọ̀nyí fẹ̀ gidigidi ní ojú lásán, gbogbo wọn sì jọ pé wọ́n ń dé ibi tí ó ga jùlọ lórí àtẹ náà. Ìwọ yóò tún kíyèsí pé àtẹ náà máa ń kún nígbà gbogbo pẹ̀lú, àti pé àwọn agbègbè aláwọ̀ eléso-àlùkò náà fẹ́rẹ̀ má sọ̀kalẹ̀ sí òfo rárá. Ó dàbí ẹni pé browser náà máa ń dí lọ́wọ́ láti ṣe nǹkan kan nígbà gbogbo, tí kò sì fẹ́rẹ̀ sinmi rárá.

Ṣùgbọ́n kí ni gbogbo àwọn agbègbè aláwọ̀ eléso-àlùkò wọ̀nyẹn túmọ̀ sí gan-an?

Profiler náà ṣe rere láti sọ fún wa pé wọ́n ń pè wọ́n ní reflows. Èyí ni ìtumọ̀ ohun tí reflow jẹ́ láti ojú-òpó Google Developer:

Reflow ni orúkọ ìlànà web browser fún títún àwọn ipò àti àwòrán àwọn ẹ̀yà inú àkọsílẹ̀ ṣe ìṣirò wọn lẹ́ẹ̀kan síi.. reflow jẹ́ iṣẹ́ tí ó ń dènà ìlo oníbàárà nínú browser náà.

Nítorí náà, èyí túmọ̀ sí pé gbígbé eku-kọ̀mpútà rẹ kiri nínú PBS ń ru ọ̀pọ̀lọpọ̀ reflows sókè. Ohun tó tún wá burú jù ni pé reflow kọ̀ọ̀kan máa ń dá browser náà dúró fún ìgbà díẹ̀ kí ó lè parí ṣíṣe àwọn ìṣirò rẹ̀. Pípolongo reflows túmọ̀ sí ìdádúró browser púpọ̀ síi, ìrírí náà yóò sì tún wá dàrú/lóra síi. Ní èdè tí ó rọrùn jù, àwọn agbègbè aláwọ̀ eléso-àlùkò púpọ̀ = kò dára.

Nítorí náà, ó wá hàn gbangba pé Ann tọ̀nà: a ní ìṣòro iṣẹ́-ṣíṣe ńlá kan, nítorí náà ẹgbẹ́ wa tètè bẹ̀rẹ̀ iṣẹ́ lẹ́sẹ̀kẹsẹ̀ láti tún un ṣe ní kíákíá.

Títún Ìṣòro Reflow / Jank Wa Ṣe

Kí á tó ṣe ohun mìíràn, a nílò láti ṣe ìwádìí díẹ̀ láti mọ ohun tó fa reflow yìí gan-an ní àkọ́kọ́. A rí i pé ní tòótọ́, ọ̀pọ̀lọpọ̀ àwọn nǹkan tí ó wọ́pọ̀ nínú Javascript lè mú kí browser náà fa reflow.

Ó fẹ́rẹ̀ẹ́ jẹ́ pé gbogbo function tí o lè lò láti gba ìbú (width), gíga (height) tàbí ipò (position) ẹ̀yà DOM kan lè fa reflow. Paul Irish kọ àtòjọ títóbi kan ti gbogbo àwọn àbùdá (properties) àti functions nínú Javascript tí wọ́n lè ṣe èyí. Ìròyìn búburú náà ni pé Page Builder Sandwich ń lo ọ̀pọ̀lọpọ̀ nínú àwọn àbùdá àti functions wọ̀nyí, gbogbo wọn sì ń fa reflow:

• elem.getBoundingClientRect()
• window.getComputedStyle()
• window.scrollY
• àti ọ̀pọ̀lọpọ̀ síi…

Àtúnṣe #1: Fífi Àwọn Ìlànà Reflow Tó Gbówó Pamọ́ Sí Káṣì (Cache)

Ojútùú tó hàn kedere jùlọ ni KÌ Í ṢE láti lo àwọn àbùdá àti functions wọ̀nyẹn. Àmọ́, PBS gbẹ́kẹ̀lé wọn púpọ̀, a kò sì lè ṣe aláìlo wọ́n.

Ojútùú tí a fi sílẹ̀ fún ni láti dín àwọn ìpè sí àwọn functions wọ̀nyẹn kù bí a ṣe lè ṣe é mọ. Apá tí ó nira níhìn-ín ni pé a lo àwọn àbùdá àti functions wọ̀nyẹn lọ́pọ̀ ìgbà ní àwọn apá ọ̀tọ̀ọ̀tọ̀ nínú PBS, àti pé ọ̀pọ̀lọpọ̀ ìgbà, a máa ń lò wọ́n lórí ẹ̀yà DOM kan náà ní ọ̀pọ̀lọpọ̀ ìgbà. Láti tún èyí ṣe, a ṣẹ̀dá ọ̀nà caching tiwa fún àbùdá/function kọ̀ọ̀kan tí ń fa ìṣòro.

Fún àpẹẹrẹ, function getBoundingClientRect ń fún wa ní àwọn ìwọ̀n pixel lọ́wọ́lọ́wọ́ ti òkè (top), òsì (left), ìbú (width), gíga (height), ọ̀tún (right), àti ìsàlẹ̀ (bottom) ti ẹ̀yà DOM kan. A máa ń lo function yìí ní gbogbo ìgbà láti ṣe ìṣirò ibi tí a ó ti ya àwọn ìla àyíká ẹ̀yà náà nínú PBS. Èyí ni function caching tí a ṣẹ̀dá fún èyí:

// 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;
};
​

Dípò pípe getBoundingClientRect, a ti ń lo pbsGetBoundingClientRect báyìí. Báyìí ní gbogbo ìgbà tí a bá béèrè client rect, a máa ń fi iye yẹn pamọ́ fún ìtọ́kasí ọjọ́ iwájú, nípa bẹ́ẹ̀ dídín iye àwọn ìfa-reflow kù.

A tún nílò ọ̀nà kan láti palẹ̀ cache rẹ́ nígbà tí àwọn client rect tí a fi pamọ́ kò bá wúlò mọ́. Àwọn iye ti client rect tí a fi pamọ́ máa ń yípadà nígbà tí olùlò bá yi ojú-ewé síwájú/sẹ́yìn (scrolls) tàbí tí ó fi kún/yípadà/yọ àwọn ẹ̀yà kúrò lórí screen náà. Nítorí náà, a ṣẹ̀dá function ìparẹ́ cache tí a lè pè nígbàkúgbà tí a bá nílò àwọn iye client rect tuntun:

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

A tún ṣe irú ọ̀nà caching kan náà yìí fún àwọn ìpè function gbówólórí mìíràn tí a sábà máa ń lò.

Àtúnṣe #2: Ṣíṣe Àkójọpọ̀ Àwọn Ìkàwé (Reads) & Ìkọ̀wé (Writes) Pọ̀ Nípa Lílo FastDom

Ṣíṣe àtúnṣe #1 mú kí iṣẹ́-ṣíṣe PBS pọ̀ síi, ṣùgbọ́n kò tó.

Bí a ṣe ń ṣe ìwádìí síwájú síi lórí Google, a pàdé àpilẹ̀kọ kan láti ọwọ́ Wilson Page lórí Dídènà ‘layout thrashing’. Wilson sọ pé:

Layout Thrashing (reflow) máa ń wáyé nígbà tí JavaScript bá ń kọ̀wé pẹ̀lú agbára, tí ó sì ń kàwé látinú DOM, ní ọ̀pọ̀lọpọ̀ ìgbà èyí tí ń fa àwọn reflow àkọsílẹ̀.

Ní tòótọ́, kò tó láti dín àwọn ìpè rẹ sí àwọn àbùdá àti functions pàtó tí ń ru reflow sókè kù nìkan. Nígbà tí o bá ṣe àwọn “ìkàwé” àti “ìkọ̀wé” tẹ̀léra lórí DOM, ó tún máa ń fa reflow browser. Èyí ni àpẹẹrẹ kan tó wọ́pọ̀, tààrà láti ojú-òpó 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​

Àpẹẹrẹ tí ó wà lókè yìí ń fa reflows mẹ́ta nítorí pé gbogbo ìwọ̀n ojú-ewé náà kò wúlò mọ́ lẹ́yìn ìkọ̀wé kan. Àtúnṣe tí a dábàá fún èyí ni láti tún àkójọ koodu náà ṣe láti ṣe àkójọpọ̀ gbogbo àwọn ìkàwé àti ìkọ̀wé pọ̀ kí gbogbo rẹ̀ lè fa reflow browser kan ṣoṣo:

// 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​

Àkọsílẹ̀ tí ó wà lókè mú kí títún ìṣòro náà ṣe dàbí ohun tó rọrùn. Ṣùgbọ́n ní ti gidi, Nínú PBS, kíkà àti kíkọ àwọn nǹkan tí ń fa reflow máa ń ṣẹlẹ̀ ní ọ̀pọ̀lọpọ̀ àwọn ibi ọ̀tọ̀ọ̀tọ̀ ní ọ̀pọ̀ àkókò ọ̀tọ̀ọ̀tọ̀ lásìkò tí PBS ń ṣiṣẹ́ lọ́wọ́. Títún ẹgbẹẹgbẹ̀rún ìlà koodu Javascript tò kì í ṣe ohun tí ó ṣeé ṣe.

Ó ṣe ànfaaní fún wa, Wilson tún pèsè ojútùú kan nínú àpilẹ̀kọ rẹ̀. Ó ṣẹ̀dá koodu kékeré kan láti ṣèrànwọ́ pẹ̀lú kíkó àwọn ìkàwé àti ìkọ̀wé wọ̀nyẹn pọ̀, tí a ń pè ní FastDom.

Èyí ni koodu díẹ̀ láti Page Builder Sandwich tí ó ń lo FastDom tí ó sì tún ní Àtúnṣe #1 wa lókè nínú:

// 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 ) );​

Ohun tí FastDom ń ṣe ni pé ó ń kó gbogbo àwọn ìpè fastdom.measure àti gbogbo àwọn ìpè fastdom.mutate jọ pọ̀, ó sì ń mú wọn ṣiṣẹ́ láìdúró de ara wọn (asynchronously), nípa bẹ́ẹ̀ ó ń ṣe àkójọpọ̀ gbogbo àwọn ìkàwé àti ìkọ̀wé pọ̀ láti dín gbogbo àwọn reflows kù nínú browser náà.

Àtúnṣe #3: Wíwọlé Sí Àwọn Style Objects Máa Ń Gbówó Púpọ̀

A tún rí i pẹ̀lú ìrànlọ́wọ́ jsPerf pé àwọn functions kan tí ń gba style yára ju àwọn tókù lọ.

Nínú PBS, a sábà máa ń nílò láti gba iye lọ́wọ́lọ́wọ́ ti style pàtó kan fún ẹ̀yà kan. Fún àpẹẹrẹ, a sábà máa ń lo èyí láti gba margin òkè (top margin):

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

Ṣùgbọ́n, a rí i pé ṣíṣe èyí yára púpọ̀ síi:

var marginTop = elem.style.marginTop;​

Àmọ́, elem.style.marginTop àti getComputedStyle yàtọ̀ púpọ̀ sí ara wọn. Èkíní nìkan ló ń fún wa ní inline styling ti ẹ̀yà náà, kò sì ka àwọn stylesheets sí rárá; àti èkejì ń ka àwọn inline styles àti stylesheets méjèèjì sí.

Ohun tó tún burú síi ni pé kódà nígbà tí a fi àbájáde getComputedStyle pamọ́ sínú cache, ó ṣì lọ́ra gan-an. Gẹ́gẹ́ bí ó ti wá hàn báyìí, wíwọlé sí style object fúnrarẹ̀ ni ìlànà tí ó lọ́ra.

Ó ṣe ànfaaní fún wa pé PBS ń fi inline styles kún àwọn ẹ̀yà, àti pé níwọ̀n bí inline styles ti máa ń gbapò àkọ́kọ́ (ní ọ̀pọ̀lọpọ̀ ìgbà) ju stylesheets lọ, àwọn àkókò yóò wà tí gbígba iye inline style yóò ti tó. Nítorí náà tí a bá da àwọn ọ̀nà méjèèjì tí ó wà lókè pọ̀, a lè rí koodu kan tí ń ṣiṣẹ́ pẹ̀lú iyára tó ga púpọ̀:

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

Àwọn Àbájáde Àwọn Ìmúdàgbàsókè Koodu Náà

Àwọn àtúnṣe 3 wa tí ó wà lókè gba ọ̀pọ̀lọpọ̀ ìwádìí, dídánwò àti ìmúṣẹ gidi (ó sì dádúró fún ẹ̀yà Fonts wa láti jáde), ṣùgbọ́n nígbẹ̀yìngbẹ́yín ó tọ́ sí i.

Bí a bá padà sí àdánwò àkọ́kọ́ wa ti gbígbé eku-kọ̀mpútà rẹ kọjá lórí screen fún ìṣẹ́jú-àáyá 2. Èyí ni timeline àtijọ́ tí ó burú/lóra:

Àti pé èyí ni bí timeline tuntun wa ṣe rí lẹ́yìn àwọn ìmúdàgbàsókè iṣẹ́-ṣíṣe náà:

Bí o ṣe lè rí i, àwọn nǹkan aláwọ̀ eléso-àlùkò kéré síi nínú àtẹ náà. Ìyàtọ̀ tó hàn kedere sì wà lórí iye àwọn ìlànà tí browser náà ń ṣe. Àwọn nǹkan onígun mẹ́rin ní ìsàlẹ̀ tún fẹ́lẹ́ síi, èyí tó túmọ̀ sí pé àwọn ìlànà ń sáré yára ju ti tẹ́lẹ̀ lọ.

Tí o bá fi iye àwọn agbègbè aláwọ̀ eléso-àlùkò tó ga/fẹ̀ wé ara wọn nínú àtẹ àtijọ́ àti tuntun, a ń rí ìbísí iṣẹ́-ṣíṣe 200% tí ó yanilẹ́nu! A tún ń rí àwọn ìbísí iṣẹ́-ṣíṣe kárí gbogbo pátápátá. Kò burú rárá!

Àwọn Ẹ̀kọ́ & Ohun Tí A Rí Gbà

Láti sọ òtítọ́, a kò rò pé PBS ní àwọn ìṣòro iṣẹ́-ṣíṣe kí Ann tó mẹ́nu kàn án. Pàápàá jùlọ nítorí pé a ń lo àwọn ẹ̀rọ tí ó dálélórí ìdàgbàsókè koodu tí àwọn ìdènà iṣẹ́-ṣíṣe kò sì fi bẹ́ẹ̀ hàn gbangba. Nígbà tí a bá wo ẹ̀yìn, yíyẹ iṣẹ́-ṣíṣe wò ì bá ti jẹ́ ọ̀kan lára àwọn ohun tí ó ṣe pàtàkì jùlọ. Ṣùgbọ́n o kere tán báyìí, ní àkókò version 4.3 a ti bójútó o.

Fún àwọn tí ń fẹ́ mú iṣẹ́-ṣíṣe plugin WordPress tiwọn sunwọ̀n síi, pàápàá jùlọ tí ẹ bá ń lo Javascript tó pọ̀, àwọn ẹ̀kọ́ mi nìyí láti inú ìrírí yìí:

1. Dín kù/fi pamọ́ sí cache àwọn ìpè rẹ sí àwọn àbùdá/functions tí ń ru reflow sókè. Lo èyí gẹ́gẹ́ bí amọ̀nà: What forces layout/reflow. The comprehensive list.
2. Kó àwọn “ìkàwé” àti “ìkọ̀wé” jọ pọ̀ sí àwọn styles DOM. Lo FastDom láti ṣe èyí fún ọ.
3. Lo Timeline profiler ti Chrome, kí o sì rí i dájú pé o ní àwọn reflows (àwọn nǹkan eléso-àlùkò) tó kéré bí o ṣe lè ṣe é mọ.