6분 안에 WebAssembly를 이해하세요.

10397 단어 webdevwebjavascriptwebassembly
웹애슬리는 2019년 12월 5일 HTML, CSS, 자바스크립트에 가입해 온라인 표준이 됐다.이것은 많은 일에 매우 유용하다. 성능으로 말하자면, 이것은 브라우저에서 전대미문의 것이다.만약 네가 5분의 시간이 있다면, 나는 지금 발생하고 있는 작은 혁명에 대해 설명할 필요가 있다.

종전


1995년에 Javascript는 IBM이 만들었다within 10 days.당시 자바스크립트의 디자인은 결코 빠르기 위한 것이 아니다.그것은 기본적으로 표 검증을 위한 것이고 속도가 매우 느리다.시간의 추이에 따라 상황은 갈수록 좋아진다.
2008년에 구글은 어디서부터 왔는지 새로운 브라우저인 구글 크롬을 내놓았다.Chrome 내부에는 V8이라는 Javascript 엔진이 있습니다.V8의 혁명은 Javascript의 즉시(JIT) 컴파일이다.이러한 해석 코드에서 JIT 컴파일링으로의 전환은 Javascript의 성능을 크게 향상시켰고 브라우저의 전체적인 성능도 향상시켰다.이런 속도는 NodeJS나 Electron 등 기술의 탄생과 자바스크립트의 보급률의 급증을 허용할 것이다.

2015년에 WebAssembly는 처음으로 Unity 아래에서 운행한다고 발표했다small demo of a game.게임은 브라우저에서 바로 실행됩니다!
2019년에 W3C는 WebAssembly를 새로운 웹 표준으로 삼았다.V8 엔진이 그 시대에 있었듯이 웹애슬리는 새로운 성능 혁명이 되고 있다.그래서 Web Assembly는 이미 여기에 있습니다. 그것은 빠른 시작을 했습니다.

WebAssembly란 무엇입니까?


WebAssembly, 줄임말wasm은 Javascript 코드가 아닌 브라우저에서 실행하는 방법입니다.이 코드는 C, C++, Rust 및 많은 다른 코드가 될 수 있습니다.그것은 브라우저에서 CPU에서 이 컴퓨터에 가까운 속도로 컴파일되고 실행될 것입니다.이 코드는 바이너리 파일 형식으로 자바스크립트에서 모듈로 직접 사용할 수 있습니다.
WebAssembly는 Javascript를 대체하는 데 사용되지 않습니다.반대로 이 두 가지 기술은 협동하여 일을 하기 위한 것이다.Javascript API를 사용하여 WebAssembly 모듈을 페이지에 로드할 수 있습니다.이것은 자바스크립트의 유연성을 이용하여 WebAssembly를 통해 코드를 컴파일하는 성능을 사용할 수 있음을 의미합니다.

Web Assembly라는 이름은 좀 오도된 이름이다.WebAssembly는 웹에 적합하지만 이에 국한되지 않습니다!Web Assembly를 제작하는 팀은 그것을 유니버설로 만들어 어디서든 사용할 수 있도록 노력했다.우리는 보기 시작했다examples of this.
또 다른 오해가 있는데, 이런 오해는 자주 나타난다.WebAssembly는 프로그래밍 언어가 아닙니다.WebAssembly는 다른 언어의 컴파일 대상 역할을 하는 중간 형식입니다.그래, 아직 잘 모르겠어. 우리 그림을 좀 그려 보자.

바이트 코드 그것은 어떻게 일합니까?



봤어요?또 다른 예술품.만약 내가 너에게 내가 포토샵을 사용한다고 말한다면, 너는 믿니?어쨌든!
  • 첫 번째 단계: 관건은 당신과 당신의 개발자의 기능입니다.C, C++로 원본 코드를 작성할 수 있습니다. (다른 언어를 사용할 수 있습니다.)이 코드는 문제를 해결하기 위한 것으로 여겨지거나 브라우저의 자바스크립트에 지나치게 밀집된 프로세스를 만드는 것으로 여겨진다.
  • 2단계: 당신은 로 번역할 것입니다.Emscripten은 소스 코드를 WebAssembly로 컴파일할 수 있는 Emscripten로 구성된 도구 체인입니다.너는 그것을 설치하고 네가 컴파일하고 싶은 모든 것 LLVM 을 컴파일할 수 있다. 우리는 잠시 후에 다시 볼 것이다.이 단계가 끝나면 WASM 파일을 갖게 됩니다.
  • 3단계: 웹 페이지에서 WASM 파일을 사용합니다.미래에서 온 경우 ES6 모듈을 로드하는 것처럼 파일을 로드할 수 있습니다.지금은 용법이 좀 복잡하지만 별다른 점이 없다.
    • 좋아, 우리 손을 더럽히자.

    빠른 몇 걸음 비밀번호 보여주세요.


    우선, 우리는 약간의 C++ 코드를 컴파일해야 한다.어떤 사람들은 전체 를 예로 들면 나는 두 자릿수를 늘리는 함수로 간단함을 유지할 것이다.우리는 그것으로 C++의 속도를 증명하지 않을 것이다. 단지 예를 들 뿐이다.
    int add(int firstNumber, int secondNumber) {
  return firstNumber + secondNumber;
}
    선택한 Linux 릴리스로 이동합니다.우리는 emscripten을 다운로드하고 설치하는 것부터 시작할 것이다.
    # installing dependencies (yes, you can use newer version of python)
