웹 개발자라면, 특히나 프런트엔드 개발자라면 wasm은 익히 들었을 것이다. 하지만, 재미로는 많이들 사용 해봤겠지만, 주니어 개발자나 c/c++, rust를 습득하지 않았거나 오래 되신 분들은 재미로 해보기에는 조금 벅찰 수 있으니 포스팅을 작성한다.
위의 즉 이 글은 주니어 개발자, c/c++, rust를 사용하기 싫은 분들이 대상이다. 아주 간단하게 맛만 보여드릴 테니, 자세한 내용은 다른 포스팅을 보고 습득 하시거나 책을 추천 드린다.
프런트엔드 개발자라면 최소 TypeScript를 들어 보았거나 들어보았을 것이다. 이 포스팅에서는 wasm을 TypeScript를 이용하여 작성 할 것이다.
해당 예제를 하기에 앞서서 최신버전의 Node.js를 설치하기 바란다.
npm init
npm install --save @assemblyscript/loader
npm install --save-dev assemblyscript
npx asinit .
자 여기까지 왔다면 위와 같은 파일들을 얻을 수 있다.
/assembly/index.js
// The entry file of your WebAssembly module.
export function add(a: i32, b: i32): i32 {
return a + b;
}
위와 같은 함수를 볼 수 있다.
간단하게 위의 코드를 설명 하자면, add라는 함수를 외부에 노출을 시키며, a, b라는 인자를 받으며 각각의 타입은 i32(부호가 있는 32비트의 정수)이고, 인자 a, b를 받아서 i32타입으로 값으로 리턴한다.
간단하게 설명을 해보았는데, 답이 되었으면 좋겠다.
자 여기까지만 보면, 이걸로 속도테스트가 되나?? 이생각이 들 것이다. 맞다. 당연안되겠지 그러니 다음 함수를 추가하자.
// The entry file of your WebAssembly module.
export function add(a: i32, b: i32): i32 {
return a + b;
}
export function test(): u64 {
let sum: u64 = 0;
for(let i = 0; i <= 2000000000; i++ ) {
sum += i;
}
return sum;
}
test라는 함수를 추가해보았다. 0 ~ 2000000000 까지 더하는 코드로 함수의 리턴타입은 u64(부호가 없는 64비트의 정수)이다.
자 이제 빌드를 해보자.
npm run asbuild
위 처럼 빌드된 파일들이 노출이 된다. 여기서 봐야 할 것은 optimized.wasm, untouched.wasm이다.
딱 보아도 최적화 된 것과 아닌것이다. 나는 최적화 된것으로 테스트 할 것이다.
/index.html
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
let sum = 0;
for (let i = 0; i <= 2000000000; i++) {
sum += i;
}
return sum;
}
let nativeTest
fetch('./build/optimized.wasm').then( response => response.arrayBuffer() )
.then(WebAssembly.instantiate)
.then(({ instance }) => {
const { exports } = instance || {}
nativeTest = function () {
let curDate = new Date()
const value = exports.test()
display(curDate, value, new Date(), 'wasm')
}
})
function scriptTest () {
let curDate = new Date()
const value = test()
display(curDate, value, new Date(), 'script')
}
function display(oldTime, value, newTime, tag) {
const newDiv = document.createElement('div')
newDiv.innerText = `${tag} : ${newTime - oldTime}ms : ${value}`
document.getElementById('testArea').append(newDiv)
}
</script>
</head>
<body>
<button onclick="nativeTest()">nativeTest</button>
<button onclick="scriptTest()">scriptTest</button>
<div id="testArea"></div>
</body>
</html>
테스트를 위하여 위와 같은 html을 적당히 작성해보았다.
이젠 간단하게 서버를 열면 되는데, 간단하게 서버를 열기에는 역시 live-server만 한게 없으니, live-server가 없는 분은 아래를 따르자.
npm install -g live-server
live-server
평균 속도는 아래와 같다.
wasm : 1898ms
script: 3414ms
위의 결과는 크롬으로 한 결과 이다. 생각보다 빨라서 놀랐다... 하지만 2000000001000000000의 값이 아닌, 숫자가 줄어든 것을 볼 수 있다. 9007199254740991의 값을 넘었으니, 일단 믿을수 없는 값이 된다.
자 이제 사파리이다.
wasm: 2338ms
script: 32469ms
엄청 차이난다.... 게다가 값도 뭐 당연하게 정확하지 않다.
테스트는 아래에서 추가로 해보아도 좋다.
결론
당연하게도 IE는 이만 보내주자.
추가적으로 AssemblyScript는 C/C++, rust로 wasm을 만드는 것보다 속도면에서 손해를 보지만, 맛만 보는 것에는 손색 없을 것이다.
고속 혹은 여러 브라우저에서 안정적인 속도를 원하는 연산의 경우 wasm을 생각할 수 있게 되었다. 이건 당연하게도 마이너스가 아니다 언제나 옵션은 추가 되면 좋은 거 아닌가?
아직은 wasm이 어색하겠지만, 앞으로는 당연하게도 사용 하고 있게 되지 않을 까 싶다. 사용법만 잘 정착된다면 말이다.
댓글
댓글 쓰기