자바 스크립트에서 공유 메모리 소개

공유 메모리 는 자바 스크립트의 고급 기능으로 스레드 (동시에 실행되는 프로세스의 일부)가 활용할 수 있습니다. 기억 수단 공유하기 스레드간에 업데이트 된 데이터를 전달하는 데 문제가 없다. 모든 스레드는 공유 메모리의 동일한 데이터를 액세스하고 업데이트 할 수 있습니다.

사랑스럽지 않니? 음, 거의. 이 게시물에서 우리는 JavaScript에서 공유 메모리를 사용하는 방법 이것이 당신이 정말로하고 싶은 것인지 결정하는 방법.

공유 메모리의 장점과 단점

우리는 사용 웹 노동자 에 자바 스크립트에서 쓰레드 생성하기. Web Workers API를 사용하면 다음 작업에 사용할 수있는 작업자 스레드를 만들 수 있습니다. 백그라운드에서 코드를 실행한다. 따라서 메인 스레드는 자유롭게 실행을 계속할 수 있으며 UI 이벤트를 처리 할 수 있으므로 UI가 고정되지 않습니다..

작업자 스레드 주 스레드 및 다른 스레드와 동시에 실행. 이러한 작업의 여러 부분을 동시에 실행하면 시간을 절약 할 수 있습니다. 당신은 더 빨리 끝내지 만 그것 자체의 문제들도 가지고 있습니다..

각 스레드가 필요한 자원을 얻고시기 적절하게 서로 통신합니다. 재난이 놀라운 결과를 가져올 수있는 작업 자체입니다. 또는, 한 스레드가 데이터를 변경하고 다른 스레드가 데이터를 읽는 중입니다. 동시에, 다른 스레드가 무엇을 볼 것이라고 생각합니까? 업데이트 된 데이터 또는 이전 데이터?

그러나 웹 작업자는 너무 망설이지 않습니다. 메시지를 사용하여 통신하는 동안 서로 보낸 데이터는 원본이 아니라 사본, 그들은 의미하지 않는다. 몫 동일한 데이터. 그들 서로의 데이터 사본을 전달한다. 필요할 때.

그러나 공유는 보살 피고 여러 스레드가 동일한 데이터를 동시에보고 변경해야 할 수도 있습니다. 그래서, 공유를 금지하는 것은 큰 일이 아닙니다.. 이것은 SharedArrayBuffer 물체가 그림에 나타납니다. 그것은 우리를 보자. 여러 스레드간에 이진 데이터 공유.

그만큼 `SharedArrayBuffer` 목적

스레드간에 데이터 복사본을 전달하는 대신 사본을 전달하십시오. SharedArrayBuffer 목적. 에이 SharedArrayBuffer 목적 데이터가 저장된 메모리를 가리킨다..

따라서, SharedArrayBuffer 스레드간에 전달되면 모두가 여전히 같은 메모리를 가리킬 것이다. 원래 데이터가 저장됩니다. 따라서 스레드는 같은 메모리에있는 데이터를보고 업데이트하십시오..

웹 노동자 없이 공유 메모리

웹 작업자가 공유 메모리를 사용하지 않고 어떻게 작동하는지 보려면 작업자 스레드 만들기 과 그것에 약간의 자료를 건네 줘라..

그만큼 index.html 파일에는 메인 스크립트 내부 태그를 클릭하십시오.

 const w = 새 작업자 ( 'worker.js'); var n = 9; w.postMessage (n);

그만큼 worker.js 파일에는 작업자 스크립트:

 onmessage = (e) => console.group ( '[worker]'); console.log ( '주 스레드로부터받은 데이터 : % i', e.data); console.groupEnd ();

위의 코드를 사용하면 다음과 같이 표시됩니다. 콘솔에서 출력:

 [worker] 주 스레드에서받은 데이터 : 9

위의 스 니펫에 대한 전체 코드 설명은 웹 근로자에게 위의 게시물을 읽을 수 있습니다..

지금은 데이터가 쓰레드간에 앞뒤로 보낸다. ~을 사용하여 postMessage () 방법. 데이터는 다른 쪽에서받은 메시지 이벤트 핸들러, 이벤트의 가치로 데이터 재산.

자, 만약 우리가 데이터를 변경하다 수신 측에서 업데이트 된 것으로 보입니까? 어디 보자 :

 const w = 새 작업자 ( 'worker.js'); var n = 9; w.postMessage (n); n = 1;

예상대로 데이터가있다 아니 업데이트되었습니다.:

 [worker] 주 스레드에서받은 데이터 : 9