sudo apt-get install python2.7 git

# gettin emscripten via a git clone.
git clone https://github.com/emscripten-core/emsdk.git

# downloading, installing and activating the sdk
cd emsdk
./emsdk install latest
./emsdk activate latestl
source ./emsdk\_env.sh

# make sure the installation worked
emcc --version

# compiling the c++ file to a webassembly template
emcc helloWebassembly.cpp -s WASM=1 -o helloWebassembly.html

# we serve the HTML and look at the result
emrun helloWebassembly.html
    이것이 바로 하크만이wasm을 하는 방식이다.더 쉬운 방법이 있어요.
    너는 가서 Diablo 1 game in the browser 너의 C++ 코드를 왼쪽에 놓아도 된다.그런 다음 WAT 섹션에서 내보내기 함수의 이름을 가져옵니다.이전에 보여진dd 함수 코드를 사용합니다: "Z3addii"는 함수 이름으로 뒤에서 사용할 것입니다.다운로드를 클릭하기만 하면 WASM 파일을 받을 수 있습니다.쉬웠어
    이제 웹 어셈블리는 주위의 모든 짜증나는 소음이 필요 없이 브라우저에서 직접 작업을 할 수 있다.
    <html>
  <head>
    <title>WASM test</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>

  <body>
    <script>
      const getRandomNumber = () => Math.floor(Math.random() \* 10000);

      WebAssembly.instantiateStreaming(
        fetch("https://012q1.sse.codesandbox.io/wasm/add.wasm")
      )
        .then(obj => obj.instance.exports.\_Z3addii)
        .then(add => {
          document.getElementById("addTarget").textContent = add(
            getRandomNumber(),
            getRandomNumber()
          );
        });
    </script>

    <h1>Résultat du C++</h1>
    <p id="addTarget"></p>
  </body>
</html>
    그렇습니다.이 html 페이지는 C++를 사용하여 WebAssembly로 컴파일할 수 있습니다!나는 모든 HTML과 뚜렷한 내용을 건너뛰고 InstanceStreaming 함수를 사용하여 11줄로 바로 갔다.this site에서 말한 바와 같이, 이 함수는 간단한 가져오기를 통해 웹 Assembly 모듈을 컴파일하고 실례화할 수 있습니다.
    그리고 앞에서 검색한 함수 이름을 통해dd 함수를 사용하고 DOM을 대체합니다.봐라!브라우저의 Javascript를 통해 C++ 프로그래밍을 수행합니다.이게 얼마나 미친 짓이야?듣자, 나는 심지어 너에게 Mozilla documentation의 시범을 보여 주었다.나는 그것을 여기에 묻고 놀겠다!
    너는 나에게 이렇게 하는 것이 매우 복잡하다고 말할 것이다. 너는 옳다.그들은 실례화된 자바스크립트 위치를 간단한 가져오기로 바꾸려고 노력하고 있다.그러니까 참아라, 곧 올 거야.
    codesandbox

    후기


    우리는 이미 5분 동안 이야기했으니, 나는 여기까지만 하겠다.만약 당신이 더 많은 Web Assembly에 대한 정보를 알고 싶을 뿐만 아니라, 당신은 아직 시간이 있습니다. 나는 당신 이 이 주제를 더욱 깊이 이해할 것을 건의합니다.다음 이야기에서 나는 인터넷이 다른 언어에 대한 개방이 무엇을 가져올지 기대하고 있다.많은 잠재력이 있는데, 나는 인터넷을 더욱 빨리 만들고 싶다.
    KVO & 알림
    Typescript는 혼란스러울 수 있습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage