Εισαγωγή στο JavaScript API του Workers Web

Web Workers είναι ένα API JavaScript που σας επιτρέπει να κάνετε εκτελέστε σενάρια σε ξεχωριστό νήμα από το κύριο. Μπορεί να έρθει σε πρακτικό όταν δεν θέλετε κανένα εμπόδιο στην εκτέλεση των κύριων σεναρίων, λόγω script-esque background.

Το API Web Workers είναι υποστηρίζεται σχεδόν σε όλα τα προγράμματα περιήγησης, για πιο λεπτομερείς πληροφορίες, ρίξτε μια ματιά στα έγγραφα του CanIUse. Πριν εισέλθετε στον κώδικα, ας δούμε μερικά σενάρια όπου μπορεί να θέλετε να χρησιμοποιήσετε αυτό το API, ώστε να μπορείτε να πάρετε μια ιδέα για το τι εννοώ με υπόβαθρα-esque σενάρια.

Χρησιμοποιήστε περιπτώσεις

Ας πούμε ότι υπάρχει ένα σενάριο αυτό μεταφέρει και επεξεργάζεται ένα αρχείο. Εάν υπάρχει ένα αρχείο πολύ μεγάλη θα χρειαστεί πολύς χρόνος για επεξεργασία! Που θα μπορούσε να σταματήσει άλλα σενάρια που κλήθηκαν αργότερα από την εκτέλεση.

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

Το σενάριο εκτελείται σε ένα νήμα εργατών υποβάθρου είναι γνωστή ως εργατικό σενάριο ή μόνο το εργάτης.

Για ένα άλλο παράδειγμα, φανταστείτε ότι υπάρχει a μεγάλη μορφή, διατεταγμένη σε καρτέλες. Είναι γραμμένο με τρόπο που ενημερώνει τα στοιχεία ελέγχου σε μία καρτέλα επηρεάζει ορισμένους από τους ελέγχους σε άλλους.

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

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

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

Στόχοι και τύποι εργαζομένων

Το Web Workers API είναι ίσως ένα από τα απλούστερα API που συνεργάζεστε. Έχει πολύ απλές μεθόδους δημιουργούν θέματα εργασίας και επικοινωνούν μαζί τους από το κύριο σενάριο.

Το παγκόσμιο πεδίο εφαρμογής ενός νήματος εργαζομένων βρίσκεται σε διαφορετικό πλαίσιο από το κύριο νήμα. Εσύ δεν μπορούν να έχουν πρόσβαση στις μεθόδους και τις ιδιότητες του παράθυρο αντικείμενο όπως συναγερμός() μέσα σε ένα νήμα εργασίας. Εσύ επίσης δεν μπορεί να αλλάξει απευθείας το DOM από ένα νήμα εργατών.

Ωστόσο, εσείς μπορώ χρησιμοποιήστε πολλά API που υπάγονται παράθυρο, για παράδειγμα Υπόσχεση και Φέρω, στο νήμα εργατών σας (δείτε την πλήρη λίστα).

Μπορείτε επίσης να έχετε ένθετα νήματα εργασίας: Θέματα εργασίας που δημιουργήθηκαν από άλλο νήμα εργατών. Ένας εργαζόμενος που δημιουργείται από ένα άλλο ονομάζεται a υποπαιδεύτρια.

Υπάρχουν επίσης Πολλά τύπους των εργαζομένων. Οι δύο βασικές είναι αφοσιωμένων και κοινών εργαζομένων.

Αφοσιωμένοι εργαζόμενοι ανήκουν στο ίδιο πλαίσιο περιήγησης ότι το κύριο νήμα τους ανήκει. Ωστόσο, οι εργαζόμενοι με κοινόχρηστη εργασία είναι σε ένα διαφορετικό πλαίσιο περιήγησης (για παράδειγμα, σε ένα iframe) από το κύριο σενάριο. Και στις δύο περιπτώσεις, το κύριο σενάριο και οι εργαζόμενοι πρέπει να βρίσκονται στον ίδιο τομέα.

Το παράδειγμα σε αυτό το σεμινάριο θα είναι σχετικά με τον αφοσιωμένο εργαζόμενο, που είναι ο πιο συνηθισμένος τύπος.

Μέθοδοι API

Δείτε το παρακάτω διάγραμμα για ένα γρήγορη επισκόπηση όλων των κύριων μεθόδων που αποτελούν το API Web Workers.

ο Εργάτης() κατασκευαστής δημιουργεί ένα ειδικό νήμα εργατών και επιστρέφει το αντικείμενο αναφοράς του. Στη συνέχεια, χρησιμοποιούμε αυτό το αντικείμενο για να επικοινωνήσουμε με αυτόν τον συγκεκριμένο εργαζόμενο.

