Χρειάστηκε ποτέ να εκτελέσετε κώδικα στο πρόγραμμα περιήγησης που χρειάστηκε τόσο πολύ για να εκτελεστεί η εφαρμογή σας δεν ανταποκρίνεται για λίγο; Με τους εργάτες ιστού HTML5, δεν χρειάζεται να το ξαναζήσετε ποτέ.
Οι εργαζόμενοι στο Web σάς επιτρέπουν να διαχωρίζετε τον μακροπρόθεσμο κώδικα και να τον εκτελείτε ανεξάρτητα από τον άλλο κώδικα που εκτελείται στη σελίδα. Αυτό διατηρεί τη διεπαφή χρήστη σας να ανταποκρίνεται, ακόμη και κατά τη διάρκεια πολύπλοκων λειτουργιών.
Τι είναι οι Εργάτες Ιστού;
Παραδοσιακά, η JavaScript είναι μια γλώσσα μονού νήματος. Αυτό σημαίνει ότι τίποτα άλλο δεν μπορεί να εκτελεστεί ενώ εκτελείται ένα κομμάτι κώδικα. Για παράδειγμα, εάν έχετε κώδικα που προσπαθεί να κάνει κίνηση σε ένα στοιχείο DOM, ο κώδικας που προσπαθεί να αλλάξει μια μεταβλητή πρέπει να περιμένει να τελειώσει η κινούμενη εικόνα για να μπορέσει να εκτελεστεί.
Οι εργαζόμενοι στο Web είναι αρχεία JavaScript που εκτελούνται σε ξεχωριστό νήμα χωρίς άμεση πρόσβαση στο DOM.
Ένας τρόπος για να σκεφτείτε τους εργάτες ιστού είναι ότι είναι κομμάτια κώδικα που χρειάζονται πολύ χρόνο για να εκτελεστούν, επομένως τα δίνετε στο πρόγραμμα περιήγησης για να τα εκτελέσει στο παρασκήνιο. Δεδομένου ότι αυτός ο κώδικας εκτελείται τώρα στο παρασκήνιο, δεν επηρεάζει το JavaScript που είναι υπεύθυνο για την ιστοσελίδα σας.
Ως παρενέργεια, δεν μπορεί πλέον να αλληλεπιδράσει άμεσα με τον υπόλοιπο κώδικά σας, επομένως οι εργαζόμενοι στον ιστό δεν έχουν πρόσβαση στο DOM. Ωστόσο, πολλά άλλα API προγράμματος περιήγησης εξακολουθούν να είναι διαθέσιμα, συμπεριλαμβανομένων των API WebSocket και Fetch.
Ωστόσο, οι εργαζόμενοι στο Web δεν είναι εντελώς απομονωμένοι από το κύριο νήμα. Όταν ένας εργαζόμενος χρειάζεται να επικοινωνήσει με το κύριο νήμα, μπορεί να στείλει ένα μήνυμα και το κύριο νήμα μπορεί να στείλει το δικό του μήνυμα ως απάντηση.
Γιατί Web Workers;
Πριν από τους εργαζόμενους στον ιστό, ο μόνος τρόπος εκτέλεσης JavaScript που απαιτούσε πολύ χρόνο στο πρόγραμμα περιήγησης ήταν:
- Αποδεχτείτε ότι η σελίδα δεν θα ανταποκρίνεται για λίγο.
- Σπάστε αυτόν τον κωδικό ασύγχρονα κομμάτια.
Δεδομένου ότι μια σελίδα που δεν ανταποκρίνεται είναι συνήθως μια κακή εμπειρία χρήστη, μπορείτε να επιλέξετε την ασύγχρονη επιλογή. Η σύνταξη κώδικα με αυτόν τον τρόπο σημαίνει τη διαίρεση του σε μικρότερα κομμάτια που μπορεί να τρέξει το πρόγραμμα περιήγησης ενώ δεν χειρίζεται τη διεπαφή χρήστη. Τα κομμάτια πρέπει να είναι αρκετά μικρά ώστε, εάν η διεπαφή χρήστη χρειάζεται ενημέρωση, το πρόγραμμα περιήγησης μπορεί να ολοκληρώσει την εκτέλεση του τρέχοντος κομματιού και να παρακολουθήσει τη διεπαφή χρήστη.
Οι εργαζόμενοι στο Web προστέθηκαν στην HTML5 για να προσφέρουν μια καλύτερη λύση σε αυτό το πρόβλημα. Αντί να σας αναγκάζουν να γίνετε δημιουργικοί με τον ασύγχρονο κώδικα, σας επιτρέπουν να διαχωρίσετε καθαρά μια συνάρτηση για εκτέλεση στο δικό της απομονωμένο νήμα.
Αυτό διευκόλυνε τους προγραμματιστές να γράψουν τέτοιο κώδικα και βελτίωσε επίσης την εμπειρία του χρήστη.
Περιπτώσεις χρήσης για εργάτες Ιστού
Οποιαδήποτε εφαρμογή απαιτεί πολύ υπολογισμό από την πλευρά του πελάτη θα μπορούσε να επωφεληθεί από τους εργαζόμενους στον ιστό.
Ας πούμε, για παράδειγμα, η εφαρμογή σας θέλει να δημιουργήσει μια αναφορά χρήσης και αποθηκεύει όλα τα δεδομένα στον πελάτη για λόγους απορρήτου.
Για τη δημιουργία αυτής της αναφοράς, η εφαρμογή Ιστού σας πρέπει να ανακτήσει τα δεδομένα, να εκτελέσει υπολογισμούς σε αυτά, να οργανώσει τα αποτελέσματα και να τα παρουσιάσει στον χρήστη.
Εάν προσπαθήσατε να το κάνετε αυτό στο κύριο νήμα, ο χρήστης δεν θα μπορούσε να χρησιμοποιήσει εντελώς την εφαρμογή ενώ η εφαρμογή επεξεργαζόταν τα δεδομένα. Αντίθετα, μπορείτε να μετακινήσετε μέρος ή όλο αυτόν τον κώδικα σε έναν web worker. Αυτό επιτρέπει στο χρήστη να συνεχίσει να χρησιμοποιεί την εφαρμογή ενώ εκτελούνται οι υπολογισμοί.
Τρόπος χρήσης Web Workers σε JavaScript
ο Web Worker API καθορίζει τον τρόπο χρήσης των webworkers. Η χρήση αυτού του API περιλαμβάνει τη δημιουργία ενός αντικειμένου Worker με τον κατασκευαστή Worker ως εξής:
ας newWorker = Εργάτης('εργάτης.js');ο Εργάτης Ο κατασκευαστής αποδέχεται το όνομα ενός αρχείου JavaScript ως παράμετρό του και εκτελεί το αρχείο σε ένα νέο νήμα. Επιστρέφει ένα αντικείμενο Worker για να επιτρέψει στο κύριο νήμα να αλληλεπιδράσει με το νήμα εργασίας.
Οι εργαζόμενοι αλληλεπιδρούν με το κύριο νήμα στέλνοντας μηνύματα εμπρός και πίσω. Χρησιμοποιείτε το postΜήνυμα λειτουργία για την αποστολή συμβάντων μεταξύ του εργαζόμενου και του κύριου νήματος. Χρησιμοποιήστε το ένα μήνυμα ακροατής συμβάντων για να ακούσει μηνύματα από το άλλο μέρος.
Εδώ είναι ένα παράδειγμα κώδικα. Πρώτον, ένα κύριο νήμα μπορεί να μοιάζει με αυτό:
αφήνω εργάτης = νέος Worker ('worker.js')
worker.postMessage('Γεια σου!')
εργάτης.onmessage = λειτουργία(μι) {
console.log('Το νήμα των εργαζομένων λέει', e.data)
}
Αυτό το κύριο νήμα δημιουργεί ένα αντικείμενο εργασίας από το worker.js και, στη συνέχεια, στέλνει ένα μήνυμα σε αυτό με εργάτης.postMessage. Στη συνέχεια ορίζει ένα πρόγραμμα ακρόασης συμβάντων, παρόμοιο σε έννοια με το a Ακρόαση συμβάντων DOM. Ένα συμβάν θα ενεργοποιείται κάθε φορά που ο εργαζόμενος στέλνει ένα μήνυμα πίσω στο κύριο νήμα και ο χειριστής καταγράφει το μήνυμα του εργαζόμενου στην κονσόλα.
Ο κώδικας μέσα στον εργαζόμενο (worker.js) έχει μία εργασία:
onemessage = λειτουργία(μι) {
αφήνω μήνυμα = e.data;
console.log('Το κύριο νήμα είπε', μήνυμα);
post μήνυμα ('Γεια!')
}Ακούει τυχόν μηνύματα που αποστέλλονται από το κύριο νήμα, καταγράφει το μήνυμα στην κονσόλα και στέλνει ένα μήνυμα επιστροφής πίσω στο κύριο νήμα.
Τα μηνύματα σε αυτό το παράδειγμα είναι όλα συμβολοσειρές, αλλά αυτό δεν είναι απαίτηση: μπορείτε να στείλετε σχεδόν οποιοδήποτε τύπο δεδομένων ως μήνυμα.
Το είδος των εργαζομένων που έχετε δει μέχρι τώρα ονομάζονται αφοσιωμένοι εργάτες. Μπορείτε να έχετε πρόσβαση σε αυτά μόνο από το αρχείο στο οποίο τα δημιουργήσατε (είναι αφιερωμένα σε αυτό). Οι κοινόχρηστοι εργαζόμενοι είναι το αντίθετο: μπορούν να λαμβάνουν μηνύματα από και να στέλνουν μηνύματα σε πολλά αρχεία. Οι κοινόχρηστοι εργαζόμενοι είναι εννοιολογικά ίδιοι με τους αφοσιωμένους εργαζόμενους, αλλά πρέπει να τους χρησιμοποιήσετε λίγο διαφορετικά.
Ας δούμε ένα παράδειγμα. Αντί να χρησιμοποιεί τον κατασκευαστή Worker, κάθε αρχείο που θέλει να χρησιμοποιήσει έναν κοινόχρηστο εργαζόμενο πρέπει να δημιουργήσει ένα αντικείμενο εργασίας χρησιμοποιώντας SharedWorker():
αφήνω κοινόχρηστος Εργάτης = νέος SharedWorker('worker.js')Οι διαφορές όμως δεν σταματούν εκεί. Για να στείλει ή να λάβει ένα αρχείο ένα μήνυμα από έναν κοινόχρηστο εργαζόμενο, πρέπει να το κάνει με πρόσβαση στο α Λιμάνι αντικείμενο, αντί να το κάνετε απευθείας. Δείτε πώς φαίνεται:
sharedWorker.port.postMessage('Γεια σου!')
sharedWorker.port.onMessage = λειτουργία(μι) {
console.log('Ο κοινός εργαζόμενος έστειλε', e.data);
}
Πρέπει επίσης να χρησιμοποιήσετε το αντικείμενο θύρας μέσα στον εργαζόμενο:
onconnect = λειτουργία(μι) {
συνθ port = e.ports[0];
port.onmessage = λειτουργία(μι) {
console.log('Το μήνυμα ελήφθη', e.data)
port.postMessage('Γειά σου!');
}
}
ο σε σύνδεση ο ακροατής ενεργοποιείται κάθε φορά που συμβαίνει μια σύνδεση σε μια θύρα (όταν μια ένα μήνυμα ο ακροατής συμβάντων έχει ρυθμιστεί στο κύριο νήμα).
Όταν συμβεί αυτό, ο κώδικας λαμβάνει τη θύρα στην οποία μόλις συνδέθηκε από το συμβάν σύνδεσης και τον αποθηκεύει σε μια μεταβλητή. Στη συνέχεια, ο κωδικός καταχωρεί το ένα μήνυμα ακροατής στο αντικείμενο θύρας. Στη συνέχεια, ο κώδικας καταγράφει το μήνυμα στην κονσόλα και χρησιμοποιεί τη θύρα για να στείλει ένα μήνυμα πίσω στο κύριο νήμα.
Web Workers Βελτιώνουν την εμπειρία χρήστη
Οι εργαζόμενοι στο Web είναι νήματα JavaScript που σας επιτρέπουν να εκτελείτε πολύπλοκα και μακροχρόνια κομμάτια κώδικα στο παρασκήνιο. Αυτός ο κωδικός θα αποφύγει τον αποκλεισμό της διεπαφής χρήστη. Η χρήση διαδικτυακών εργαζομένων διευκολύνει τη σύνταξη αυτού του είδους κώδικα και βελτιώνει την εμπειρία του χρήστη της εφαρμογής. Μπορείτε να δημιουργήσετε εργαζόμενους ιστού και να αλληλεπιδράσετε μαζί τους, χρησιμοποιώντας το API του web worker.
