JavaScript에는 사이트의 전체 사용자 인터페이스를 향상시키는 여러 가지 접근 방식이 있습니다. 그만큼 “웹 작업자” 메인 스레드가 차단되지 않고 계속 실행될 수 있도록 하는 접근 방식 중 하나입니다. 이는 별도의 JavaScript 엔진 인스턴스로 구성되므로 기본 스레드의 기능을 호출할 수 없습니다.
이 기사에서는 활용 방법에 대해 설명합니다. “웹 작업자” JavaScript의 멀티스레딩을 위한 것입니다.
웹 작업자란 무엇입니까?
“웹 작업자” JavaScript가 별도의/전용 스레드에서 병렬/동시에 작업을 실행할 수 있도록 하는 브라우저 API에 해당합니다.
웹 작업자의 필요성은 무엇입니까?
따라서 JavaScript는 단일 스레드이므로 복잡한 JavaScript 코드는 UI 스레드를 차단합니다. 즉, 새로 고침, 사용자 입력 이벤트 구현 등의 모든 작업을 처리하는 기본 창을 중지합니다. 이러한 시나리오에서는 사용자 경험이 영향을 받습니다. . 이 문제에 대처하기 위해, “웹 작업자” 적용되어 UI 스레드 차단을 해결합니다.
JavaScript로 멀티스레딩을 위해 웹 작업자를 사용하는 방법은 무엇입니까?
만들기 위해 “웹 작업자” , 작업자 생성자를 활용합니다. 이는 원하는 기능을 구현하는 작업자 스크립트 파일의 경로에 해당하는 URL을 인수로 사용하는 것과 같습니다. 그러나 작업자 코드를 HTML 파일로 구성하려면 '얼룩' 작업자 코드를 작성합니다.
구문(웹 워커 생성)
const 엑스 = 새로운 노동자 ( 'worker.js' ) ;구문(Worker에게 메시지 보내기)
const 엑스 = 새로운 노동자 ( 'worker.js' ) ;
Syntax(Worker로부터 메시지 받기)
엑스. 온메시지 = 기능 ( 이벤트 ) {콘솔. 통나무 ( 이벤트. 데이터 ) ;
} ;
예: JavaScript에서 숫자의 계승을 계산하기 위해 'Web Worker' 활용
다음 예에서는 '노동자()' 웹 작업자를 생성하고 숫자의 계승을 계산하는 생성자:
< HTML >
< 머리 >
< h2 스타일 = '텍스트 정렬: 가운데;' > 웹 작업자 예 h2 >
머리 >
< 몸 >
< 스크립트 >
const 엑스 = 새로운 노동자 ( URL. createObjectURL ( 새로운 얼룩 ( [
`
// 작업자 스크립트
const 사실 = ( N ) => {
만약에 ( N == 0 || N == 1 ) {
반품 1n ;
}
또 다른 {
반품 BigInt ( N ) * 사실 ( BigInt ( N ) - 1n ) ;
}
} ;
본인. 온메시지 = ( 이벤트 ) => {
const 와 함께 = 사실 ( 이벤트. 데이터 ) ;
본인. 포스트메시지 ( 와 함께. toString ( ) ) ;
} ; `
] , { 유형 : '텍스트/자바스크립트' } ) ) ) ;
엑스. 포스트메시지 ( 15일 ) ;
엑스. 온메시지 = ( 이벤트 ) => {
const 밖으로 = 이벤트. 데이터 ;
콘솔. 통나무 ( '웹 워커를 통한 15의 팩토리얼->' , 밖으로 ) ;
} ;
몸 >
HTML >
이 코드에서는 다음 단계를 적용합니다.
- 먼저, 명시된 제목을 지정합니다.
- 그 후에는 “웹 작업자” 작업자의 코드를 구성하는 Blob 객체의 URL을 갖는 객체입니다.
- 작업자 전용 코드는 재귀 함수를 통해 숫자의 계승을 계산하는 익명 함수에 포함되어 있습니다.
- 또한 작업자는 다음을 활용하여 메인 스레드를 통해 전송된 메시지를 수신합니다. 'self.on메시지' 이벤트를 통해 전달된 숫자의 계승을 검색하고 결과를 메인 스레드에 제공합니다. '포스트메시지()' 방법.
- 메인 스레드에서 작업자 인스턴스를 생성하고 '라는 숫자가 포함된 메시지를 보냅니다. 15일 '. 여기, ' N ”는 “BigInt” 값을 나타냅니다.
- 작업자는 계승 계산을 마친 후 다음을 활용하여 결과/결과를 메인 스레드로 다시 보냅니다. '포스트메시지()' 방법.
- 마지막으로 메인 스레드는 결과를 가져오거나 받습니다. '메시지에' 이벤트를 처리하고 해당 숫자의 계승을 콘솔에 반환합니다.
산출
웹 작업자의 장점
병렬 처리 : 동일한 코드를 병렬로 실행하는 경우입니다.
코드 실행 중단 없음: 코드 실행은 현재 페이지의 새로 고침 등에 관계없이 수행됩니다.
움직임 추적: 모든 동작 감지는 백그라운드 작업자에서 수행됩니다.
멀티스레딩 활성화: 이를 통해 JavaScript에서 멀티스레딩이 가능해집니다.
향상된 성능: 별도의 스레드에서 집중적이고 어려운 작업을 수행하여 성능을 최적화합니다.
효과적인 사용자 경험: 이는 메인 스레드를 차단하는 것을 방지하여 응답성이 뛰어난 사용자 경험을 제공합니다.
웹 작업자의 한계
그러나 웹 워커에도 몇 가지 제한 사항이 있습니다. 이는 다음과 같이 명시됩니다.
- 메모리 활용도가 높아집니다.
- 작업자 스레드에서 DOM을 업데이트하거나 창 개체를 호출할 수 없습니다.
결론
“웹 작업자” JavaScript가 별도/전용 스레드에서 동시에 작업을 실행할 수 있도록 하는 브라우저 API에 해당합니다. 이는 작업자 스크립트 파일의 경로에 해당하는 URL을 인수로 사용하여 활용할 수 있습니다. 이 블로그에서는 JavaScript의 멀티스레딩을 위한 'Web Workers'의 사용법에 대해 논의했습니다.