Javascript실행 메커니즘
HTML5 이전에는 브라우저의 JavaScript가 단일 스레드 방식으로 작동했지만 멀티 스레딩 시뮬레이션을 구현하는 방법은 여러 가지가 있습니다(예: Javascript에서는 setinterval 메소드, setTimeout 메소드 등)을 사용하지만 본질적으로 프로그램 실행은 여전히 JavaScript 엔진에 의해 단일 스레드 방식으로 수행됩니다. . HTML5에 도입된 작업자 스레드를 사용하면 브라우저 측 Javascript 엔진이 Javascript 코드를 동시에 실행할 수 있으므로 브라우저 측 다중 스레드 프로그래밍을 효과적으로 지원할 수 있습니다. - WebWorker
HTML5의 Web Worker는 두 가지 스레드 유형으로 나눌 수 있습니다. 하나는 전용 스레드 Dedicated Worker이고 다른 하나는 공유 스레드입니다. 각 스레드 유형은 서로 다른 목적을 가지고 있습니다. >전문 웹 워커
전용 워커는 자신이 만든 스크립트에 연결되어 다른 워커나 브라우저 구성 요소와 통신할 수 있지만
DOM . 전용은 이 스레드가 IE를 제외한 다양한 주류 브라우저에서 한 번에 하나의 요구 사항만 처리한다는 것을 의미합니다. 스레드 생성
작업자 생성은 매우 간단합니다. 스레드에서 실행되어야 하는 JavaScript 파일의 이름을
생성자
스레드 통신
에 지정합니다. 자식 스레드에서는 객체 의 postMessage 및 onmessage 메서드가 사용됩니다. 누가 누구에게 데이터를 보내는가? 송신자는 postMessage 메서드를 사용하고, 수신자는 PostMessage 메서드를 사용하여 데이터를 받습니다. , 이는 전송된 데이터이며 onmessage에도 하나의 매개변수만 있습니다. 이벤트인 경우 .data가 수신된 데이터를 가져옵니다.
JSON
data
JSON은 JS에서 기본적으로 지원하는 것입니다. 복잡한 데이터에 JSON을 사용할 필요는 없습니다. 예:
postMessage({'cmd': 'init', 'timestamp': Date.now()});로그인 후 복사
오류 처리
스레드에서 오류가 발생하면 해당 onerror 이벤트 콜백이 호출됩니다. 따라서 오류를 처리하는 방법은 매우 간단합니다. 즉, 스레드 인스턴스의 onerror 이벤트를 연결하는 것입니다. 이 콜백 함수에는 3개의 필드가 있는 error 매개변수가 있습니다. message - 오류 메시지, filename - 오류가 발생한 스크립트 파일 lineno - 오류가 발생한 줄.
스레드 소멸
스레드 내부에서는 close 메소드를 사용하여 자기 자신을 소멸시킵니다. 스레드 외부의 메인 스레드에서는 스레드 인스턴스의 종료 메소드를 사용하여 스레드를 소멸시킵니다.
HTML 코드:
<script type="text/javascript">
onload
= function(){
var worker =
new
Worker('fibonacci.js');
worker.onmessage = function(event) {
console.log("Result:" + event.data);
};
worker.onerror = function(error) {
console.log("Error:" + error.message);
};
worker.postMessage(40);
}
</script>로그인 후 복사
//fibonacci.js
var fibonacci = function(n) {
return
n < 2 ? n : arguments.c
all
ee(n - 1) + arguments.callee(n - 2);
};
onmessage = function(event) {
var n = parseInt(event.data, 10);
postMessage(fibonacci(n));
};로그인 후 복사
동일한 디렉터리에 넣고 페이지 파일을 실행하고 콘솔을 보면 실행 결과를 볼 수 있습니다. 여기서 또 다른 점이 있습니다. 메인 스레드에서 onmessage 이벤트를 다른 방식으로 연결할 수 있습니다.
worker.addEvent
List
ener('message', function(event) {
console.log("Result:" + event.data);
}, false);로그인 후 복사
다른 스크립트 파일 사용
작업자 스레드는 전역 메서드 importScripts를 사용하여 다른 도메인 스크립트 파일이나
클래스 라이브러리
를 로드하고 사용할 수 있습니다. 예를 들어 합법적인 사용 방법은 다음과 같습니다.
importScripts();
importScripts('foo.js');
importScripts('foo.js', 'bar.js');
로그인 후 복사
가져온 후 해당 파일에 있는 방법을 직접 사용할 수 있습니다. 인터넷에 있는 작은 예를 보세요:
mportScripts('math_utilities.js');
onmessage = function (event)
{
var first = event.data.first;
var second = event.data.second;
calculate(first,second);
};
function calculate(first,second) {
//do the calculation work
var common_divisor=divisor(first,second);
var common_multiple=multiple(first,second);
postMessage("Work done! " +
"The least common multiple is " + common_divisor +
" and the greatest common divisor is "+common_multiple);
}로그인 후 복사
인터넷의 일부 네티즌들은 리소스 사전 로드 문제를 해결하기 위해 여기서 importScripts 메서드를 사용하는 것을 고려했습니다(브라우저는 리소스를 구문 분석하고 실행하지 않고 리소스를 미리 로드합니다). ) 이유도 매우 간단합니다.
스레드 중첩 작업자 스레드에서 하위 스레드를 생성할 수도 있으며 다양한 작업은 여전히 동일합니다.
동기화 문제
작업자에는 잠금 메커니즘이 없으며 멀티 스레드 동기화 문제는 코드(예: 신호
변수
정의 등)를 통해서만 해결할 수 있습니다. . 共享型SharedWebWorker
共享型web worker主要适用于多连接并发的问题。因为要处理多连接，所以它的API与专用型worker稍微有点区别。除了这一点，共享型web worker和专用型worker一样，不能访问DOM，并且对窗体属性的访问也受到限制。共享型web worker也不能跨越通信。
页面脚本可以与共享型web worker通信，然而，与专用型web worker(使用了一个隐式的端口通信)稍微有点不同的是，通信是显式的通过使用一个端口(port)对象并附加上一个消息事件处理程序来进行的。
在收到web worker脚本的首个消息之后，共享型web worker把一个事件处理程序附加到激活的端口上。一般情况下，处理程序会运行自己的postMessage()方法来把一个消息返回给调用代码，接着端口的start()方法生成一个有效的消息进程。
看网上能找到的的唯一个例子：创建一个共享线程用于接收从不同连接发送过来的指令，然后实现自己的指令处理逻辑，指令处理完成后将结果返回到各个不同的连接用户。
HTML代码：
<script>
var worker = new SharedWorker('sharedworker.js');
var log = document.getElementByIdx_x_x_x_x('response_from_worker');
worker.port.addEventListener('message', function(e) {
//log the response data in web page
log.textContent =e.data;
}, false);
worker.port.start();
worker.port.postMessage('ping from user web page..');
//following method will send user input to sharedworker
function postMessageToSharedWorker(input)
{
//define a json object to construct the request
var instructions={instruction:input.value};
worker.port.postMessage(instructions);
}
</script>로그인 후 복사
脚本文件代码：
// 创建一个共享线程用于接收从不同连接发送过来的指令，指令处理完成后将结果返回到各个不同的连接用户。
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number+ 1;
//get the first port here
var port = e.ports[0];
port.postMessage('A new connection! The
current
connection number is '
+ connect_number);
port.onmessage = function(e) {
//get instructions from requester
var instruction=e.data.instruction;
var results=execute_instruction(instruction);
port.postMessage('Request: '+instruction+' Response '+results
+' from shared worker...');
};
};
function execute_instruction(instruction)
{
var result_value;
//implement your logic here
//execute the instruction...
return result_value；
}로그인 후 복사
在上面的共享线程例子中，在主页面即各个用户连接页面构造出一个共享线程对象，然后定义了一个方法 postMessageToSharedWorker 向共享线程发送来之用户的指令。同时，在共享线程的实现代码片段中定义 connect_number 用来记录连接到这个共享线程的总数。之后，用 onconnect 事件处理器接受来自不同用户的连接，解析它们传递过来的指令。最后，定义一个了方法 execute_instruction 用于执行用户的指令，指令执行完成后将结果返回给各个用户。
这里我们并没有跟前面的例子一样使用到了工作线程的 onmessage 事件处理器，而是使用了另外一种方式 addEventListener。实际上，前面已经说过，这两种的实现原理基本一致，只是在这里有些稍微的差别，如果使用到了 addEventListener 来接受来自共享线程的消息，那么就要先使用 worker.port.start() 方法来启动这个端口。之后就可以像工作线程的使用方式一样正常的接收和发送消息。
线程中能做的事：
1.能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数。
2.能使用navigator对象。
3.能使用XMLHttpRequest来发送请求。
4.可以在线程中使用Web Storage。
5.线程中可以用self获取本线程的作用域。
线程中不能做的事：
1.线程中是不能使用除navigator外的DOM/BOM对象，例如window,document（想要操作的话只能发送消息给worker创建者，通过回调函数操作）。
2.线程中不能使用主线程中的变量和函数。
3.线程中不能使用有"挂起"效果的操作命令，例如alert等。
4.线程中不能跨域加载JS。
线程也是需要消耗资源的，而且使用线程也会带来一定的复杂性，所以如果没有充足的理由来使用额外的线程的话，那么就不要用它。
위 내용은 HTML5의 Javascript 멀티스레딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
