의견 : 웹 워커는 웹 애플리케이션에서 백엔드 처리를 구현하기 위해 HTML5에 추가 된 새로운 기술입니다.
웹 워커는 웹 애플리케이션에서 백그라운드 처리를 구현하기 위해 HTML5에 추가 된 새로운 기술입니다.
HTML4에서 JS가 만든 프로그램은 모두 단일 스레드입니다. 시간이 오래 걸리면 웹 인터페이스가 오랫동안 응답하지 않습니다. 최악의 경우 스크립트 프롬프트 상자가 나타납니다.
그것은 스크립트가 계속 될지 여부에 관계없이 너무 오랫동안 실행된다는 것을 촉구합니다. . . . 그래서이 기사의 주인공이 소개됩니다 : 웹 워커 API
이 API 사용자를 사용하면 백그라운드에서 실행되는 스레드를 쉽게 만들 수 있으며 백그라운드 프로그램을 만드는 것은 매우 간단합니다.
var 노동자 = 신입 사원 ( '*. js');
참고 : 배경 스레드는 페이지 나 창 객체에 액세스 할 수 없습니다.
메시지를 보내고 메시지를 수신하여 배경 스레드로 데이터를 전달할 수 있습니다.
worker.onmessage = function (e) {};
worker.postmessage = function (e) {};
Summing에 대해 이야기합시다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<제목> </title>
<script type = "text/javaScript">
함수 계산 () {
var num = 100000000000;
var r = 0;
for (var i = 1; i <num; i ++) {
r += i;
}
경고 (R);
}
믿다();
</스크립트>
</head>
<body>
</body>
</html>
그래서 내 아름다운 프레임이 주어졌습니다. . . 그러나 웹 작업자를 사용하면 다음과 같습니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<제목> </title>
<script type = "text/javaScript">
var 노동자 = 신규 노동자 ( 'C.JS');
worker.onmessage = function (e) {
경고 ( '및 :' + e.Data);
};
함수 계산 () {
var num = 10000000;
Worker.postmessage (num);
}
믿다();
</스크립트>
</head>
<body>
</body>
</html>
onmessage = function (e) {
var num = e.Data;
var r = 0;
for (var i = 1; i <num; i ++) {
r += i;
}
사후 관리 (r);
}
때로는 할 일이 없다면 왜 그렇게 많은 수를 계산합니까? . . . . 물론 이것은 지루한 속임수이지만, 이것을 요구할 수있는 시나리오가 있다고 생각합니다.
이전에 파일 API를 배울 때 로컬 파일을 읽는 작업이있었습니다. 파일이 너무 커지면 매우 느립니다. 이것이 적용될 수 있는지 궁금합니다. 두 번째 연구 중에 시도해야합니다.
스레드와 데이터를 상호 작용합니다
여기서 함수를 완성하고 전경에 배열을 무작위로 생성 한 다음 계산이 3 중 3 개 중 3 개가 될 수있는 경우 전경으로 돌아가서 백그라운드에서 인쇄합니다.
주요 프로그램
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<제목> </title>
<스타일>
기간
{
패딩 : 10px;
}
</스타일>
<script src = "../ jquery-1.7.1.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
$ (document) .ready (function () {
var 노동자 = 신규 노동자 ( 't1.js');
Worker.postMessage ( '');
worker.onmessage = function (e) {
var arr = e.data.split ( ';');
for (var i = 0, len = arr.length; i <len; i ++) {
var dom = $ ( '<span>' + arr [i] + '</span>');
$ ( '#body'). Append (dom);
}
}
});
</스크립트>
</head>
<body>
<div>
</div>
</body>
</html>
배열을 생성하는 프로그램
onmessage = function (e) {
var arr = [];
for (var i = 0; i <100; i ++) {
arr.push (parseint (math.random () * 100));
}
var 노동자 = 신입 사원 ( 't2.js');
worker.postmessage (json.stringify (arr));
worker.onmessage = function (e) {
// 선택 결과를 프론트 데스크로 다시 보냅니다
사후 관리 (e.Data);
};
}
배열의 모든 데이터가 3으로 나뉘든지 결정
onmessage = function (e) {
var arr = json.parse (e.data);
var str = '';
for (var i = 0, len = arr.length; i <len; i ++) {
if (parseint (arr [i]) % 3 == 0) {
if (str! = '') str += ';';
str += arr [i];
}
}
사후 관리 (str);
닫다();
};
프로그램 논리 설명 :
스레드 중첩이 여기에 사용됩니다
먼저, 어린이 스레드 T1이 초기화되어 100 배열을 초기화하기 위해 전경 프로그램을 실행하십시오.
그런 다음 Child Thread T1은 자식 스레드 T2를 초기화하고 (배열을 가로 지르고, 3으로 나눌 수있는 숫자를 꺼내고, 문자열을 형성하는 데 사용) T1은 배열 데이터를 T2로 전달합니다.
T2는 T1 데이터를 수신하고 계산 후 문자열을 T1, T1로 전송하면 프론트 데스크가 자체 논리를 실행합니다.
프로세스 종료
결론
간단히 말해서, 나는 여기에서 어린이 스레드를 선언 한 다음 자식 사후 메신저에게 데이터를 보내고 결과를 기다리고 있습니다.
마지막 커뮤니케이션 API 웹 소켓과 결합하여 두 개를 웹 채팅 프로그램으로 결합 할 수 있으며 일부 로컬 스토리지/로컬 데이터베이스를 사용할 수 있습니다.
이것은 좋은 일이 될 수 있습니다.