WebAssembly를 사용하여 웹 애플리케이션 속도를 20배 향상시킨 방법

이 기사에서는 JavaScript 계산을 WebAssembly로 대체하여 브라우저 애플리케이션 속도를 높이는 사례에 대해 설명합니다.

웹어셈블리 - 그게 뭐죠?

간단히 말해서 이는 스택 기반 가상 머신에 대한 이진 명령 형식입니다. Wasm(짧은 이름)은 종종 프로그래밍 언어로 불리지만 그렇지 않습니다. 명령 형식은 JavaScript와 함께 브라우저에서 실행됩니다.

C/C++, Rust, Go 등의 언어로 소스를 컴파일하여 WebAssembly를 얻을 수 있다는 것이 중요합니다. 여기서는 통계적 타이핑과 소위 플랫 메모리 모델이 사용됩니다. 위에서 언급한 것처럼 코드는 압축된 바이너리 형식으로 저장되므로 명령줄을 사용하여 애플리케이션을 실행하는 것만큼 빠릅니다. 이러한 기능으로 인해 WebAssembly의 인기가 높아졌습니다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 실기 코스 "모바일 개발자 PRO".

현재 Wasm은 Doom 3과 같은 게임부터 Autocad 및 Figma와 같은 웹 포팅 애플리케이션에 이르기까지 다양한 애플리케이션에서 사용됩니다. Wasm은 서버리스 컴퓨팅과 같은 영역에서도 사용됩니다.

이 기사에서는 Wasm을 사용하여 분석 웹 서비스 속도를 높이는 예를 제공합니다. 명확성을 위해 C로 작성된 작업 애플리케이션을 사용하여 WebAssembly로 컴파일했습니다. 결과는 JS의 성능이 저하된 섹션을 대체하는 데 사용됩니다.

애플리케이션 혁신

이 예에서는 유전학자를 위한 fastq.bio 브라우저 서비스를 사용합니다. 이 도구를 사용하면 DNA 서열 분석(해독)의 품질을 평가할 수 있습니다.

다음은 실제 애플리케이션의 예입니다.

프로세스의 세부 사항은 비전문가에게는 상당히 복잡하기 때문에 살펴볼 가치가 없지만, 간단히 말해서 과학자들은 위의 인포그래픽을 사용하여 DNA 시퀀싱 프로세스가 원활하게 진행되었는지, 어떤 문제가 발생했는지 이해할 수 있습니다.

이 서비스에는 대체 데스크톱 프로그램이 있습니다. 그러나 fastq.bio를 사용하면 데이터를 시각화하여 작업 속도를 높일 수 있습니다. 대부분의 경우 명령줄을 사용하여 작업할 수 있어야 하지만 모든 유전학자가 필요한 경험을 갖고 있는 것은 아닙니다.

모든 것이 간단하게 작동합니다. 입력은 텍스트 파일 형식으로 표시되는 데이터입니다. 이 파일은 특수한 시퀀싱 도구를 통해 생성됩니다. 파일에는 DNA 서열 목록과 각 뉴클레오티드의 품질 점수가 포함되어 있습니다. 파일 형식은 .fastq이므로 서비스 이름이 붙여졌습니다.

JavaScript로 구현

fastq.bio로 작업할 때 사용자의 첫 번째 단계는 적절한 파일을 선택하는 것입니다. File 객체를 사용하여 애플리케이션은 파일에서 임의의 데이터 샘플을 읽고 해당 배치를 처리합니다. 여기서 JavaScript의 역할은 간단한 문자열 작업을 수행하고 측정항목을 계산하는 것입니다. 그 중 하나는 서로 다른 DNA 단편에 있는 뉴클레오티드 A, C, G 및 T의 수입니다.

필요한 지표를 계산한 후 Plotly.js를 사용하여 시각화하고 서비스는 새로운 데이터 샘플로 작업을 시작합니다. 청킹은 UX의 품질을 향상시키기 위해 수행됩니다. 한 번에 모든 데이터를 작업하는 경우 시퀀싱 결과가 포함된 파일이 수백 기가바이트의 파일 공간을 차지하므로 프로세스가 한동안 중단됩니다. 이 서비스는 0,5~1MB 크기의 데이터 조각을 가져와 단계별로 작업하여 그래픽 데이터를 구축합니다.

다음은 작동 방식입니다.

빨간색 직사각형에는 시각화를 얻기 위한 문자열 변환 알고리즘이 포함되어 있습니다. 이는 서비스에서 가장 계산 집약적인 부분입니다. Wasm으로 교체해 볼 가치가 있습니다.

웹어셈블리 테스트

