ASM.JS 및 SIMD.JS - 뛰어난 JavaScript 성능

안녕하십니까,

여기에서 우리는 다시 이 블로그 게시물에서 코드를 보기 흉하지만 엄청난 성능 향상이 있는 코드로 레벨업(또는 JS를 하위 레벨 구문으로 레벨다운)하는 몇 가지 트릭에 대해 이야기할 것입니다. ..

그렇다면 왜 누군가가 JavaScript에서 자신의 코드 성능을 2배에서 최대 6배까지 증가시켜야 할까요? 글쎄요, Javascript를 사용하면 역학 유형의 변수를 선언할 수 있으므로 "for"문 내에서 "1"을 비교하거나 추가할 때 어떤 유형의 데이터를 추가해야 하는지 알 수 없습니다(적시 컴파일러). 그럼에도 불구하고 논리적이다.

한편 우리는 "for"내에서 데이터 유형을 대부분 부호 없는 정수 및 정수(부동 소수점이 없는 전체 숫자를 의미)로 조작하는 방법에 대해 나중에 볼 것입니다. 지금 봅시다!

var fast_array = Uint8Array.of(1, 128, 255, 51, 128, 128, 128, 255) // Let's imagine we have RGBA, RGBA, ...
var length = fast_array.length;
for(var i = 0; (i|0) < (length|0); i = (i + 4 | 0) >>> 0) { // "|0" will round the number and force it to be an integer while ">>>0" will force it to be positive
    fast_array[i>>2] = 0; // "x >> 2" will divide the number by 4, it operate a shift of bits so we're editing "R" within RGBA
}

// Inspired from: https://mbebenita.github.io/LLJS/

링크를 따라가면 이 코드가 더 빠릅니다. 그 이상으로 유형이 지정된 배열을 사용하여 자바스크립트 엔진의 가비지 수집 작업을 줄이고 !!경고!!가 있기 때문에 더 빠릅니다. 고정 길이...

이것이 저수준 JS를 작성하는 방법이었습니다! 그리고 예, http://asmjs.org/은 emscripten을 사용하여 C 코드를 Javascript로 컴파일할 때 작동하는 방식이지만 이와 유사한 코드를 독립적으로 작성할 수 있습니다! 동일한 "해킹"을 사용합니다.


SIMD.js는 조금 더 복잡합니다. 픽셀 아트 편집기 내에서 색상을 인터페이스로 계산하기 위해 유사한 구조를 사용해야 했습니다(데모는 https://pixa.pics/ ). 그렇게:

https://github.com/tc39/ecmascript_simd

그래서 우리는 "작업이 일종의 슈퍼캐시로 들어가서 1개의 작업을 4개의 작업을 수행하는 것만큼 빠르게 만들 것"이라고 가정할 수 있습니다! (이것이 그들이 말한 것입니다)





깔끔해 보인다!

실제로 Google에서 "Dart"라는 언어로 도입되었으며 인텔 팀에서 지원했습니다.


결론:

우리 소프트웨어를 구축할 때, 우리가 그 두 라이브러리를 발견한 주에 우리 코드는 실제로 300% 더 빨랐습니다. 공유하고 좋아요를 눌러 멋진 개발자에게 필요할 수 있습니다^^.


읽어 주셔서 감사합니다.