Στο JavaScript, υπάρχουν πολλές προσεγγίσεις για τη βελτίωση της συνολικής διεπαφής χρήστη του ιστότοπου. ο 'Web Worker' είναι μια τέτοια προσέγγιση που επιτρέπει στο κύριο νήμα να συνεχίσει να εκτελείται χωρίς να αποκλειστεί. Περιλαμβάνει την ξεχωριστή παρουσία του κινητήρα JavaScript και ως εκ τούτου δεν μπορεί να επικαλεστεί τις λειτουργίες του κύριου νήματος.
Αυτό το άρθρο θα συζητήσει πώς να το χρησιμοποιήσετε 'Web Worker' για multithreading σε JavaScript.
Τι είναι οι Εργάτες Ιστού;
'Εργαζόμενοι στο Διαδίκτυο' αντιστοιχεί σε ένα API προγράμματος περιήγησης που επιτρέπει στο JavaScript να εκτελεί τις εργασίες παράλληλα/ταυτόχρονα σε ένα ξεχωριστό/αποκλειστικό νήμα.
Ποια είναι η ανάγκη για Web Workers;
Εφόσον η JavaScript είναι μονού νήματος, επομένως, οι σύνθετοι κώδικες JavaScript μπλοκάρουν το νήμα διεπαφής χρήστη, δηλαδή σταματούν το κύριο παράθυρο που αντιμετωπίζει όλες τις εργασίες ανανέωσης, υλοποίησης συμβάντων εισαγωγής χρήστη κ.λπ. Σε ένα τέτοιο σενάριο, επηρεάζεται η εμπειρία του χρήστη . Για την αντιμετώπιση αυτού του ζητήματος, το 'Web Worker' τίθεται σε ισχύ και επιλύει τον αποκλεισμό του νήματος της διεπαφής χρήστη.
Πώς να χρησιμοποιήσετε το Web Workers για Multithreading με JavaScript;
Να κάνει ένα 'Web Worker' , χρησιμοποιήστε τον κατασκευαστή Worker. Είναι τέτοιο που παίρνει ως όρισμα μια διεύθυνση URL, η οποία αντιστοιχεί στη διαδρομή του αρχείου σεναρίου εργασίας που υλοποιεί την επιθυμητή λειτουργικότητα. Ωστόσο, για να συμπεριλάβετε τον κώδικα εργασίας σε ένα αρχείο HTML, χρησιμοποιήστε το α 'άμορφη μάζα' για να γράψετε τον κωδικό εργάτη.
Σύνταξη (Δημιουργία Web Worker)
συνθ Χ = νέος Εργάτης ( 'worker.js' ) ;Σύνταξη (Αποστολή μηνύματος στον εργαζόμενο)
συνθ Χ = νέος Εργάτης ( 'worker.js' ) ;
Σύνταξη (Λήψη μηνύματος από τον εργαζόμενο)
Χ. ένα μήνυμα = λειτουργία ( Εκδήλωση ) {κονσόλα. κούτσουρο ( Εκδήλωση. δεδομένα ) ;
} ;
Παράδειγμα: Χρήση του 'Web Worker' για τον υπολογισμό του παραγοντικού ενός αριθμού σε JavaScript
Το παρακάτω παράδειγμα χρησιμοποιεί το 'Εργάτης()' κατασκευαστής για τη δημιουργία ενός web worker και τον υπολογισμό του παραγοντικού ενός αριθμού:
< html >
< κεφάλι >
< στυλ h2 = 'text-align: center;' > Παράδειγμα Web Workers h2 >
κεφάλι >
< σώμα >
< γραφή >
συνθ Χ = νέος Εργάτης ( URL. createObjectURL ( νέος Αμορφη μάζα ( [
`
// Σενάριο εργασίας
συνθ γεγονός = ( n ) => {
αν ( n == 0 || n == 1 ) {
ΕΠΙΣΤΡΟΦΗ 1n ;
}
αλλού {
ΕΠΙΣΤΡΟΦΗ BigInt ( n ) * γεγονός ( BigInt ( n ) - 1n ) ;
}
} ;
εαυτός. ένα μήνυμα = ( Εκδήλωση ) => {
συνθ Με = γεγονός ( Εκδήλωση. δεδομένα ) ;
εαυτός. postΜήνυμα ( Με. toString ( ) ) ;
} ; `
] , { τύπος : 'κείμενο/javascript' } ) ) ) ;
Χ. postΜήνυμα ( 15n ) ;
Χ. ένα μήνυμα = ( Εκδήλωση ) => {
συνθ έξω = Εκδήλωση. δεδομένα ;
κονσόλα. κούτσουρο ( 'Factory of 15 Via a Web Worker-> ' , έξω ) ;
} ;
σώμα >
html >
Σε αυτόν τον κώδικα, εφαρμόστε τα ακόλουθα βήματα:
- Αρχικά, καθορίστε την αναφερόμενη επικεφαλίδα.
- Μετά από αυτό, δημιουργήστε ένα 'Web Worker' αντικείμενο που έχει τη διεύθυνση URL του αντικειμένου Blob που περιλαμβάνει τον κώδικα για τον εργαζόμενο.
- Ο κώδικας που είναι αφιερωμένος στον εργαζόμενο περιλαμβάνεται σε μια ανώνυμη συνάρτηση που υπολογίζει το παραγοντικό του αριθμού μέσω μιας αναδρομικής συνάρτησης.
- Επίσης, ο εργαζόμενος ακούει μηνύματα που αποστέλλονται μέσω του κύριου νήματος χρησιμοποιώντας το “self.onmessage” γεγονός, ανακτά το παραγοντικό του περασμένου αριθμού και δίνει το αποτέλεσμα στο κύριο νήμα μέσω του 'postMessage()' μέθοδος.
- Στο κύριο νήμα, δημιουργήστε μια παρουσία εργασίας και στείλτε της ένα μήνυμα με τον αριθμό ' 15n '. Εδώ, ' n ' αναφέρεται στην τιμή 'BigInt'.
- Αφού ο εργάτης ολοκληρώσει τον υπολογισμό του παραγοντικού, στέλνει το αποτέλεσμα/αποτέλεσμα πίσω στο κύριο νήμα χρησιμοποιώντας το 'postMessage()' μέθοδος.
- Τέλος, το κύριο νήμα ανακτά/λαμβάνει το αποτέλεσμα στο «Μήνυμα» συμβάν και επιστρέφει το αντίστοιχο παραγοντικό του αριθμού στην κονσόλα.
Παραγωγή
Πλεονεκτήματα των Web Workers
Παράλληλη επεξεργασία : Σε περίπτωση παράλληλης εκτέλεσης του ίδιου κωδικού.
Καμία διακοπή στην εκτέλεση κώδικα: Η εκτέλεση του κώδικα γίνεται ανεξάρτητα από ανανεώσεις κ.λπ. στην τρέχουσα σελίδα.
Παρακολούθηση κίνησης: Όλη η ανίχνευση κίνησης πραγματοποιείται στον εργάτη παρασκηνίου.
Ενεργοποιημένο Multithreading: Αυτά επιτρέπουν το multithreading σε JavaScript.
Βελτιωμένη απόδοση: Βελτιστοποιήστε την απόδοση κάνοντας εντατικές/προκλητικές εργασίες σε ξεχωριστά νήματα.
Αποτελεσματική εμπειρία χρήστη: Αυτά αποφεύγουν τον αποκλεισμό του κύριου νήματος, με αποτέλεσμα μια ανταποκρινόμενη εμπειρία χρήστη.
Περιορισμοί Web Workers
Ωστόσο, υπάρχουν ορισμένοι περιορισμοί και των εργαζομένων στο διαδίκτυο. Αυτά αναφέρονται, ως εξής:
- Μεγαλύτερη αξιοποίηση της μνήμης.
- Δεν είναι δυνατή η ενημέρωση του DOM σε ένα νήμα εργασίας ή η κλήση του αντικειμένου παραθύρου.
συμπέρασμα
“Web Workers” αντιστοιχεί σε ένα API προγράμματος περιήγησης που επιτρέπει στο JavaScript να εκτελεί τις εργασίες ταυτόχρονα σε ένα ξεχωριστό/αποκλειστικό νήμα. Αυτά μπορούν να χρησιμοποιηθούν λαμβάνοντας ως όρισμα μια διεύθυνση URL, η οποία αντιστοιχεί στη διαδρομή του αρχείου σεναρίου εργασίας. Αυτό το ιστολόγιο συζήτησε τη χρήση του 'Web Workers' για multithreading σε JavaScript.