Wasm 사용 가능성을 평가하기 위해 프로젝트 팀은 fastq 파일을 기반으로 QC 지표(QC - 품질 관리)를 생성하기 위한 기성 솔루션을 검색하기 시작했습니다. C, C++, Rust로 작성된 툴 중에서 검색을 진행했기 때문에 해당 코드를 WebAssembly로 포팅하는 것이 가능했습니다. 또한 도구는 "원시"여서는 안 되며 과학자들이 이미 테스트한 서비스가 필요했습니다.

결과적으로는 유리한 선택이 이루어졌습니다. 순서. 이 응용 프로그램은 매우 인기가 있으며 오픈 소스이며 소스 언어는 C입니다.

Wasm으로 변환하기 전에 데스크탑용 seqtk의 컴파일 원리를 살펴보는 것이 좋습니다. Makefile에 따르면 필요한 것은 다음과 같습니다.

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

원칙적으로 Emscripten을 사용하여 seqtk를 컴파일할 수 있습니다. 거기에 없다면 우리는 그렇게 합니다. 도커 이미지.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

원하는 경우 직접 조립하시면 됩니다, 하지만 시간이 걸립니다.

컨테이너 내에서 gcc 대신 emcc를 쉽게 사용할 수 있습니다.

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

최소 변경 사항:

바이너리 파일로 출력하는 대신 Emscripten은 .wasm 및 .js를 사용하여 WebAssemby 모듈을 실행하는 데 사용되는 파일을 생성합니다.

USE_ZLIB 플래그는 zlib 라이브러리를 지원하는 데 사용됩니다. 라이브러리는 배포되어 WebAssembly로 포팅되었으며 Emscripten은 이를 프로젝트에 포함합니다.

Emscriptpten 가상 파일 시스템이 활성화되었습니다. 이것 POSIX와 유사한 FS, 브라우저 내부의 RAM에서 실행됩니다. 페이지가 새로 고쳐지면 메모리가 지워집니다.

가상 파일 시스템이 필요한 이유를 이해하려면 명령줄에서 seqtk를 실행하는 방식과 컴파일된 WebAssembly 모듈을 실행하는 방식을 비교해 보는 것이 좋습니다.

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

파일 입력이 아닌 문자열에 대한 seqtk를 다시 작성하지 않으려면 가상 파일 시스템에 대한 액세스 권한을 얻는 것이 필요합니다. 이 경우 데이터 조각은 main() seqtk에 대한 호출과 함께 가상 FS에 data.fastq 파일로 표시됩니다.

새로운 아키텍처는 다음과 같습니다.

그림은 기본 브라우저 스레드에서 계산하는 대신, WebWorkers. 이 방법을 사용하면 브라우저 응답성에 영향을 주지 않고 백그라운드 스레드에서 계산을 수행할 수 있습니다. WebWorker 컨트롤러는 Worker를 시작하여 메인 스레드와의 상호 작용을 관리합니다.

seqtk 명령은 마운트된 파일에서 Worker를 사용하여 실행됩니다. 실행이 완료되면 Worker는 Promise 형태로 결과를 생성합니다. 메인 스레드가 메시지를 수신하면 그 결과는 그래프를 업데이트하는 데 사용됩니다. 그리고 여러 번의 반복으로 계속됩니다.

WebAssembly 성능은 어떻습니까?

성능 변화를 평가하기 위해 프로젝트 팀은 초당 읽기 작업 매개변수를 사용했습니다. 두 구현 모두 JavaScript를 사용하므로 대화형 그래프를 작성하는 데 걸리는 시간은 고려되지 않습니다.

즉시 사용 가능한 솔루션을 사용할 경우 성능이 XNUMX배 향상되었습니다.

이는 훌륭한 결과이지만, 결과적으로 이를 최적화할 기회도 있습니다. 사실 많은 QC 분석 결과는 seqtk에서 사용되지 않으므로 삭제될 수 있습니다. 이렇게 하면 JS에 비해 결과가 13배 향상됩니다.

이는 단순히 printf() 명령을 주석 처리함으로써 달성되었습니다.

하지만 그게 전부는 아닙니다. 사실 이 단계에서 fastq.bio는 다양한 C 함수를 호출하여 분석 결과를 수신하며, 각 함수는 고유한 특성 세트를 계산하므로 파일의 각 조각을 두 번 읽습니다.

이 문제를 해결하기 위해 두 가지 기능을 하나로 결합하기로 결정했습니다. 그 결과 생산성이 20배나 향상됐다.

그러한 뛰어난 결과가 항상 달성될 수는 없다는 점은 주목할 가치가 있습니다. 어떤 경우에는 성능이 저하되므로 각 사례를 평가할 가치가 있습니다.

결론적으로 Wasm은 애플리케이션 성능을 향상시킬 수 있는 기회를 제공하지만 현명하게 사용해야 한다고 말할 수 있습니다.

Skillbox는 다음을 권장합니다.

• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".
• 온라인 코스 "0의 C# 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com