21 passos per superar JavaScript ràpid

Autora: Randy Alexander
Data De La Creació: 23 Abril 2021
Data D’Actualització: 16 Ser Possible 2024
Anonim
21 passos per superar JavaScript ràpid - Creatiu
21 passos per superar JavaScript ràpid - Creatiu

Content

A primera vista, el processament en paral·lel sona com una invitació a dinar gratuït: poder utilitzar CPU multi-core de manera més eficient hauria de donar al vostre codi un augment de velocitat enorme. L’experiència pràctica demostra que no sempre és així: alguns problemes són impossibles de paral·lelitzar. A més d'això, l'execució paral·lela condueix a tota una família de nous problemes que no es veuen a les màquines de nucli únic.

El codi paral·lel es pot dividir, en principi, en dos grups de treballs. El primer grup és l’augment clàssic de la velocitat: si el vostre programa ha de filtrar 3000 imatges, dividir la feina significa que es poden processar més imatges alhora. Tot i que és benèfic, aquest tipus de tasques poques vegades es troba en el desenvolupament web quotidià. (Si creeu un lloc amb una gran quantitat d’imatges, assegureu-vos de fer-ne una còpia de seguretat amb un emmagatzematge al núvol decent).


La forma més comuna de treball de paral·lelització es basa en tasques de llarga durada que no requereixen molt de temps de CPU. Un bon exemple per a això seria esperar una descàrrega o algun tipus d’entrada de dispositiu: si es fa de manera paral·lela, no cal bloquejar la resta de la interfície gràfica d’usuari. Tenint en compte que els usuaris solen tenir problemes per entendre "per què el botó no fa clic", això pot conduir a una major satisfacció dels usuaris, fins i tot si la velocitat real no augmenta.

Si necessiteu recursos nous per ajudar-vos a codificar de manera més intel·ligent, consulteu la nostra guia de les millors eines de disseny web del 2019. Si voleu evitar el codi del tot, dissenyeu el vostre lloc amb el millor creador de llocs web i assegureu-vos que hàgiu triat el servei d'allotjament web perfecte amb la nostra guia.

01. Execució interrompuda

var sleep = require ('dormir'); function worker () {console.log ("Worker up") sleep.msleep (1000) console.log ("Worker down")} setInterval (treballador, 2000); while (1 == 1) {sleep.msleep (250) console.log ("Hola de main")}>

Comencem amb un petit exemple basat en un dels preferits més populars: el setInterval funció. Pren una referència de funció i un valor numèric delineat en mil·lisegons. Després, la funció s'activa periòdicament cada vegada que caduca el temporitzador de retards.


02. Preparació per a una tardor

npm install sleep npm example1.js

Utilitzant el dormir () La funció requereix que carreguem el mòdul de repòs en un projecte local de npm. Actua com a interfície de la biblioteca de son del sistema operatiu; no us pregunteu si el compilador de l'estació de treball s'activa durant el desplegament del paquet.

03. Perills de la multitarea

Quan executeu aquest programa, us trobareu davant d’una sortida similar a la que es mostra a la figura que acompanya aquest pas. És obvi que el nostre treballador mai no és invocat; alguna cosa ha d'errar amb la funció setInterval.

04. Perills de la multitarea, part 2

Els navegadors moderns equipen cada pestanya amb un fil de JavaScript. Una mirada acurada al nostre bucle revela que és interminable. Això vol dir que funcionarà per sempre i no cedirà mai el control. Donat que setInterval () funciona amb un missatge, la seva càrrega útil mai no s'executa ja que el gestor de missatges està bloquejat perquè no s'executi.


05. Centreu-vos en els creadors de problemes

const bar = () => console.log ('bar') const baz = () => console.log ('baz') const foo = () => {console.log ('foo') setTimeout (barra, 0) baz ()} foo ()

El bloc de Flavio Copes proporciona un codi de codi molt interessant que il·lustra el problema. Quan s'executa, produeix la sortida que es mostra a la figura a causa de la bloqueig de la cua de missatges fins a foo () renuncia al control del fil principal.

06. Introduïu el roscat

Tenint en compte que el sistema operatiu subjacent és capaç de realitzar multitarea preventiva, aprofitem les seves capacitats generant fils mitjançant una API dedicada anomenada WebWorkers, que gaudeix d'un ampli suport. La figura que acompanya aquest pas mostra la llista actual de la funció.

07. Creeu un fitxer addicional

console.log ("El treballador diu hola!"); console.log ("Worker up"); while (1 == 1) {console.log ("x"); }

Els WebWorkers no poden iniciar-se amb una funció útil. En canvi, cal un fitxer nou que contingui el codi destinat a executar-se al fil. En el cas del nostre exemple, example7thread.js té el contingut mostrat acompanyant aquest pas.

08. Executeu el treballador ...

const worker = require ('threads_treballador'); var myWorker = new worker.Worker ('./ example7thread.js'); var myWorker2 = new worker.Worker ('./ example7thread.js');

El nostre treballador està preparat per al prime time. Les especialitats del temps d’execució de Node.JS ens obliguen a incloure el mòdul de fils de treball i passar a un camí relatiu: problemes no afrontats al navegador. A més, no us pregunteu sobre el falta l'inici () trucada: un treballador web es posa en marxa quan la instància es connecta.

09. ... i entendre’n els resultats

El lliurament de missatges sol requerir algun tipus d’interacció entre el temps d’execució i la resta del sistema operatiu. Malauradament, el nostre bucle interminable bloqueja aquest procés, cosa que significa que només apareix un dels missatges abans de "la gran parada".

10. Afegiu la màscara

const worker = require ('threads_treballador'); var myWorker = new worker.Worker ('./ example7thread.js'); var myWorker2 = new worker.Worker ('./ example7thread.js'); while (1 == 1) {}

Un altre experiment consisteix a col·locar un bucle buit després de les dues invocacions del constructor. En aquest cas, els fils mai començaran a funcionar: el missatge d’invocació no arriba mai amb el sistema operatiu.

11. Comunicació entre processos

Tot i que els treballadors que executen bucles interminables ajustats tenen els problemes exposats anteriorment, les rutines poden comunicar-se entre elles. Això es fa mitjançant una interfície de transmissió de missatges; penseu en això com una facilitat que us permet passar un objecte de missatge d'un remitent a un destinatari a través dels límits del fil.

12. Per què passa missatge?

A més dels avantatges de poder coordinar els fils de manera eficaç (i reduir el risc de "col·lisions", també conegudes com a condicions de carrera), el missatge que passa al fil principal és l'única manera d'interactuar amb el DOM, a causa de la dificultat de crear piles GUI segures de fils.

13. Aneu al navegador

Implementar la transmissió de missatges a Node.JS és tediós. Moveu el codi al web: comenceu creant un arnès HTML que es carregui examplempi.js. Tingueu en compte que aquest codi només es pot executar des d'un servidor web localhost a causa de restriccions d'origen DOM.

14. Configureu una bústia de correu ...

var myWorker = new Worker ('./ examplempithread.js'); var myWorker2 = new Worker ('./ examplempithread.js'); myWorker.onmessage = function (e) {console.log (e); } myWorker2.onmessage = function (e) {console.log (e); }

Cada treballador exposa una propietat de missatge que pren una referència de funció que s'ha d'invocar sempre que aparegui un missatge des de l'altre extrem. Els missatges entrants simplement es reenvien a la consola del navegador des del fil principal.

15. ... i alimentar-lo del treballador

postMessage ("El treballador diu hola!"); postMessage ("Treballador"); while (1 == 1) {postMessage ("x"); }

L'enviament de missatges a una bústia s'aconsegueix mitjançant la funció de missatge de publicació. Tingueu en compte que un treballador també pot implementar un missatge esdeveniment, que podria rebre informació de qui té l’objecte d’instància del treballador.

16. Llença-ho ...

En aquest moment, el codi ja està a punt per executar-se. La consola per a desenvolupadors no està inundada de missatges a causa de l’alta eficiència de la interfície MPI, cosa que significa que les dades poden viatjar pel sistema de manera eficient.

17. Asíncron i espera

L'addició de Microsoft de paraules clau asíncrones i d'espera va modificar l'historial de C # i VisualBasic.Net. En principi, un mètode marcat com asíncron s'executa de forma cooperativa amb la resta del programa. Els resultats es poden obtenir mitjançant la funció espera.

18. Substitueix el nostre llit

const sleep = (mil·lisegons) => {return new Promise (resolve => setTimeout (resolve, milisegons))}

Tenint en compte que els navegadors tenen severes limitacions a l’hora d’accedir a funcions natives, no podem reutilitzar la funció de repòs abans esmentada. A més, és poc òptim perquè atura tot el temps d'execució de Node.JS. El fragment que acompanya aquest pas proporciona un enfocament més eficaç.

19. Entendre el codi ...

Aquest codi retorna un objecte de promesa: és una altra classe de conveniència que s’afegeix a Java Script per intentar facilitar el multi-threading. Haureu d'invocar el seu mètode de resolució mitjançant un fitxer setTimeout, assegurant que el codi ha de "seure" durant força temps.

20. ... i desplegueu-lo en algun lloc

Les trucades esperades només es permeten dins de les funcions asincronitzades. Això significa que el treballador necessita una reescriptura: comenceu invocant una funció de portador asíncron. Gestiona la resta de la interacció del codi.

const sleep = (mil·lisegons) => {retorna Promesa nova (resolve => setTimeout (resolució, mil·lisegons))} postMessage ("El treballador diu hola!"); postMessage ("Treballador"); worker () async function worker () {while (1 == 1) {postMessage ("x"); esperar a dormir (1000); }}

21. Aprofita el poder dels nadius!

Els desenvolupadors que treballen amb el codi Node.JS no haurien d’oblidar que, normalment, també poden crear mòduls completament natius si es necessita un rendiment extremadament alt. Aquests no només poden aprofitar les diverses API del sistema operatiu, sinó que també es poden escriure en llenguatges de programació que es compilen al codi de la màquina.

Aquest article es va publicar originalment al número 291 de la revista de disseny web creatiu Dissenyador web. Compra el número 291.

Compartir
Com convertir-se en editor de vídeo: cinc consells principals
Llegeix Més

Com convertir-se en editor de vídeo: cinc consells principals

Voleu treballar a la indú tria del mitjan i de l’entreteniment? L’editor de vídeo no é la feina que em ve al cap immediatament, però í que é la que ara mateix é molt...
Compte enrere de fonts més grans: 80 - PMN Caecilia
Llegeix Més

Compte enrere de fonts més grans: 80 - PMN Caecilia

Font hop AG, la reconeguda foneria de tipu , va realitzar una enque ta ba ada en la rellevància hi tòrica, le vende a Font hop.com i la qualitat e tètica. Amb algune incorporacion del e...
6 etapes de la muntanya russa creativa i com fer-hi front
Llegeix Més

6 etapes de la muntanya russa creativa i com fer-hi front

El projecte creatiu poden er una muntanya ru a d’emocion , amb màxim imponent i mínim paralitzant . E tà bé entir por en algun moment: de fet, i no ho fa, hi ha molte po ibilitat q...