Cad iad na príomhbhealaí chun feidhmíocht frontend a fheabhsú?

Question

IT Interview Practice · Accepted Answer

**Barrfheabhsaigh an chuid de thuras an úsáideora atá mall i ndáiríre, ansin tomhais an chabhraigh an t-athrú.** Níl beart cód níos lú úsáideach ach má fheabhsaíonn sé an taithí nó má laghdaíonn sé costais ábhartha.

Cuir i gcás go n-osclaíonn custaiméirí ar ghnáthfhóin leathanach táirge, go bhfeiceann siad an phríomhíomhá go déanach agus go mbíonn moill nuair a roghnaíonn siad malairt. Is fadhbanna éagsúla iad luchtú agus idirghníomhú; ní gá go réiteodh barrfheabhsú amháin an dá cheann.

## 1. Aimsigh an siomptóm le tomhais ionadaíocha

Roghnaigh turas, gléas agus riocht líonra atá tábhachtach don táirge. Úsáid tomhais fíorúsáideoirí chun na daoine buailte a aimsiú agus tástálacha rialaithe brabhsálaí chun an fhadhb a atáirgeadh. Féadfaidh ríomhaire forbartha cumhachtach moilleanna custaiméirí a cheilt.

- Tomhaiseann LCP cathain a rindreáiltear an eilimint infheicthe ábhair is mó, rud a chuidíonn le measúnú luchtaithe.
- Déanann INP cur síos ar fhreagrúlacht d’idirghníomhaíochtaí le linn chuairt an leathanaigh.
- Tomhaiseann CLS gluaiseachtaí leagan amach gan choinne, amhail ábhar ag bogadh nuair a thagann íomhá isteach.

Déanann na [Core Web Vitals](https://web.dev/articles/vitals) seo cur síos ar ghnéithe éagsúla den taithí. Ceangail leis an bhfíorthasc iad, amhail malairt a roghnú agus a chur sa chiseán, ionas nach gceileann uimhir fheabhsaithe iompar briste.

## 2. Aimsigh cad a mhoillíonn an t-ábhar tábhachtach

Scrúdaigh eas na n-iarratas: an amlíne a léiríonn cathain a aimsítear, a íoslódáiltear agus a chríochnaítear acmhainní. Don leathanach táirge, b’fhéidir nach dtosaíonn an phríomhíomhá go dtí go n-íoslódáiltear JavaScript agus go gcríochnaíonn iarratas API.

```text
HTML -> JavaScript -> Product API -> Main image
```

Laghdaíonn comhbhrú na híomhá am íoslódála, ach féadfaidh aimsiú níos luaithe an fanacht roimhe a bhaint. Meas ábhar úsáideach táirge a chur sa HTML tosaigh trí rindreáil freastalaí nó giniúint statach nuair is oiriúnach. Seiceáil úire, costas freastalaí agus an JavaScript atá riachtanach fós chun idirghníomhaíocht a chumasú.

## 3. Laghdaigh aistriú agus forghníomhú neamhriachtanach

Nuair a thuigtear an bealach criticiúil, bain obair nach gcabhraíonn leis an scáileán reatha. Tabhair tosaíocht d’athruithe ceangailte le moill thomhaiste seachas gach barrfheabhsú a chur i bhfeidhm gan idirdhealú.

- Seirbheáil íomhánna ar mhéideanna agus i bhformáidí cuí. Luchtaigh íomhánna lasmuigh den scáileán go leisciúil, ach ná moilligh an phríomhíomhá a bhfuil an t-úsáideoir ag fanacht léi.
- Roinn cód de réir bealaigh nó gné ionas nach luchtaíonn leathanach táirge comhéadan riarthóra gan úsáid.
- Bain spleáchais neamhriachtanacha agus athbhreithnigh scripteanna tríú páirtí, a ídíonn am líonra agus obair an phríomhshnáithe.
- Comhbhrúigh freagraí téacs cuí agus taisc acmhainní statacha leaganaithe. Sainigh polasaithe sábháilte ar leith do shonraí pearsantaithe.

Laghdaíonn comhaid níos lú aistriú, ach caithfidh brabhsálaithe cód a pharsáil agus a rith fós. Seiceáil éifeachtaí líonra agus CPU araon roimh rath a fhógairt.

## 4. Réitigh idirghníomhú mall ag a chúis

Má tá roghnú malairte mall, próifíligh an príomhshnáithe, a láimhseálann cuid mhór de scripteáil agus rindreáil an leathanaigh. Féadfaidh ríomh fada freagra a chosc fiú tar éis gach comhad a luchtú.

Roinn obair fhada ina codanna beaga nó bog ríomh oiriúnach chuig worker. Le hionchuir a athraíonn go minic, seachain iarratais neamhriachtanacha agus ná lig do sheanfhreagra rogha níos nuaí a fhorscríobh. Úsáid meamramú nuair a léiríonn tomhais ríomh athchleachtach costasach, ní mar mhaisiú réamhshocraithe.

Le liostaí an-fhada, féadfaidh rindreáil na coda infheicthe amháin obair a laghdú, ach caomhnaigh nascleanúint mhéarchláir agus inrochtaineacht. Cuir spás in áirithe d’íomhánna agus d’ábhar moillithe chun léimeanna leagan amach a sheachaint. Réitíonn siad seo siomptóim éagsúla, mar sin seiceáil gach ceann i gcoinne na bunfhadhbe.

## 5. Fíoraigh an turas iomlán tar éis athraithe

Déan an tástáil rialaithe chéanna arís, ansin breathnaigh ar thorthaí fíorúsáideoirí tar éis scaoilte. Seiceáil cruinneas táirge, rochtain mhéarchláir, críochnú an chiseáin agus aon mhéadú ualaigh backend chomh maith le tomhais feidhmíochta.

Socraigh buiséid phraiticiúla d’acmhainní tábhachtacha agus monatóraigh aischéimnithe. Ní leor scór maith sa tsaotharlann má fhanann fíorchustaiméirí fós nó mura féidir leo an tasc a chríochnú. **Ba chóir go mbeadh an toradh ina thuras níos tapúla, cobhsaí agus inúsáidte, le tomhais roimh an athrú agus ina dhiaidh.**

1. Aimsigh an siomptóm le tomhais ionadaíocha

2. Aimsigh cad a mhoillíonn an t-ábhar tábhachtach

3. Laghdaigh aistriú agus forghníomhú neamhriachtanach

4. Réitigh idirghníomhú mall ag a chúis

5. Fíoraigh an turas iomlán tar éis athraithe

Ceisteanna gaolmhara