6분 안에 WebAssembly를 이해하세요.
10397 단어 webdevwebjavascriptwebassembly
종전
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++의 속도를 증명하지 않을 것이다. 단지 예를 들 뿐이다.
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에 대한 정보를 알고 싶을 뿐만 아니라, 당신은 아직 시간이 있습니다. 나는 당신 이 이 주제를 더욱 깊이 이해할 것을 건의합니다.다음 이야기에서 나는 인터넷이 다른 언어에 대한 개방이 무엇을 가져올지 기대하고 있다.많은 잠재력이 있는데, 나는 인터넷을 더욱 빨리 만들고 싶다.
Reference
이 문제에 관하여(6분 안에 WebAssembly를 이해하세요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jesuisundev/understand-webassembly-in-6-minutes-2105텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)