찾다
웹 프론트엔드H5 튜토리얼HTML5 Web Worker 소개(예제 포함)

HTML5 Web Worker 소개(예제 포함)

Mar 15, 2019 pm 03:10 PM
html5javascript

이 글은 HTML5 Web Worker에 대한 소개(예제 포함)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

브라우저 속 Web Worker

배경 소개

우리 모두는 JavaScript 언어가 단일 스레드에서 실행된다는 것을 알고 있습니다. 이는 동시에 한 가지 작업만 수행할 수 있다는 의미입니다. 이것도 이 언어와 같습니다. 언어는 이와 관련이 많습니다. 동기 실행 방식으로 실행됩니다. 차단이 발생하면 후속 코드는 실행되지 않습니다. HTML5는 웹 작업자 표준을 제안합니다. 즉, JavaScript는 여러 스레드를 허용하지만 하위 스레드는 완전히 호스트의 제어를 받습니다. 하위 스레드는 DOM을 작동할 수 없고 오직 메인 스레드만이 DOM을 작동할 수 있습니다. 따라서 메인 스레드를 메인 스레드로 하는 단일 스레드 실행 원칙이 JavaScript 언어의 핵심이 되었습니다.

프로세스와 스레드의 차이점

근본적인 차이점: 프로세스는 운영 체제에서 자원 할당의 기본 단위인 반면 스레드는 작업 예약 및 실행의 기본 단위입니다.
운영 체제에서는 여러 프로세스(프로그램)가 동시에 실행될 수 있고, 동일한 프로세스(프로그램)에서 여러 스레드가 동시에 실행될 수 있습니다.

호환성

HTML5 Web Worker 소개(예제 포함)

웹 작업자란 무엇인가요?

간단히 말하면 실제로는 Javascript의 단일 스레드 실행을 기반으로 하며, 메인 스레드의 실행에 영향을 주지 않고 프로그램 처리를 위해 하위 스레드를 시작하고 하위 스레드의 실행이 완료되면 메인 스레드로 돌아갑니다. 이 프로세스에서는 메인 스레드의 실행 프로세스에 영향을 미치지 않습니다.

예를 들어보세요

일반적으로 다음 코드를 실행하면 전체 페이지가 정지됩니다. 자바스크립트는 단일 스레드이므로 다음 코드는 후속 실행을 완전히 차단합니다.

while(1){}

방식을 변경하면 이러한 상황이 발생합니다. 이 코드를 실행하기 위해 새 스레드를 시작하고 이를 별도의 Worker.js 파일에 배치한 후 기본 스레드에서 다음 코드를 실행하면 이를 방지할 수 있습니다.

var worker = new Worker("worker.js")

Web Worker 사용

현재 브라우저가 Web Worker를 지원하는지 확인

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传递过来的消息  
        // do something
    };
} 
else { // 浏览器不支持web worker
    // do something
}

API

①새 Worker 생성

var worker = new Worker("worker.js")

②매개변수 전달

worker.postMessage()

3메시지 수신

worker.onMessage = function(msg){}

4예외 처리

worker.onerror = function(err){}

⑤ 워커 종료

아아아아

⑥로드 도구 클래스 함수

worker.terminate()

Worker 범위

새 작업자를 생성하면 코드가 완전히 생성된 새로운 자바스크립트 환경(WorkerGlobalScope)에서 실행됩니다. 작업자 스크립트 격리 후 생성하는 스크립트를 호출할 수 있습니다. 새 워커는 메인 스레드이고, 생성된 새 워커는 하위 스레드라고 합니다.
WorkerGlobalScope는 작업자의 전역 개체이므로 JSON 등 핵심 JavaScript 전역 개체가 소유한 모든 속성을 포함합니다. 창의 일부 속성에는 XMLHttpRequest() 등과 유사한 속성도 있습니다.
하지만 우리가 시작한 새 작업자, 즉 하위 스레드는 페이지의 DOM 작동을 지원하지 않습니다.

스레드 간 통신은 주소 대신 값을 전달하는 것입니다.

메인 스레드와 하위 스레드 간에 데이터를 통신하는 방법은 여러 가지가 있습니다. 통신 내용은 텍스트일 수 있습니다. 이 통신은 복사 관계입니다. 즉, 주소 대신 값이 전달됩니다. 하위 스레드에 의한 통신 내용 수정은 메인 스레드에 영향을 미치지 않습니다. 실제로 브라우저의 내부 작동 메커니즘은 먼저 통신 내용을 직렬화한 다음 직렬화된 문자열을 하위 스레드로 전송하고 하위 스레드가 이를 복원하는 것입니다.

