녹슨 부분 및 WebAssembly 성능 향상🚀🚀🚀

브라우저에서 본 컴퓨터 코드를 실행하는 꿈은 결코 새로운 일이 아니다.많은 시도가 실패했다.그들은 모두 우리에게 교훈을 주었다.이러한 경험은 WebAssembly을 가능하게 했다.
WebAssembly는 브라우저에서 C, C++, Rust 등의 언어를 실행할 수 있습니다.
녹슨 것과 인터넷 조립에 관한 제 책 좀 보세요 here
그런데 Web Assembly가 뭐예요?린클라크의 here 또는 this 하이라이트 게시물을 보십시오.

TL;박사:

Rust의 도구 체인으로 WebAssembly 어플리케이션을 쉽게 작성할 수 있습니다.

성능을 향상시키려면 opt-level=3을 사용하십시오.

더 작은 패키지를 원한다면 opt-level="s"을 사용하세요.

우리 어떡하지?markdown 형식의 문자열을 받아서 HTML로 변환하는 WebAssembly 응용 프로그램을 만듭니다.

시작해보도록 하겠습니다.
지금까지 Rust는 WebAssembly의 가장 좋은 도구였다.그것은 언어와 잘 결합되어 있다.이로써 Rust는 WebAssembly를 진행하기에 가장 좋은 선택이 되었다.
우리는 시작하기 전에 녹 방지 페인트를 설치해야 한다.설치하려면 설치 설명서 here을 참조하십시오.
일단 녹이 끼면응용 프로그램을 만들기 시작합니다.

응용 프로그램 만들기
필요한 모든 도구 체인을 사용하여 WebAssembly 응용 프로그램을 만들려면 다음과 같이 하십시오.

npm init rust-webpack markdown-rust

이렇게 하면 Webpack과 함께 Rust+JavaScript 기반 응용 프로그램이 새로 만들어집니다.
디렉터리에 들어가기

cd markdown-rust

그것은 Cargo.toml과 package.json이 있다.
Rust 소스 파일은 src 디렉토리에 있고 JavaScript 파일은 js 디렉토리에 있습니다.또한 어플리케이션을 쉽고 빠르게 실행할 수 있도록 웹 패키지를 구성했습니다.Cargo.toml에는 다음이 포함됩니다.

[package]
# Some package information.

그리고 이 프로젝트는 다음 명령을 사용하여 dynamic library을 구축할 것이라고 설명합니다.

[lib]
crate-type = ["cdylib"]

또한 발표 프로필은 lto 로고를 사용하여 발표를 최적화해야 한다고 성명했습니다.

[profile.release]
lto = true

마지막으로 [features]과 [depdencies]을 추가했습니다.
지금 우리가 해야 할 일은 Rust에 markdown 라이브러리를 추가하는 것입니다. 이 라이브러리는 태그 (문자열) 를 HTML 문자열로 컴파일합니다.

[dependencies]
# some comments ......
wasm-bindgen = "0.2.45"
comrak = "0.6"

src/lib.rs에서 모든 내용물을 꺼내 다음과 같이 교체한다.
우리가 사용할 comrak 함수와 wasm_bindgen을 불러옵니다.

use comrak::{markdown_to_html, ComrakOptions};
use wasm_bindgen::prelude::*;

그럼 wasm_bindgen이 뭐예요?
WebAssembly는 JavaScript나 문서 API를 호출할 바인딩이 없습니다.사실 우리는 자바스크립트와 WebAssembly 사이에서만 숫자를 전달할 수 있다.그러나 이것은 항상 취할 수 있는 것이 아니다. 우리는 그것들 사이에서 JS 대상, 문자열, 클래스, 클립과 다른 것을 전달해야 한다.

How can we achieve that?

