웹어셈블리 소개-JS 튜토리얼-php.cn

웹어셈블리 소개

Linda Hamilton

풀어 주다： 2025-01-20 12:29:13

원래의

593명이 탐색했습니다.

WebAssembly(WASM) – 심층 분석: 1부

이 게시물은 WebAssembly를 탐구하는 시리즈를 시작합니다. 아래에서 시리즈의 다른 부분에 대한 링크를 찾아보세요.

WebAssembly(WASM)는 웹 브라우저 내에서 다양한 프로그래밍 언어를 사용하여 구축된 애플리케이션을 실행하도록 설계된 어셈블리와 유사한 하위 수준 언어입니다. 크로스 플랫폼 특성과 낮은 수준의 디자인은 기본에 가까운 속도를 제공하여 이전에는 JavaScript만으로는 불가능했던 웹 기능을 잠금 해제합니다. 계산 집약적인 작업을 처리할 수 있는 더 빠른 웹 앱을 원했다면 WASM이 솔루션입니다. 이 소개에서는 WASM의 핵심 기능, 기원, 사용 시작 방법을 다룹니다.

웹어셈블리란 무엇인가요?

WebAssembly는 웹 브라우저용으로 특별히 설계된 하위 수준 컴파일 타겟입니다. 직접 실행을 위한 언어가 아닙니다. 대신에 다른 언어가 컴파일하는 어셈블리와 유사한 구조를 정의합니다. 이 "컴파일 대상" 측면이 핵심입니다.

다음 C 코드 예제를 고려하세요.

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>

로그인 후 복사

C 컴파일러는 이를 어셈블리 명령어(또는 기계어 코드)로 변환합니다.

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>

로그인 후 복사

이것은 차례로 이진 표현을 생성합니다.

<code>00000000000000000000000000000011</code>

로그인 후 복사

(참고: 정확한 바이너리 출력은 CPU 아키텍처에 따라 다릅니다. 이는 단순화된 그림입니다.)

Introduction to WebAssembly

C 코드는 어셈블리로 변환된 다음 바이너리로 변환되어 컴퓨터에서 직접 실행 가능합니다. WebAssembly는 이 프로세스를 수정합니다. 표준 어셈블리 대신 컴파일러는 다음을 생성할 수 있습니다.

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>

로그인 후 복사

(이것은 실제 WASM 구문이 아닌 설명 목적으로만 사용되는 가상의 구문입니다.)

Introduction to WebAssembly

모든 브라우저가 이 구문을 이해한다면 웹 개발에 혁명이 일어날 것입니다. C, Rust 및 Go와 같은 언어용 컴파일러는 이 출력을 생성하여 운영 체제나 브라우저에 관계없이 모든 언어로 작성된 프로그램의 브라우저 실행을 가능하게 합니다.

W3C에서 정의한 WebAssembly 사양은 WASM의 일관된 브라우저 처리를 보장합니다. 주요 브라우저는 이미 WebAssembly를 기본적으로 지원합니다.

웹어셈블리 표현

WebAssembly에는 두 가지 기본 형식이 있습니다.

WAT(WebAssembly Text): 디버깅 및 코드 이해를 위한 텍스트 형식입니다.
WASM(WebAssembly 모듈): 브라우저 실행을 위한 바이너리 형식

이러한 형식은 서로 바꿔 사용할 수 있습니다. WAT는 WASM으로 변환될 수 있으며 그 반대의 경우도 마찬가지입니다. 어느 쪽이든 컴파일 가능합니다.

기본 웹어셈블리 구문(WAT)

WAT를 사용하여 예제를 다시 살펴보겠습니다.

3개의 32비트 정수 변수를 선언합니다.

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>

로그인 후 복사

값 할당:

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>

로그인 후 복사

결과 추가 및 저장:

<code>00000000000000000000000000000011</code>

로그인 후 복사

WebAssembly는 스택 머신을 활용합니다. get_local는 값을 스택에 푸시하고, i32.add는 상위 두 개의 스택 요소를 추가하고, set_local은 결과를 저장합니다. WASM 바이너리에 해당하는 내용은 다음과 같습니다.

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>

로그인 후 복사

복잡해 보일 수도 있지만 WASM은 기본 프로그래밍 언어가 아니라 컴파일 대상이라는 점을 기억하세요. 일반적으로 고급 언어로 코드를 작성하고 WASM으로 컴파일합니다.

WebAssembly가 JavaScript를 대체하게 될까요?

아니요. WASM은 JavaScript를 대체하는 것이 아니라 보완하도록 설계되었습니다. JavaScript는 DOM 조작 및 기본 웹 상호 작용에 탁월한 반면 WASM은 거의 기본 성능으로 계산 집약적인 작업을 처리합니다. 이러한 시너지 효과로 효율적인 작업 분배가 가능합니다.

웹어셈블리 사용 사례

WASM의 성능은 다음과 같은 경우에 이상적입니다.

이미지 및 동영상 처리
게임(3D 포함)
음악 애플리케이션
암호화
시각화 도구
시뮬레이터 및 에뮬레이터

기존 WASM 애플리케이션의 예로는 Figma, Amazon Prime Video, Google Earth 등이 있습니다.

브라우저를 넘어서는 웹어셈블리

처음에는 브라우저에 중점을 두었지만 WASM의 기능은 WASI(WebAssembly System Interface)를 통해 웹 이상으로 확장됩니다. WASI는 표준 API를 제공하므로 단일 바이너리에서 크로스 플랫폼 애플리케이션을 생성할 수 있으므로 플랫폼별 빌드가 필요하지 않습니다.

웹어셈블리 전

이전의 여러 프로젝트에서는 브라우저에서 다른 언어를 실행하려고 시도했지만 표준화 부족, 보안 취약성 또는 성능 문제(ActiveX, Java Applets, Flash, NaCl, asm.js, Dart)로 인해 종종 제한에 직면했습니다. WebAssembly는 표준화, 이식성, 보안, 성능 및 확장성을 통해 이러한 단점을 해결합니다.