WebWorkers - 프런트엔드를 위한 고성능 컴퓨팅

전체 기사를 읽기 전에 WebWorker가 무엇인지, WebWorker와 웹 고성능 컴퓨팅의 관계는 무엇인지 간략하게 소개하겠습니다.

먼저 WebWorker란 무엇일까요?

간단히 말하면 WebWorkers는 웹 개발자가 이 API를 사용하여 UI를 차단하지 않고 백그라운드에서 스크립트를 실행할 수 있으며 많은 계산이 필요한 작업을 수행하고 CPU를 최대한 활용할 수 있습니다. 멀티 코어.

이 기사 소개https://www.html5rocks.com/en/tutorials/workers/basics/ 또는 해당 중국어 버전을 읽을 수 있습니다.

Web Workers 사양은 웹 애플리케이션에서 배경 스크립트를 생성하기 위한 API를 정의합니다. Web Workers를 사용하면 UI나 기타 작업을 차단하지 않고 장시간 실행되는 스크립트를 실행하여 계산 집약적인 작업을 처리할 수 있습니다. 사용자 interactions를 처리하는 스크립트.

이 링크(https://nerget.com/rayjs-mt/rayjs.html)를 열어 WebWorkers의 가속 효과를 직접 경험해 볼 수 있습니다.

기본적으로 모든 브라우저는 이제 WebWorkers를 지원합니다.

Parallel.js

WebWorkers 인터페이스를 직접 사용하는 것은 여전히 ​​너무 번거롭습니다. 다행히 누군가 이미 Parallel.js로 캡슐화했습니다.

Parallel.js는 node를 통해 설치할 수 있습니다.

$ npm install Paralleljs

그러나 이는 node의 클러스터 모듈을 사용하여 node.js에서 사용됩니다. 브라우저에서 사용하려면 js:

<script src="parallel.js"></script>

을 직접 적용한 다음 전역 변수인 Parallel을 얻으면 됩니다. Parallel은 두 가지 기능적 프로그래밍 인터페이스인 map과 Reduce를 제공하여 동시 작업을 매우 편리하게 만듭니다.

먼저 문제를 정의해 보겠습니다. 비즈니스가 상대적으로 복잡하므로 여기서는 1~1,000,0000의 합을 구한 다음 1~1,0000,0000을 빼는 방식으로 문제를 단순화하겠습니다. 대답은 명백합니다: 0! 숫자가 너무 크면 데이터 정확성에 문제가 생기고 두 방법의 결과가 다소 달라서 사람들이 병렬 방식을 신뢰할 수 없다고 느낄 수 있기 때문입니다. Mac pro chrome61에서 js를 직접 실행하면 이 문제는 약 1.5초가 걸립니다(실제 비즈니스 문제는 15초가 걸립니다. 사용자 테스트 중에 브라우저가 종료되는 것을 방지하기 위해 문제를 단순화했습니다).

const N = 100000000;// 总次数1亿
 
function sum(start, end) {
  let total = 0;
  for (let i = start; i<=end; i += 1) total += i;
  for (let i = start; i<=end; i += 1) total -= i;
  return total;
}
 
function paraSum(N) {
  const N1 = N / 10;//我们分成10分，没分分别交给一个web worker，parallel.js会根据电脑的CPU核数建立适量的workers
  let p = new Parallel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    .require(sum);
  return p.map(n => sum((n - 1) * 10000000 + 1, n * 10000000))// 在parallel.js里面没法直接应用外部变量N1
    .reduce(data => {
      const acc = data[0];
      const e = data[1];
      return acc + e;
    });
}

코드는 비교적 간단합니다. 여기서는 처음 사용하기 시작했을 때 겪었던 몇 가지 함정에 대해 이야기하겠습니다.

필요한 모든 기능을 요구합니다

예를 들어 어필 코드에 sum을 사용하는 경우 sum에 다른 함수 f를 사용하는 경우 미리 require(sum)도 필요합니다. (f), 마찬가지로 f에서 g가 사용되면 정의된 모든 함수가 사용되도록 요구할 때까지 require(g)도 필요합니다. . . .

변수를 요구할 수 없습니다

어필 코드에서 원래 N1을 정의했지만 사용할 수 없었습니다

ES6를 ES5로 컴파일한 후 문제가 발생했는데 Chrome에서 오류를 보고하지 않았습니다

실제 프로젝트 중학교 초반에는 ES6의 기능인 배열 구조 분해를 사용했습니다. 원래는 아주 간단한 기능이었지만 지금은 대부분의 브라우저에서 지원하지만, 당시 제가 구성한 바벨은 ES5로 컴파일이 되기 때문에 바벨로 온라인에서 테스트할 수는 없을 것입니다. Chrome에서 작동합니다. 오랫동안 확인한 후 Firefox에서 열었고 다음 오류 메시지를 발견했습니다.

ReferenceError: _slicedToArray is not Defined

Chrome이 아닌 것 같습니다. 전능하다. . .

이 데모 페이지에서 테스트할 수 있습니다. 물론 속도 증가는 컴퓨터 CPU의 코어 수에 따라 다릅니다. 또한 나중에 동일한 컴퓨터에서 Firefox 55.0.3(64비트)을 테스트했는데 실제로 항소 코드가 190ms밖에 걸리지 않았습니다! ! ! Safari9.1.1에서도 약 190ms입니다. .

프론트엔드 고성능 컴퓨팅의 다른 속성과 지표에 대해서도 추후 소개할 예정이니 계속해서 관심을 가져주시기 바랍니다.

위 내용은 WebWorkers - 프런트엔드를 위한 고성능 컴퓨팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!