HTML5 Web Workers 웹사이트는 multi-threading_html5 튜토리얼 기술로도 구현할 수 있습니다.

Web Workers는 HTML5의 새로운 기능으로 웹 애플리케이션에서 백그라운드 처리를 구현하는 데 사용되는 기술입니다

HTML4에서 js로 만든 프로그램은 모두 단일 스레드입니다. 시간이 오래 걸리면 최악의 경우 스크립트 프롬프트 상자가 팝업됩니다.

스크립트를 실행하는 데 시간이 너무 오래 걸린다는 메시지가 표시됩니다. 계속하시겠습니까? . . . 이 기사의 주인공은 Web Workers API

입니다.

이 API를 사용하면 사용자는 백그라운드에서 실행되는 스레드를 쉽게 생성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var Worker = new Worker('*.js');
참고: 백그라운드 스레드는 페이지 또는 창 개체에 액세스할 수 없습니다
메시지로 전송하고 메시지를 수신하고 백그라운드 스레드를 통해 데이터를 전달할 수 있습니다.
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};

말해 주세요 그리고:

코드 복사

코드는 다음과 같습니다.

<제목>< ;/title>


< ;body>

그래서 예쁜 액자가 나왔어요. . . 그러나 웹 작업자를 사용하면 다음과 같은 작업이 수행되지 않습니다.

코드 복사

코드는 다음과 같습니다.

< ;!DOCTYPE html>


<제목>

코드 복사

코드는 다음과 같습니다.

onmessage = function(e) {
var num = e.data ;
var r = 0;
for (var i = 1; i r = i;
}
postMessage(r );
}

가끔 할 일도 없는데 왜 이렇게 큰 숫자를 계산하는 걸까? . . . . 물론 지루한 기믹이지만, 필요할 수도 있는 시나리오가 있다고 생각했어요.

저번에 파일 api를 배울 때 로컬 파일을 읽는 동작이 있었는데, 파일이 너무 크면 엄청 느려지겠죠? 두 번째로 학습할 때 시도해 볼 필요가 있습니다.

스레드와 데이터 상호작용

여기서 함수를 완성하고 포그라운드에서 무작위로 배열을 생성한 다음 백그라운드에서 3개로 나눌 수 있고 인쇄를 위해 포그라운드로 돌아갈 수 있음을 계산합니다.

코드 복사

코드는 다음과 같습니다.

主程序



<제목>

< script src="../jquery-1.7.1.js" type="text/javascript">

复代代码

代码如下:

生成数组的程序
onmessage = function (e) {
var arr = [];
for (var i = 0; i < 100; i ) {
arr.push(parseInt(Math.random() * 100));
}

var Worker = new Worker( 't2.js');
작업자.postMessage(JSON.stringify(arr));
작업자.onmessage = 함수 (e) {
//把挑选结果发回前台
postMessage( e.data);
};
}

复代码

代码如下:

判断数组所有数据是否被3整除
onmessage = function (e) {
var arr = JSON.parse(e.data);
var str = '';
for (var i = 0, len = arr.length; i if (parseInt(arr[i]) % 3 == 0) {
if (str != '') str = ';';
str = arr[i];
}
}
postMessage(str);
close();

};

程序逻辑描述：

这里用了个线程嵌套

首先执行前台程序，这里初始化了一个子线程“t1”사용于将100个数组初始化

然后子线程t1又初始化了子线程t2(用于遍历数组，取take能被3整除的数字，组成字符串)，t1将数组数据传给t2

t2 接收t1数据，计算后将将字符串转给t1，t1转给前台，前台执行自己的逻辑

유류程结束

结语

简单来说,我这里就是声明子线程,然后发送数据给,子线postMessage,然后等待结果皆可。

这个样子는 불합리한 상황입니다.