어쨌든 왜 그랬을까요? 그 메인 스크립트에서 작업자에게 보낸 클론.

웹 노동자 와 공유 메모리

이제 우리는 사용 SharedArrayBuffer 목적 같은 예제에서. 우리는 새로운 SharedArrayBuffer ~에 의해 인스턴스 ~을 사용하여 새로운 예어. 생성자는 하나의 매개 변수를 사용합니다. 에이 길이 값 (바이트), 버퍼 크기 지정.

 const w = 새 작업자 ( 'worker.js'); buff = 새로운 SharedArrayBuffer (1); var arr = new Int8Array (buff); / * 설정 데이터 * / arr [0] = 9; / * 작업자에게 버퍼 (사본) 보내기 * / w.postMessage (버프);

참고로 SharedArrayBuffer 목적 공유 메모리 영역만을 나타냄. 에 바이너리 데이터보기 및 바꾸기, 우리는 적절한 데이터 구조 (a TypedArray 또는 DataView 목적).

에서 index.html 위의 파일, 새로운 파일 SharedArrayBuffer 1 바이트 길이로만 생성됩니다. 그런 다음 새로운 Int8Array, 한 가지 유형 인 TypedArray 개체는 데이터를 “9” 제공된 바이트 공간.

 onmessage = (e) => var arr = new Int8Array (e.data); console.group ( '[worker]'); console.log ( '주 스레드로부터받은 데이터 : % i', arr [0]); console.groupEnd ();

Int8Array 작업자, 버퍼의 데이터보기.

그만큼 예상 값이 콘솔에 나타납니다. 정확히 우리가 원하는 작업자 스레드에서 :

 [worker] 주 스레드에서받은 데이터 : 9

이제하자. 주 스레드의 데이터를 업데이트한다. 변경 사항이 근로자에게 반영되었는지 확인.

 const w = 새 Worker ( 'worker.js'), buff = 새 SharedArrayBuffer (1); var arr = new Int8Array (buff); / * 설정 데이터 * / arr [0] = 9; / * 작업자에게 버퍼 (사본) 보내기 * / w.postMessage (버프); / * 데이터 변경 * / arr [0] = 1;

그리고 아래에서 볼 수 있듯이 업데이트 노동자 내부에 반영되다.!

 [worker] 메인 스레드로부터받은 데이터 : 1

그러나 코드도 다른 방향으로 일해야한다.: 작업자의 값이 처음 변경되면 또한 업데이트해야합니다. 주 스레드에서 인쇄 할 때.

이 경우 코드는 다음과 같습니다.

 onmessage = (e) => var arr = new Int8Array (e.data); console.group ( '[worker]'); console.log ( '주 스레드로부터받은 데이터 : % i', arr [0]); console.groupEnd (); / * 데이터 변경 * / arr [0] = 7; / * 주 스레드에 게시 * / postMessage ( ");

그만큼 작업자가 데이터를 변경한다. 그리고 빈 메시지가 주 스레드에 게시됩니다. 버퍼 내의 데이터가 변경되고 메인 스레드가 출력 될 준비가되었음을 시그널링한다.

 const w = 새 Worker ( 'worker.js'), buff = 새 SharedArrayBuffer (1); var arr = new Int8Array (buff); / * 설정 데이터 * / arr [0] = 9; / * 작업자에게 버퍼 (사본) 보내기 * / w.postMessage (버프); / * 데이터 변경 * / arr [0] = 1; / * 작업자가 작업을 변경 한 후에 데이터 인쇄 * / w.onmessage = (e) => console.group ( '[main]'); console.log ( '작업자 스레드로부터받은 업데이트 된 데이터 : % i', arr [0]); console.groupEnd ();

그리고, 이것도 작동합니다.! 버퍼의 데이터는 작업자 내부의 데이터와 동일합니다..

 [worker] 주 스레드로부터받은 데이터 : 1 [main] 작업자 스레드로부터받은 업데이트 된 데이터 : 7

가치 두 경우 모두 업데이트 됨; 메인 스레드와 작업자 스레드 모두 동일한 데이터를보고 변경하고 있습니다..

최종 단어

이전에 언급했듯이 JavaScript에서 공유 메모리 사용 단점이 없다.. 개발자는 개발자가 실행 순서가 예측대로 발생합니다. 트로피를 누가 받을지 아무도 모르기 때문에 동일한 데이터를 얻기 위해 두 개의 스레드가 경쟁하지 않습니다..