ο postMessage () η μέθοδος χρησιμοποιείται τόσο στο κύριο όσο και στο σενάριο των εργαζομένων στείλετε δεδομένα μεταξύ τους. Στη συνέχεια, τα απεσταλμένα δεδομένα λαμβάνονται από την άλλη πλευρά από το επίδομα χειριστής συμβάντων.

ο περατώ() μέθοδος τερματίζει ένα νήμα εργασίας από το κύριο σενάριο. Ο τερματισμός αυτός είναι άμεσος: οποιαδήποτε τρέχουσα εκτέλεση δέσμης ενεργειών και εκκρεμείς δέσμες ενεργειών θα ακυρωθεί. ο Κοντά() μέθοδος κάνει το ίδιο πράγμα, αλλά είναι που ονομάζεται από το ίδιο το κλείσιμο του νήματος εργαζόμενου.

Παράδειγμα κώδικα

Τώρα, ας δούμε κάποιο δείγμα κώδικα. ο index.html Η σελίδα περιέχει το κύριο σενάριο μέσα σε α

Αρχίζουμε με το δημιουργία του νήματος εργαζομένων από το κύριο σενάριο.

  w = νέος εργαζόμενος ("worker.js"); 
 ο Εργάτης() κατασκευαστής παίρνει τη διεύθυνση URL του αρχείου του εργαζομένου ως επιχείρησή του.
 Στη συνέχεια, προσθέτουμε έναν χειριστή συμβάντων για το επίδομα εκδήλωση της νεοσυσταθείσας υπόθεσης εργαζόμενου προς να λαμβάνουν δεδομένα από αυτό. ο δεδομένα ιδιοκτησία του μι το συμβάν θα κρατήσει τα ληφθέντα δεδομένα.
  w = νέος εργαζόμενος ("worker.js"); w.onmessage = (e) => console.log ('Λήψη από εργαζόμενο: $ e.data');  
 Τώρα, χρησιμοποιούμε postMessage () προς το στείλτε κάποια δεδομένα στο νήμα εργασίας με το πάτημα ενός κουμπιού. ο postMessage () η μέθοδος μπορεί να πάρει δύο επιχειρήματα. Το πρώτο μπορεί να είναι οποιουδήποτε τύπου (συμβολοσειρά, συστοιχία ...). Είναι τα δεδομένα να σταλεί στο νήμα εργατών (ή στο κύριο σενάριο, όταν η μέθοδος υπάρχει στο νήμα εργασίας).
 Η δεύτερη, προαιρετική παράμετρος είναι μια σειρά από αντικείμενα που μπορεί να χρησιμοποιηθεί από τα θέματα των εργαζομένων (αλλά όχι από το κύριο σενάριο ή αντίστροφα). Αυτά τα είδη αντικειμένων ονομάζονται Μεταβιβάσιμος αντικείμενα.
  document.querySelector ('κουμπί') onclick = () => w.postMessage ('john');  
 Απλώς στέλνω μια τιμή συμβολοσειράς στο νήμα εργατών.
 Στο νήμα εργατών, πρέπει να προσθέσουμε ένα επίδομα χειριστής συμβάντων ότι θα λάβουν τα δεδομένα αποστέλλονται σε αυτό από το κύριο σενάριο στο κουμπί κλικ. Μέσα στον χειριστή, εμείς Συνδυάστε τη ληφθείσα συμβολοσειρά με μια άλλη και να στείλετε το αποτέλεσμα πίσω στο κύριο σενάριο.
  console.info ("δημιουργήθηκε εργαζόμενος"); onmessage = (e) => postMessage ('Hi $ e.data')?  
 Σε αντίθεση με το κύριο σενάριο, όπου έπρεπε να χρησιμοποιήσουμε το w αντικείμενο αναφοράς σε ανατρέξτε στο ειδικό νήμα εργατών στην οποία το σενάριο χρησιμοποιεί στη συνέχεια το επίδομα και postMessage μεθόδους, υπάρχει δεν χρειάζεται να υπάρχει αντικείμενο αναφοράς στο νήμα εργασίας για να δείξετε το κύριο νήμα.
 Ο κώδικας λειτουργεί ως εξής. Όταν το πρόγραμμα περιήγησης φορτώνει index.html, η κονσόλα θα εμφανίσει το "δημιουργήθηκε εργαζόμενος" μήνυμα μόλις το εργάτης() κατασκευαστής εκτελείται στο κύριο νήμα, δημιουργώντας έναν νέο εργαζόμενο.
 Όταν κάνετε κλικ στο κουμπί της σελίδας, θα πάρετε το "Ελήφθη από τον εργαζόμενο: Hi john" μήνυμα στην κονσόλα, που είναι η συμβολοσειρά που ήταν συγκολλημένο στο νήμα εργατών με τα δεδομένα που του έστειλαν και στη συνέχεια ήταν να επιστρέψετε στο κύριο σενάριο.