웹 워커의 사용 사례는 무엇입니까? [닫은]

174

Web Workers API 사용에 대한 실제 시나리오를 찾고 있습니다.

javascript html web-worker

— 세르게이 일 린스키
소스

모바일 / 웹킷 플랫폼에서 지원됩니까?

— dmp

확실하지는 않지만 그들이 추측 할 것입니다.

— Sergey Ilinsky

@danp 브라우저 지원 : caniuse.com/webworkers

— Dheeraj Vepakomma

그럼, 우리가 처음 웹 근로자를 사용하는 경우를 쓴 우리가 그것없이 더 잘했다 결정 - windward.net/blogs/web-workers-abandon/#.Vl3QdXarQ-U

— 데이비드 티 엘렌

답변:

143

jQuery fame의 John Resig 는 게임, 그래픽, 암호화와 같은 웹 워커를 사용하는 흥미로운 예를 많이 가지고 있습니다 .
다른 용도로는 웹 I / O가 있습니다. 즉, 백그라운드에서 URL을 폴링합니다. 이렇게하면 폴링 결과를 기다리는 UI를 차단하지 않습니다.
또 다른 실용적인 용도 : Bespin에서는 웹 작업자를 사용하여 구문 강조를 수행 하고 있습니다.이 기능은 앱을 사용하는 동안 코드 편집을 차단하고 싶지 않습니다 .
에서 모질라 : 한 가지 방법 노동자 유용이 코드는 사용자 인터페이스 스레드를 차단하지 않고 프로세서 집약적 인 계산을 수행 할 수 있도록한다.

실용적인 예로, #s의 큰 테이블이있는 앱을 생각해보십시오 (2 년 전 제가 프로그래밍 한 앱에서 가져온 BTW는 현실 세계입니다). 입력 필드를 통해 테이블에서 하나의 #을 변경할 수 있으며 다른 열의 다른 숫자는 상당히 집중적 인 프로세스로 다시 계산됩니다.

이전 워크 플로우는 다음과 같습니다. #를 변경하십시오. 자바 스크립트가 다른 숫자로 변경되어 바삭 거리는 동안 커피를 마시고 웹 페이지는 3 분 동안 응답하지 않습니다. 커피와 함께 돌아 오십시오. 두 번째 #을 변경하십시오. 여러 번 반복하십시오. 저장 버튼을 클릭하십시오.

작업자와의 새로운 워크 플로는 다음과 같습니다. # 변경. 무언가 재 계산되고 있지만 다른 #을 변경할 수 있다는 상태 메시지를받습니다. 더 많은 #을 변경하십시오. 변경이 완료되면 상태가 "모든 계산이 완료되었습니다. 이제 최종 #을 검토하고 저장할 수 있습니다"로 변경 될 때까지 기다리십시오.

— DVK
소스

훌륭한 링크! 나는 노동자들에 대해 들어 본 적이 없다. (오래 뜨거운 뜨거운 샤워를 갈 시간 ...)

— Peter Rowell

나는 이것이 2 살짜리 대답이라는 것을 알고 있지만 2 번 항목 (폴링 URL)에 웹 워커가 필요하지 않다는 것을 언급하고 싶었습니다. XHR은 비동기 적으로 발생하며 차단되지 않습니다. 별도의 스레드에서 XHR 요청을 실행할 필요가 없습니다. (물론, 최신 앱에서는 폴링 대신 WebSockets를 사용하고 싶을 것입니다.)

— josh3736

@ josh3736-당신은 정확하지만 지금은 많은 병렬 XHR aync 요청을 수행하는 것이 어떻게 든 브라우저를 불행하게 만들 수 있는지 궁금합니다. 또한 작업자가 유용 할 수있는 XHR 응답을 처리하려면 로컬 리소스가 필요합니다.

— DVK

모든 병렬 요청이 동일한 서버에 대한 경우 2-9 개의 동시 연결 사이에 호스트 이름 당 한계에 도달 합니다. ( 메인 스레드에서 시작하든 작업자에서 시작하든 관계없이 모든 연결에 제한이 적용되는 것으로 가정합니다 .) 물론 동시에 10 개의 동시 요청이 실행중인 경우 응용 프로그램의 디자인을 다시 생각해야합니다.

