최근에 일부 프로젝트에 WebAssembly를 사용하기 시작했습니다. Wasm이 javaScript보다 빠르다는 소식을 듣고 있기 때문에이 작업을 수행하고 있습니다.
실제로 첫 번째 Wasm 프로젝트를 시작했을 때 C ++에서 DOM을 조작하는 방법을 모른다는 것을 깨달았습니다.
Wasm을 사용 하여이 작업을 수행 할 수있는 방법이 있습니까?
답변
최근에 일부 프로젝트에 웹 어셈블리를 사용하기 시작했습니다. wasm이 javascript보다 빠르다는 소식을 듣고 있기 때문에이 작업을 수행하고 있습니다.
WebAssembly는 JavaScript보다 빠르지 만 특정 사용 사례에만 해당됩니다. WebAssembly를 사용하면 브라우저에서 코드를 다운로드하고 컴파일하는 작업이 줄어들어 시작 시간이 단축됩니다. 그러나 WebAssembly의 런타임 성능이 일반적으로 JavaScript보다 2-3 배 빠릅니다. 매우 훌륭하고 실용적인 비교에 대해서는 다음 기사를 참조하십시오.
https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/
그러나 WebAssembly에는 직접적인 DOM 액세스 권한이 없으므로 뛰어난 성능에도 불구하고 추가 I / O 오버 헤드로 인해 사용 사례에서 JavaScript보다 느릴 수 있습니다.
이러한 이유로 현재 사람들은 알고리즘 / 계산 집약적 인 작업에서 WebAssembly를 통해 가장 큰 성공을 거두고 있습니다.
나는 C ++에서 돔을 조작하는 방법을 모른다는 것을 깨달았다. wasm을 사용하여이를 수행 할 수있는 방법이 있습니까?
DOM을 조작하려면 JavaScript 호스트를 통해이 작업을 수행해야합니다. 웹 어셈블리 모듈은 DOM을 대신하여 DOM을 조작하도록 ‘요청’하는 메시지를 JavaScript로 보내야합니다.
이것은 매우 일반적인 과제이므로 문제에 대한 해결책이있는 다양한 커뮤니티 프로젝트가 있습니다. C ++을 사용함에 따라이 내용이 흥미로울 수 있습니다.
https://github.com/mbasso/asm-dom
앞으로 인터페이스 유형 과 같은 제안으로 호스트 환경과의 상호 운용이 쉬워지고 WebAssembly에서 웹 API를 직접 호출 할 수있게되었습니다.
답변
불행히도 DOM은 브라우저의 기본 JavaScript 스레드 내에서만 액세스 할 수 있습니다. 서비스 워커, 웹 워커 및 웹 어셈블리 모듈에는 DOM 액세스 권한이 없습니다. WASM에서 얻을 수있는 가장 가까운 조작은 Preact / React 와 같은 상태 기반 UI 구성 요소를 사용하여 기본 스레드에 전달되고 렌더링되는 상태 객체를 조작하는 것 입니다.
JSON 직렬화는 가장 자주 postMessage()또는 브로드 캐스트 채널로 상태를 전달하는 데 사용됩니다 . TransferrableJSON 직렬화 / 역 직렬화 오버 헤드를 피하는 성능이 뛰어난 메시지를 위해 비트 패킹 또는 이진 객체를 ArrayBuffers 와 함께 사용할 수 있습니다 .