우리는 상기 대상을 숫자로 변환하는 데 도움을 주는 귀속 파일이나 접착 파일을 만들 수 있습니다.예를 들어, 각 문자를 문자 코드로 보내는 대신 문자열에 대해
우리는 이 문자열을 선형 메모리 배열에 넣은 다음 시작 인덱스(메모리에 있는 위치)와 그 길이를 다른 세계(또는 JavaScript)에 전달할 수 있습니다.다른 세계는 이 선형 메모리 진열에 접근해서 정보를 얻을 수 있을 것이다.
그러나 JavaScript와 WebAssembly 사이에 전달된 모든 값에 대해 이 동작을 실행하는 것은 시간이 걸리고 오류가 발생하기 쉽다.wasm_bindgen 도구는 귀속 파일을 자동으로 구축하는 데 도움을 주고 #[wasm_bindgen] 주석이 있는 샘플 코드를 삭제할 수 있습니다.
그러나 자바스크립트와 WebAssembly 모듈 사이의 경계를 뛰어넘는 횟수는 매우 조심해야 한다.우리가 횡단할수록 표현은 느려진다.
이제 태그 입력을 실제로 받고 HTML로 되돌아오는 parse라는 함수를 만듭니다.

#[wasm_bindgen]
pub fn parse(input: &str) -> String {
    markdown_to_html(&input.to_string(), &ComrakOptions::default())
}

#[wasm_bindgen] 주석은 문자열을 두 개의 숫자로 변환하는 모든 템플릿을 완성했습니다. 하나는 선형 메모리에서 문자열의 시작을 가리키는 바늘이고 다른 하나는 문자열의 길이를 가리키는 바늘입니다.#[wasm_bindgen]은 또한 JavaScript로 바인딩 파일을 생성합니다.

JavaScript를 주문할 때가 됐어요.❤️
지금 우리는 이미 WebAssembly 모듈을 준비했다.지금은 JavaScript를 사용할 때입니다.js/index.js의 모든 행을 삭제하고 다음과 같이 바꿉니다.
생성된 WebAssembly 모듈을 먼저 가져옵니다.Webpack을 사용하기 때문에 Webpack은 wasm_pack을 안내하고 wasm_bindgen을 사용하여 Rust를 WebAssembly 모듈로 전환한 다음에 필요한 귀속 파일을 생성합니다.wasm_pack은 Rust와 WebAssembly 응용 프로그램을 구축하고 포장하는 데 도움을 주는 도구입니다.Wasm pack here에 대한 추가 정보.
즉, pkg/index.js 파일만 가져오면 됩니다.이것이 wasm pack이 출력을 생성하는 곳입니다.

const rust = import('../pkg/index.js');

동적 가져오기는 promise를 만들고 해결되면 WebAssembly 모듈의 결과를 보여 줍니다.Rust 파일에 정의된 함수 parse을 다음과 같이 호출할 수 있습니다.

rust.then(module => {
    console.log(module.parse('#some markdown content')); 
});

또한 WebAssembly 모듈을 사용하여 컨텐트를 분석하는 데 필요한 시간도 계산합니다.

rust.then(module => {
    console.log(module.parse('#some markdown content'));

    const startWasm = performance.now();
    module.parse('#Heading 1');
    const endWasm = performance.now();

    console.log(`It took ${endWasm - startWasm} to do this in WebAssembly`);
});

비교를 위해 JavaScript를 사용하는 데 필요한 시간도 계산합니다.
JavaScript의 태그 라이브러리를 설치합니다.

npm install --save marked

설치 후 JavaScript 코드를 작성하여 태그 텍스트를 받고 HTML로 돌아갑니다.

// js/index.js
import marked from 'marked';
// some content goes here;

const markdown = '#Heading';

const startJs = performance.now();
console.log(marked(markdown));
const endJs = performance.now();

console.log(`It took ${endJs - startJs} to do this in JavaScript`);