— josh3736

간단한 질문을 용서하지만 위의 예에서 "#"은 무엇입니까?

— shrewdbeans 2012 년

브라우저에서 서버로 더 많은 양의 데이터를 보내는 데 사용했습니다. 분명히 일반적인 AJAX 호출을 사용하여이 작업을 수행 할 수 있지만 이것이 호스트 이름 당 중요한 연결 중 하나를 차지하는 경우입니다. 또한이 과정에서 사용자가 페이지 전환을 수행하면 (예 : 링크 클릭) 이전 페이지의 JavaScript 객체가 사라지고 콜백을 처리 할 수 없습니다. 웹 워커를 사용하는 경우이 활동이 대역 외에서 발생하므로 완료 될 것이라는 보장이 더 낫습니다.

— 케빈 하칸 슨
소스

그러나 웹 워커와 메시지를 교환해야합니다. 이 작업의 비용이 이익이 될 때?

— Danielo515

다른 사용 사례 :

압축 형식으로 서버에서 교환 된 이미지 및 기타 미디어 파일이 많은 경우 백그라운드에서 파일 압축 / 압축 해제

— sbr
소스

이것은 JavaScript에서 일어나지 않아야합니다. 이미지 데이터를 효율적으로 압축하도록 설계된 알고리즘을 사용하여 이미지가 이미 압축되어 있습니다 (PNG, JPEG). 다른 압축 레이어를 맨 위에 던지면 실제로 데이터 크기 가 커질 수 있습니다 . 다른 유형의 데이터 (예 : 큰 JSON 파일)의 경우 표준 HTTP gzipping을 사용하여 브라우저에서 압축을 처리해야합니다. 자바 스크립트에서 압축을하고 있다면 아마 잘못하고있을 것 입니다.

— josh3736

일부 사용자가 유스 케이스를 실격시키는 것을 보았지만 여기에 내가 말하려는 것이 있습니다. 이미지, 음악 파일, 데이터, 엑셀 시트 등을 모두 하나의 파일에 포함시킬 수있는 강력한 문서 편집기와 같은 MS 단어와 같은 응용 프로그램을 고려하십시오. 웹 기반 클라이언트와 데스크톱 클라이언트 및 IOS / Android 클라이언트가 있다고 가정하십시오. 이런 종류의 유스 케이스의 경우 모든 파일 컨텐츠를 zip 파일에 저장 한 다음 각 클라이언트에서 압축을 풀 수 있습니다.

— sbr

Instapaper 책갈피는 서버로 보내기 전에 저장중인 페이지를 압축합니다. 시간과 대역폭을 절약합니다.

— stevendaniels

@ josh3736 브라우저가 할 수있는 유일한 일은 웹 서버 (또는 브라우저 캐시)에서 파일을 gunzip하는 것입니다. 로컬 스토리지나 웹 소켓에서 데이터를 압축 해제 할 수 없으며 전혀 압축 할 수 없습니다. 웹 앱은 점점 더 많은 양의 데이터를 업스트림으로 전송하고 있으며이를 압축하면 매우 유용합니다. 이 글이 게시 된 1 년 전과 똑같이 유효합니다. JavaScript 압축에 대한 유효한 사용 사례를 생각할 수 없다면 상상력이 부족할 것입니다.

— Adria

@Adria : websocket 표준은 압축 지원 을 추가하는 중 입니다. 브라우저에서 생성 된 이미지를 처리하는 경우 ( <canvas>) 이미지 데이터를 압축 형식 (예 : png)으로 가져올 수 있습니다. 내 요점은 JS로 압축 하는 것이 결코 적절 하지 않다는 것이 아니었다 . 필자의 요점은 대부분의 경우 그렇지 않으며 대부분의 경우 , 특히이 답변에 대해 이야기하는 이미지를 다루는 경우 자체 압축을 롤링하는 더 나은 대안이 있다는 것입니다.

— josh3736