Ποιοι είναι οι βασικοί τρόποι βελτίωσης της απόδοσης Frontend;

Question

IT Interview Practice · Accepted Answer

**Βελτιώστε το πραγματικά αργό μέρος της διαδρομής χρήστη και μετρήστε αν βοήθησε.** Μικρότερο bundle αξίζει όταν βελτιώνει εμπειρία ή σχετικό κόστος.

Πελάτες σε κοινά κινητά βλέπουν αργά την κύρια εικόνα προϊόντος και καθυστέρηση στην επιλογή παραλλαγής. Φόρτωση και αλληλεπίδραση είναι διαφορετικά προβλήματα· μία βελτίωση ίσως δεν λύνει και τα δύο.

## 1. Τεκμηριώστε το σύμπτωμα αντιπροσωπευτικά

Επιλέξτε σημαντική διαδρομή, συσκευή και δίκτυο. Μετρήσεις πραγματικών χρηστών δείχνουν πληθυσμό που επηρεάζεται, ελεγχόμενες δοκιμές αναπαράγουν το πρόβλημα. Ισχυρό development laptop μπορεί να κρύβει καθυστερήσεις.

- Το LCP μετρά πότε αποδίδεται το μεγαλύτερο ορατό στοιχείο περιεχομένου, βοηθώντας αξιολόγηση φόρτωσης.
- Το INP περιγράφει απόκριση στις αλληλεπιδράσεις κατά την επίσκεψη.
- Το CLS μετρά απρόβλεπτες μετατοπίσεις διάταξης, όπως όταν εμφανίζεται εικόνα.

Τα [Core Web Vitals](https://web.dev/articles/vitals) αφορούν διαφορετικές πλευρές. Συνδέστε τα με πραγματική επιλογή παραλλαγής και προσθήκη στο καλάθι, ώστε καλύτερος αριθμός να μην κρύβει σπασμένη λειτουργία.

## 2. Βρείτε τι καθυστερεί το σημαντικό περιεχόμενο

Εξετάστε request waterfall: πότε ανακαλύπτονται, κατεβαίνουν και ολοκληρώνονται πόροι. Η κύρια εικόνα μπορεί να αρχίζει μόνο μετά JavaScript και API.

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

Συμπίεση βοηθά download, αλλά νωρίτερη ανακάλυψη αφαιρεί προηγούμενη αναμονή. Εξετάστε χρήσιμο προϊόν στο αρχικό HTML μέσω server rendering ή static generation. Ελέγξτε επικαιρότητα, κόστος server και JavaScript που ακόμη χρειάζεται για αλληλεπίδραση.

## 3. Μειώστε άχρηστη μεταφορά και εκτέλεση

Αφού καταλάβετε την κρίσιμη διαδρομή, αφαιρέστε ό,τι δεν βοηθά την τρέχουσα οθόνη. Προτιμήστε αλλαγές συνδεδεμένες με μετρημένη καθυστέρηση αντί τυφλής εφαρμογής τεχνικών.

- Σερβίρετε σωστά μεγέθη και μορφές εικόνων. Lazy-load εκτός οθόνης εικόνες, όχι την κύρια που περιμένει ο χρήστης.
- Χωρίστε code ανά route ή feature ώστε η σελίδα προϊόντος να μη φορτώνει αχρησιμοποίητο admin.
- Αφαιρέστε περιττές εξαρτήσεις και ελέγξτε third-party scripts που κοστίζουν δίκτυο και main thread.
- Συμπιέστε κατάλληλες text απαντήσεις και cache versioned στατικά αρχεία. Ορίστε χωριστή ασφάλεια για προσωπικά δεδομένα.

Μικρότερα αρχεία μειώνουν μεταφορά, αλλά ο browser ακόμη αναλύει και εκτελεί κώδικα. Ελέγξτε δίκτυο και CPU πριν δηλώσετε επιτυχία.

## 4. Λύστε αργή αλληλεπίδραση στην αιτία

Σε καθυστερημένη επιλογή παραλλαγής, κάντε profile το main thread που εκτελεί μεγάλο μέρος scripting και rendering. Μεγάλος υπολογισμός μπλοκάρει απόκριση ακόμη και μετά όλα τα downloads.

Χωρίστε μεγάλες εργασίες ή μεταφέρετε κατάλληλο υπολογισμό σε worker. Σε συχνά inputs αποφύγετε περιττά requests και παλιές απαντήσεις που αντικαθιστούν νέα επιλογή. Memoization μόνο με μετρημένο επαναλαμβανόμενο κόστος, όχι ως διακόσμηση.

Σε μακριές λίστες, απόδοση μόνο ορατού τμήματος μειώνει εργασία, με διατήρηση πληκτρολογίου και προσβασιμότητας. Κρατήστε χώρο για εικόνες και καθυστερημένο περιεχόμενο για αποφυγή μετατοπίσεων. Κάθε αλλαγή ελέγχεται στο αρχικό της σύμπτωμα.

## 5. Επαληθεύστε όλη τη διαδρομή μετά

Επαναλάβετε την ίδια δοκιμή και παρακολουθήστε πραγματικούς χρήστες μετά το release. Ελέγξτε ορθότητα, πληκτρολόγιο, ολοκλήρωση καλαθιού και επιπλέον backend load μαζί με performance.

Ορίστε πρακτικά resource budgets και παρακολουθήστε regressions. Καλό lab score δεν αρκεί αν πελάτες ακόμη περιμένουν ή δεν τελειώνουν. **Το αποτέλεσμα πρέπει να είναι ταχύτερη, σταθερή, χρήσιμη διαδρομή με μετρήσεις πριν και μετά.**

1. Τεκμηριώστε το σύμπτωμα αντιπροσωπευτικά

2. Βρείτε τι καθυστερεί το σημαντικό περιεχόμενο

3. Μειώστε άχρηστη μεταφορά και εκτέλεση

4. Λύστε αργή αλληλεπίδραση στην αιτία

5. Επαληθεύστε όλη τη διαδρομή μετά

Σχετικές ερωτήσεις