HTML5에 관해서 사람들은 항상 그것에 대해 이야기합니다. 참신한 기능과 흥미로운 API가 많이 있습니다. 그러나 많은 아동용 신발은 여전히 의미론적 단계에 머물며 HTML5의 힘을 무시하고 있습니다.
이 섹션에서는 다중 스레드 Web-Worker에 대해 설명합니다.
1. JavaScript가 단일 스레드라는 점을 분명히 하세요.JavaScript 언어의 주요 특징은 단일 스레드라는 것입니다. 즉, 한 번에 한 가지 작업만 수행할 수 있다는 의미입니다.
이상하게 들리는데, 효율성을 높이기 위해 멀티스레딩으로 설계하는 것은 어떨까요? 다음과 같은 시나리오를 가정할 수 있습니다.
JavaScript 동시에 두 개의 스레드가 있다고 가정합니다. 한 스레드는 특정 DOM 노드에 콘텐츠를 추가하고 다른 스레드는 노드를 삭제합니다. 이 경우 브라우저는 어떤 스레드를 사용해야 합니까?
브라우저 스크립팅 언어로서 JavaScript 의 주요 목적은 사용자와 상호 작용하고 DOM 조작하는 것입니다.
이는 단일 스레드만 가능하다는 것을 결정합니다. 그렇지 않으면 매우 복잡한 동기화 문제가 발생합니다. 복잡성을 피하기 위해 JavaScript 탄생부터 단일 스레드를 사용했으며 이는 언어의 핵심 기능이 되었으며 단기간에 변경하기 어려울 것으로 예상됩니다.
단일 스레딩은 항상 멀티 코어 CPU 의 컴퓨팅 성능을 활용하기 위해 HTML5 JavaScript 스크립트가 다중 스레드를 생성할 수 있도록 하는 Web Worker 표준을 제안합니다. 그러나 하위 스레드는 기본 스레드에 의해 완전히 제어되므로 DOM 작동해서는 안 됩니다.
따라서 이 새로운 표준은 JavaScript 의 단일 스레드 특성을 변경하지 않습니다.
Web Workers 는 최신 브라우저에서 제공되는 JavaScript 멀티스레딩 솔루션입니다.
1. Web Worker 사용하여 계산 집약적인 작업을 수행할 수 있습니다.
2. 폴링을 구현하고 특정 상태를 변경할 수 있습니다.
3. 페이지 헤더의 메시지 개수 알림 등 헤더 메시지 상태 업데이트
4. 빈번한 사용자 상호 작용, 맞춤법 검사 등: 사용자 입력 습관, 기록 기록, 캐시 및 기타 정보를 기반으로 사용자가 입력 오류 수정 및 수정 기능을 완료하도록 지원합니다.
5. 암호화: 암호화는 때때로 매우 많은 시간이 소요될 수 있으며, 특히 많은 양의 데이터를 자주 암호화해야 하는 경우(예: 데이터를 서버로 보내기 전에 암호화하는 경우) 더욱 그렇습니다.
6. 데이터 프리페치: 웹사이트 또는 웹 애플리케이션을 최적화하고 데이터 로딩 시간을 개선하기 위해 Workers 사용할 수 있습니다.
필요할 경우를 대비하여 일부 데이터를 미리 로드합니다.
암호화는 DOM 이나 다른 마법에 대한 액세스가 필요하지 않고 순전히 알고리즘을 사용하여 계산을 수행하기 때문에 Web Worker 사용하는 데 좋은 시나리오입니다. 민감한 개인 데이터에 대한 대중의 관심이 높아지면서 정보 보안과 암호화가 최우선 과제가 되었습니다. 이는 최근 발생한 12306 사용자 데이터 유출 사건을 통해 알 수 있습니다.
작업자에서 계산이 수행되면 사용자에게 원활하게 계산이 수행되며 사용자 경험에 영향을 주지 않습니다.
3. 호환성 4. 기본 개념1. 먼저 지원 여부를 판단하는 것을 기억하세요
if(window.Worker) { ...} 2. 새로운 worker 만드는 것은 쉽습니다.
const myWorker = new Worker('worker.js');postMessage() 메서드와 onmessage 이벤트 핸들러는 Workers의 마법입니다.
3. postMessage 메시지를 보내는 데 사용되고 onmessage 메시지를 듣는 데 사용됩니다.
const 작업자 = new Worker('src/worker.js');worker.onmessage = e => { console.log(e.data);};worker.postMessage('잘 지내세요!'); 메인 스레드에서 사용될 때는 onmessage 와 postMessage() worker 객체에 걸려 있어야 하지만, worker 에서 사용될 때는 필요하지 않습니다. 그 이유는 worker 내부에서는 worker 사실상 전역 범위이기 때문입니다.
4.예외 처리:
작업자.onerror = function(error) { console.log(error.message); 오류 발생;}; 5. worker 해고
작업자.종료();
worker 스레드는 작업을 완료하거나 정리할 기회 없이 즉시 종료됩니다.
6. worker 스레드에서 workers 자체 close 메서드를 호출하여 닫을 수도 있습니다.
닫다();5. 빠른 시작
빠르게 이해하기 위해 작은 예를 들어보겠습니다. 프로젝트 구조는 다음과 같습니다.
├── index.html└── src ├── main.js └── 작업자.js
HTML
<html><head> <title>웹 작업 데모</title> <meta charset=UTF-8 /></head><body> <div id=app> 안녕하세요 Jartto! /main.js></script></body></html>
main.js
const 작업자 = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[작업자로부터]: ${message}`) document.getElementById ('app').innerHTML = message;};worker.postMessage('잘 작성되었습니다!');Work.js
onmessage = e => { const message = e.data; console.log(`[From Main]: ${message}`) if(message.indexOf('Good') > -1) { postMessage('감사합니다. 귀하의 지원을 위해 ') }};코드는 매우 간단합니다. 메인 스레드는 "정말 잘 작성되었습니다!"라고 보냅니다.
웹 작업자는 메시지를 받고 콘텐츠에 "좋음"이라는 단어가 포함되어 있음을 발견하고 "지원해 주셔서 감사합니다"라는 메시지를 메인 스레드로 다시 보냈습니다.
6. 제한사항 1. worker 내에서는 DOM 노드를 직접 조작할 수 없으며 window 개체의 기본 메서드 및 속성을 사용할 수 없습니다. 그러나 WebSockets , IndexedDB 및 FireFox OS 관련 Data Store API 같은 데이터 저장 메커니즘을 포함하여 window 개체 아래에서 많은 수의 항목을 사용할 수 있습니다.
다음은 main.js 수정하는 예입니다.
const 작업자 = new Worker('src/worker.js');worker.onmessage = e => { const message = e.data; console.log(`[작업자로부터]: ${message}`) document.getElementById ('app').innerHTML = 메시지;};+ 작업자.onerror = 함수(오류) {+ console.log(오류);+ 작업자.종료();+ };worker.postMessage('잘 작성되었습니다!'); work.js 다시 수정해 봅시다
+ Alert('jartto');onmessage = e => { const message = e.data; console.log(`[메인에서]: ${message}`); if(message.indexOf('good') > - 1) { postMessage('지원해주셔서 감사합니다') }};현재 실행 중은 다음을 보고합니다.
이는 worker.js 가 실행되는 컨텍스트가 기본 페이지의 HTML 실행되는 컨텍스트와 다르기 때문입니다. 최상위 개체는 woker.js 실행을 위한 전역 컨텍스트인 Window 아니라 WorkerGlobalScope 입니다. 자세히 설명해보자.
2. workers 와 메인 스레드 간의 데이터 전송은 다음과 같은 메시지 메커니즘을 통해 수행됩니다. 양 당사자는 postMessage() 메서드를 사용하여 자신의 메시지를 보내고 onmessage 이벤트 핸들러를 사용하여 메시지에 응답합니다(메시지는 Message 이벤트의 data 속성).
이 과정에서 데이터는 공유되지 않고 복사된다.
3. 동일 원산지 제한
Worker 스레드에 할당된 스크립트 파일은 기본 스레드의 스크립트 파일과 동일한 원본을 가져야 합니다.
4. 파일 제한
Worker 스레드는 로컬 파일을 읽을 수 없습니다. 즉, 로컬 파일 시스템 （file://） 을 열 수 없습니다. 로드하는 스크립트는 서버에서 가져와야 합니다.
5. 로컬 파일은 허용되지 않습니다
잡히지 않은 SecurityError: 작업자를 생성하지 못했습니다.
'(경로)/worker.js'에 있는 스크립트
원본 'null'에서는 액세스할 수 없습니다.
Chrome에서는 로컬 파일에서 스크립트를 실행할 때 웹 작업자를 로드할 수 없습니다.
그렇다면 어떻게 해결해야 할까요? 간단하고 사용하기 쉬운 http-server 사용하는 것이 좋습니다.
6. 콘텐츠 보안 정책
worker 작업자를 생성한 document 객체와는 다른 자체 실행 컨텍스트를 갖습니다. 따라서 일반적으로 worker 이를 생성한 document (또는 상위 worker )의 콘텐츠 보안 정책에 의해 제한되지 않습니다.
document 다음 헤더 선언이 있다고 가정하여 예를 들어 보겠습니다.
콘텐츠 보안 정책: script-src 'self'
이 선언의 목적 중 하나는 그 안에 포함된 스크립트 코드가 eval() 메서드를 사용하지 못하도록 금지하는 것입니다. 그러나 스크립트 코드가 worker 생성하는 경우 worker 의 컨텍스트에서 실행되는 코드는 eval() 사용할 수 있습니다.
작업자에 대한 CSP를 지정하려면 작업자 코드 전송 요청 자체에 CSP가 추가되어야 합니다.
한 가지 예외는 worker 스크립트의 소스가 전역적으로 고유한 식별자(예: URL 이 데이터 스키마 또는 blob 지정하는 경우)인 경우 worker 이를 생성한 document 또는 worker CSP 상속한다는 것입니다.
정보는 MDN 에서 문서를 찾을 수 있습니다.
1. self :
WorkerGlobalScope 의 self 속성을 사용하여 객체 자체에 대한 참조를 얻을 수 있습니다.
2. location :
location 속성은 스레드가 생성될 때 해당 스레드와 연결된 WorkerLocation 개체를 반환합니다. 이는 작업자 스레드를 초기화하는 데 사용된 스크립트 리소스의 절대 URL 나타냅니다. 이 URL 리소스 위치는 페이지가 여러 번 리디렉션되더라도 변경되지 않습니다.
3. close :
terminate 와 유사하게 현재 스레드를 닫습니다.
4. caches :
현재 컨텍스트에는 오프라인 가용성을 보장하고 요청에 대한 응답을 사용자 정의할 수 있는 CacheStorage 있습니다.
5. console :
console 구문을 지원합니다.
6. importScripts
importScripts() 메서드를 통해 url 통해 worker 에 라이브러리 함수를 로드할 수 있습니다.
7. XMLHttpRequest
이를 통해 Ajax 요청을 할 수 있습니다.
8. 다음을 사용할 수 있습니다.
사용할 수 있는 API 많기 때문에 여기서는 하나하나 예시를 제시하지 않겠습니다.
worker 실행 중 오류를 발견하면 onerror 이벤트 핸들러가 호출됩니다. ErrorEvent 인터페이스를 확장하는 error 라는 이벤트를 수신합니다. 해당 이벤트는 버블링되지 않으며 취소될 수 있습니다.
기본 작업이 트리거되는 것을 방지하기 위해 작업자는 오류 이벤트의 PreventDefault() 메서드를 호출할 수 있습니다.
우리는 일반적으로 오류 이벤트에 대해 다음 세 가지 주요 정보를 사용합니다.
작업자.onerror = function(error) { console.log(error.message); 오류 발생;};위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.