Un'introduzione all'API JavaScript di Web Workers
Operatori Web è un'API JavaScript che ti permette di eseguire gli script in un thread separato da quello principale. Può tornare utile quando non si desidera alcun ostacolo nell'esecuzione degli script principali, a causa di script in background.
L'API di Web Workers è supportato in quasi tutti i browser, per informazioni più dettagliate, dai un'occhiata ai documenti CanIUse. Prima di entrare nel codice, vediamo un paio di scenari in cui potresti voler utilizzare questa API per farti un'idea di cosa intendevo per script di background-esque
.
Casi d'uso
Diciamo che c'è una sceneggiatura recupera e elabora un file. Se un file è considerevolmente ci vorrà molto tempo per essere elaborato! Che potrebbe bloccare altri script che sono stati richiamati in seguito dall'esecuzione.
Tuttavia, se il l'elaborazione dei file viene spostata su un thread in background, Conosciuto come il filo del lavoratore, gli altri eventi non saranno bloccati fino a quando il precedente non sarà terminato.
Il copione eseguito in un thread di background worker è conosciuto come il script di lavoro o solo il lavoratore.
Per un altro esempio, immagina che ci sia un grande forma, disposti in schede. È scriptato in modo che i controlli di aggiornamento in una scheda influenza alcuni dei controlli negli altri.
Se l'aggiornamento delle altre schede richiede un po 'di tempo all'utente non è possibile utilizzare continuamente la scheda corrente senza che i suoi eventi vengano messi in attesa. Questo potrebbe congelare l'interfaccia utente, per sgomento dell'utente.
Dal momento che un utente non vedrà le altre schede durante la compilazione di una corrente, è possibile aggiornare i controlli delle altre schede in un thread in background. In questo modo, l'utente può continuare a utilizzare la scheda corrente che sta compilando, senza che nessuno dei suoi script sia bloccato dal processo di aggiornamento dei controlli in altre schede.
Allo stesso modo, se trovi uno scenario in cui uno script potrebbe impedire a un utente di utilizzare l'interfaccia utente fino a quando l'esecuzione non è terminata, potresti prendere in considerazione la possibilità di spostarlo su un thread di lavoro, in modo che possa essere eseguito in background.
Ambiti e tipi di lavoratori
L'API di Web Workers è probabilmente una delle API più semplici con cui lavorare. Ha metodi abbastanza semplici per creare thread di lavoro e comunicare con loro dallo script principale.
L'ambito globale di un thread di lavoro si trova in un contesto diverso rispetto al thread principale. tu non può accedere ai metodi e alle proprietà di finestra oggetto ad esempio mettere in guardia() all'interno di un thread di lavoro. Anche tu non è possibile modificare direttamente il DOM da un thread di lavoro.
Tuttavia, tu può usa molte API che rientrano finestra, per esempio Promettere e andare a prendere, nel tuo thread di lavoro (vedi l'elenco completo).
Puoi anche avere thread di lavoro annidati: thread di lavoro creati da un altro thread di lavoro. Un lavoratore creato da un altro è chiamato a subworker.
Ci sono anche molti tipi dei lavoratori. I due principali sono lavoratori dedicati e condivisi.
Lavoratori dedicati appartengono allo stesso contesto di navigazione a cui appartiene il loro thread principale. I lavoratori condivisi, tuttavia, lo sono presente in un diverso contesto di navigazione (ad esempio, in un iframe) dallo script principale. In entrambi i casi, la sceneggiatura principale e gli operai devono essere nello stesso dominio.
L'esempio in questo tutorial sarà su un lavoratore dedicato, che è il tipo più comune.
Metodi API
Vedere lo schema seguente per a rapida panoramica di tutti i principali metodi che costituiscono l'API Web Workers.
Il Lavoratore() costruttore crea un thread di lavoro dedicato e restituisce il suo oggetto di riferimento. Quindi, usiamo questo oggetto per comunicare con quel lavoratore specifico.
Il postMessage () il metodo è usato sia negli script principali che in quelli di lavoro inviare dati a vicenda. I dati inviati vengono quindi ricevuti dall'altro lato da onMessage gestore di eventi.
Il terminare() metodo termina un thread di lavoro dallo script principale. Questa terminazione è immediato: qualsiasi esecuzione di script corrente e script in sospeso verranno annullati. Il vicino() il metodo fa la stessa cosa, ma è così chiamato dal thread operaio che si chiude.
Codice di esempio
Ora, vediamo un po 'di codice di esempio. Il Iniziamo con il creazione del thread di lavoro dallo script principale. Il Quindi, aggiungiamo un gestore di eventi per il Ora, usiamo Il secondo parametro facoltativo è un array di oggetti può essere utilizzato dai thread worker (ma non dal copione principale, o viceversa). Questi tipi di oggetti sono chiamati Sto solo inviando un valore stringa al thread worker. Nel thread di lavoro, è necessario aggiungere un A differenza della sceneggiatura principale in cui dovevamo usare il Il codice funziona come segue. Quando viene caricato il browser Quando fai clic sul pulsante nella pagina, otterrai il index.html pagina contiene il script principale dentro a w = new Worker ('worker.js'); Lavoratore() costruttore prende come argomento l'URL del file worker.onMessage evento dell'istanza di lavoro appena creata a ricevere dati da esso. Il dati proprietà del e evento terrà i dati ricevuti. w = new Worker ('worker.js'); w.onmessage = (e) => console.log ('Received from worker: $ e.data'); postMessage () a invia alcuni dati al thread di lavoro al clic di un pulsante. Il postMessage () il metodo può prendere due argomenti. Il primo può essere di qualsiasi tipo (stringa, matrice ...). Sono i dati da inviare al thread di lavoro (o allo script principale, quando il metodo è presente nel thread worker).Trasferibile oggetti. document.querySelector ('button'). onclick = () => w.postMessage ('john'); onMessage gestore di eventi che riceverà i dati inviato dallo script principale al clic del pulsante. Dentro il conduttore, noi concatena la stringa ricevuta con un'altra e inviare il risultato allo script principale. console.info ('worker created'); onmessage = (e) => postMessage ('Hi $ e.data'); w oggetto di riferimento a fare riferimento al thread di lavoro specifico su cui lo script utilizza quindi il onMessage e postMessage metodi, c'è nessuna necessità di un oggetto di riferimento nel thread di lavoro per puntare al thread principale.index.html, la console mostrerà il "lavoratore creato" messaggio non appena il lavoratore() costruttore viene eseguito nel thread principale, creando un nuovo lavoratore."Ricevuto dal lavoratore: Ciao John" messaggio nella console, che è la stringa che era concatenato nel thread di lavoro con i dati inviati ad esso, e poi è stato rimandato allo script principale.