JavaScript의 데이터 유형 저장 원리 및 전송 규칙

HTML5 Web Worker 소개(예제 포함)

공유 스레드(SharedWorker)

공유 스레드는 스레드의 반복적인 생성 및 소멸 과정을 방지하고 시스템 성능 소모를 줄이는 동시에
공유 스레드를 사용할 수 있습니다. 여러 페이지에 대한 스레드 링크가 있습니다.
SharedWorker를 사용하여 공유 스레드를 생성하는 경우 자바스크립트 스크립트 파일의 URL 주소나 Blob도 제공해야 합니다. 스크립트 파일에는 다음과 같이 스레드에서 실행해야 하는 코드가 포함되어 있습니다.

importScripts()

공유 스레드도 사용합니다. 메시지 이벤트를 사용하여 스레드 메시지를 수신하지만 SharedWorker 개체의 포트 속성을 사용하여 다음과 같이 스레드와 통신합니다.

var worker = new SharedWorker("sharedworker.js");

동시에 SharedWorker 개체의 포트 속성을 사용하여 메시지를 보낼 수도 있습니다. 공유 스레드는 다음과 같습니다:

worker.port.postMessage(msg);

运行原理

生命周期

①当一个web worker的文档列表不为空的时候,这个web worker会被称之为许可线程。
②当一个web worker的文档列表中的任何一个对象都是处于完全活动状态的时候,这个web worker会被称之为需要激活线程。
③当一个web worker是许可线程并且拥有计数器或者拥有数据库事务或者拥有网络连接或者它的web worker列表不为空的时候,这个web worker会被称之为受保护的线程。
④当一个web worker是一个非需要激活线程同时又是一个许可线程的时候,这个web worker会被称之为可挂起线程。

以webKit为例加载并执行worker的过程

HTML5 Web Worker 소개(예제 포함)

应用

可以做什么:

1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性

不可以做什么:

1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性

위 내용은 HTML5 Web Worker 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
H5는 무엇을 언급합니까? 맥락 탐색H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLH5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

H5의 기능은 무엇입니까?H5의 기능은 무엇입니까?Apr 07, 2025 am 12:10 AM

H5 또는 HTML5는 HTML의 다섯 번째 버전입니다. 개발자에게 더 강력한 도구 세트를 제공하여 복잡한 웹 애플리케이션을보다 쉽게 ​​만들 수 있습니다. H5의 핵심 기능에는 다음이 포함됩니다. 1) 웹 페이지에 그래픽 및 애니메이션을 그리는 요소; 2) 웹 페이지 구조를 SEO 최적화에 명확하고 도움이되는 시맨틱 태그 등; 3) GeolocationApi 지원 위치 기반 서비스와 같은 새로운 API; 4) 호환성 테스트 및 폴리 필 라이브러리를 통해 크로스 브라우저 호환성을 보장해야합니다.

H5 링크를 수행하는 방법H5 링크를 수행하는 방법Apr 06, 2025 pm 12:39 PM

H5 링크를 만드는 방법? 링크 대상 결정 : H5 페이지 또는 응용 프로그램의 URL을 가져옵니다. HTML 앵커 작성 : & lt; a & gt; 태그 앵커를 만들고 링크 대상 URL을 지정합니다. 링크 속성 설정 (선택 사항) : 필요에 따라 대상, 제목 및 on 클릭 속성을 설정하십시오. 웹 페이지에 추가 : 링크가 나타나려는 웹 페이지에 HTML 앵커 코드를 추가하십시오.

H5 호환성 문제를 해결하는 방법H5 호환성 문제를 해결하는 방법Apr 06, 2025 pm 12:36 PM

H5 호환성 문제에 대한 솔루션에는 다음이 포함됩니다. 웹 페이지가 화면 크기에 따라 레이아웃을 조정할 수있는 반응 형 디자인을 사용합니다. 릴리스 전에 호환성을 테스트하기 위해 브라우저 크로스 브라우저 테스트 도구를 사용하십시오. PolyFill을 사용하여 이전 브라우저의 새로운 API를 지원합니다. 웹 표준을 따르고 효과적인 코드 및 모범 사례를 사용하십시오. CSS 프리 프로세서를 사용하여 CSS 코드를 단순화하고 가독성을 향상시킵니다. 이미지를 최적화하고 웹 페이지 크기를 줄이며로드 속도를 높이십시오. HTTPS를 통해 웹 사이트의 보안을 보장하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음