communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Travailleurs Web HTML5

Web Workers

Introduit le concept de Web Workers dans la spécification HTML5 pour résoudre le problème selon lequel JavaScript côté client ne peut pas être multithread. Le travailleur défini fait référence au thread parallèle. du code, mais le web Le travailleur est dans un environnement autonome et ne peut pas accéder à l'objet fenêtre et à l'objet document du thread principal. Il ne peut communiquer avec le thread principal que via le mécanisme de transmission de messages asynchrone

. Nous devons placer le code JavaScript que nous voulons exécuter séparément dans un fichier js séparé, puis appeler le constructeur Worker dans la page pour créer un thread. Le paramètre est le chemin du fichier. Si le stockage du paramètre est une adresse relative, alors. le script contenant l'instruction qui appelle le constructeur Worker doit être utilisé comme référence. S'il s'agit d'un chemin absolu, il faut s'assurer de la même origine (protocole + hôte + port). Ce fichier ne nous oblige pas à utiliser des balises de script pour afficher les références sur la page

var work=new Worker('js/worker.js');

Simple Un petit exemple

Afficher tous les nombres de 0 à 10000 pouvant être divisibles par n sur une page Bien sûr, on n'utilise pas i*n pour compliquer un peu le calcul <. 🎜>

index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Web Workers</title>
</head>
<body>
  <h1>Web Workers</h1>
      <div id="test" style="width:500px;"></div>
    <script type="text/javascript">
        var worker=new Worker('js/worker.js');
        worker.postMessage({
            n:69
        });
        worker.onmessage=function(e){
            var test=document.getElementById('test').innerHTML=e.data;        
        };
    </script>
</body>
</html>

/js/worker.js

function calc(n){
    var result=[];
    for(var i=1;i<10000;i++){
        var tem=i;
        if(i%n==0){
            if(i%(10*n)==0){
                tem+='<br/>';
            }
            result.push(tem);
        }
    }

    self.postMessage(result.join(' '));
    self.close();
}

onmessage=function(e){
    calc(e.data.n);
};

Effet d'affichage :

1018.png

Créer un fichier de travailleur Web

Maintenant, créons notre web worker dans un JavaScript externe.

Ici, nous créons le script de comptage. Le script est stocké dans le fichier "demo_workers.js" :

var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

La partie importante du Le code ci-dessus est la méthode postMessage() - elle est utilisée pour renvoyer un message à la page HTML.

Remarque : les Web Workers ne sont généralement pas utilisés pour des scripts aussi simples, mais pour des tâches plus gourmandes en CPU.

Créer un objet Web Worker

Nous avons déjà le fichier Web Worker, nous devons maintenant l'appeler depuis la page HTML.

Le code suivant détecte si le travailleur existe, sinon - il crée un nouvel objet de travail Web puis exécute le code dans "demo_workers.js":

if(typeof (w) =="undefined")
{
w=new Worker("demo_workers.js");
}

Ensuite, nous pouvons arriver du Web Worker et recevoir le message .

Ajoutez un écouteur d'événement "onmessage" au web worker :

w.onmessage=function(event){
document.getElementById("result").innerHTML= event.data;
};

<pLorsque web="" worker="" délivre un message, le code dans l'écouteur d'événement sera exécuté. event.data="" contient les données de ="" event.data="".

Terminer Web Worker

Lorsque nous créons l'objet Web Worker, il continuera à écouter les messages (même une fois le script externe terminé) jusqu'à ce qu'il soit terminé.

Pour mettre fin au travailleur Web et libérer les ressources du navigateur/ordinateur, veuillez utiliser la méthode terminate() :

w.terminate();




Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- web worker是运行在后台的javascript，不会影响页面的性能 --> <p>计数:<output id="result"></output></p> <button onclick="startWorker()">开始worker</button> <button onclick="endWorker()">停止worker</button> <br><br> <script type="text/javascript"> var w; function startWorker(){ if(typeof(Worker)!="undefined"){//浏览器支持web worker if(typeof(w)=="undefined"){//w是未定义的,还没有开始计数 w = new Worker("webworker.js");//创建一个Worker对象,利用Worker的构造函数 } //onmessage是Worker对象的properties w.onmessage = function(event){//事件处理函数,用来处理后端的web worker传递过来的消息 document.getElementById("result").innerHTML=event.data; }; }else{ document.getElementById("result").innerHTML="sorry,your browser does not support web workers"; } } function endWorker(){ w.terminate();//利用Worker对象的terminated方法,终止 w=undefined; } </script> <p>在后台运行的web worker js文件,webworker.js 才能实现效果<br> var i = 0; <br> function timeCount(){ <br> i = i + 1; <br> postMessage(i);//postMessage是Worker对象的方法，用于向html页面回传一段消息 <br> setTimeout("timeCount()",500);//定时任务 <br> } <br> timeCount();//加1计数,每500毫秒调用一次</p> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492834 joue