애플리케이션을 실행하려면 npm run start을 사용하십시오.그러면 Webpack dev 서버가 시작되고 로컬 서버에서 컨텐츠가 제공됩니다.
이것은 매우 재미있는 성능 통계 데이터다.
Chrome과 Safari에서 자바스크립트의 성능은 WebAssembly보다 훨씬 좋다.그러나 Firefox에서 자바스크립트 버전은 WebAssembly보다 50% 느리다.
이는 다른 브라우저에 비해 Firefox의 WebAssembly 링크와 안내 속도가 매우 빠르기 때문이다.
번들 크기를 살펴보면 WebAssembly 파일의 크기는 7475KB이고 JavaScript 변형의 크기는 1009KB입니다.
지금 WebAssembly에 야유를 보내고 있다면 기다려 주십시오.
우리는 아직 어떠한 최적화도 추가하지 않았다.최적화를 추가하고 성능을 검사합시다.Cargo.toml 파일을 열고 [features] 섹션 위에 다음 섹션을 추가합니다.

[profile.dev]
lto = true
opt-level = 3

opt-level은 컴파일 프로젝트의 최적화 단계일 뿐이다.
이곳의 lto은 link-time-optimization을 가리킨다.

Note: This optimization level and lto should be added to the profile.release while working on the real application.

또한 wee_alloc을 사용하면 메모리 분배가 훨씬 적습니다.Cargo.toml에서 아래 내용을 주석하지 마십시오

[features]
default = ["wee_alloc"]

wee_alloc 파일에 메모리 할당을 추가합니다.

#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

이제 서버를 다시 시작합니다.
이제 WebAssembly의 진정한 성능 이점을 확인할 수 있습니다.
Chrome에서 WebAssembly 버전의 속도는 JavaScript 버전의 4배입니다.
Safari에서 JavaScript 변수는 2~3ms 사이이지만 WebAssembly 변수는 0-2ms 사이입니다.
Firefox는 최적화된 WebAssembly 코드를 사용했을 때도 최적화되지 않았을 때보다 50% 가까이 빨랐다.
현재 가장 중요한 번들 크기는 WebAssembly 1280KB, JavaScript 1009KB입니다.
또한 Rust 컴파일러가 속도가 아닌 크기를 최적화하도록 요청할 수도 있습니다.지정하려면 src/lib.rs을 opt-level으로 변경하십시오.

opt-level = "s"

WebAssembly는 여전히 뚜렷한 승자이지만, Chrome의 WebAssembly 횟수는 약간 증가했지만, 자바스크립트 변체보다 낮다.Safari와 Firefox 모두 WebAssembly에 더 높은 성능을 제공합니다.
WebAssembly의 가방 크기는 1220, JavaScript의 가방 크기는 1009KB로 더 작아졌습니다.
또한 Rust 컴파일러는 s을 지원하여 파일 크기를 더욱 줄입니다.

opt-level = "z"

WebAssembly의 가방 크기는 약 1161KB로 더 줄었고 자바스크립트의 가방 크기는 1009KB였다.
41ms에서 140ms 사이에 opt-level = "z"을 사용할 때 크롬에서 WebAssembly 모듈의 성능 파동이 매우 크다.
Mac Edition IE Canary의 성능은 크롬 Edition과 거의 같습니다.
패키지의 크기에 더 관심이 있지만 현재 v8의 성능이 신뢰할 수 없습니다. opt-level='z'을 사용하십시오.
나는 이것이 너에게 동력을 주어 너의 멋진 Web Assembly 여행을 시작할 수 있기를 바란다.만약 당신에게 어떤 문제/건의/내가 무엇을 놓쳤다고 생각된다면 마음대로 평론을 추가하세요.
만약 네가 이 글을 좋아한다면, 너는 아마도 나의 녹슨 것과 인터넷 조립에 관한 책을 좋아할 것이다.here 보기
너는 나를 따라와도 된다.
만약 당신이 이 문장을 좋아한다면, 좋아하거나 평론을 남겨 주세요.❤️