نقشهٔ صفحه‌ها · ۱۲ صفحه

نوشته‌شده برای: مهندسان فرانت‌اندی که تازه با وب‌اسمبلی آشنا می‌شوند

1. 1

   وب‌اسمبلی برای مهندسان فرانت‌اند

   • این آشنایی نشان می‌دهد وب‌اسمبلی چگونه در مرورگر کنار جاوااسکریپت جا می‌گیرد.
   • وب‌اسمبلی یک قالب دستورالعمل باینریِ فشرده است که در یک ماشین مجازیِ ایزوله اجرا می‌شود.
   • بارگذاری، حافظه، ایمپورت و اکسپورت، قالب متنی، فراخوانی‌ها و خطاها را مرور می‌کنیم.
   • هدف: در پایان بتوانید یک ماژول کوچک را بارگذاری و از جاوااسکریپت صدا بزنید.
2. 2

   چرا وب‌اسمبلی به وجود آمد

   • جاوااسکریپت انعطاف‌پذیر است، اما ماهیت پویایش کارایی قابل پیش‌بینی را برای محاسبات سنگین دشوار می‌کند.
   • وب‌اسمبلی برای زبان‌هایی مثل C و C++ و Rust یک هدف کامپایلِ نوع‌دار و سطح پایین فراهم می‌کند.
   • کتابخانه‌های بومیِ موجود را می‌توان در وب دوباره به کار برد، بی‌آنکه بازنویسی شوند.
   • وب‌اسمبلی مکمل جاوااسکریپت است نه جایگزین آن؛ DOM و کد اتصال همچنان با جاوااسکریپت است.
3. 3

   پشته از مرورگر تا ماشین

   • در بالای پشته کد منبع شما قرار دارد که به زبانی مثل Rust یا C++ نوشته شده است.
   • کامپایلر آن را به یک ماژول باینری wasm تبدیل می‌کند.
   • موتور مرورگر ماژول را اعتبارسنجی می‌کند و به کد ماشینِ بومی کامپایل می‌کند.
   • ماژول در محیطی ایزوله اجرا می‌شود و فقط از راه APIهای جاوااسکریپت به دنیای بیرون می‌رسد.
4. 4

   دریافت، کامپایل و نمونه‌سازی یک ماژول

   • نخست فایل wasm را مثل هر منبع شبکه‌ای دیگر دریافت کنید.
   • سپس بایت‌ها را به یک WebAssembly.Module کامپایل کنید؛ در این گام اعتبارسنجی هم انجام می‌شود.
   • نمونه‌سازی ماژول یک Instance می‌سازد که اکسپورت‌ها و حافظهٔ آن را در خود دارد.
   • تابع instantiateStreaming هم‌زمان با دانلود کامپایل می‌کند و به نوع MIME با مقدار application/wasm نیاز دارد.
5. 5

   حافظهٔ خطی: یک آرایهٔ بایتیِ قابل بزرگ‌شدن

   • حافظهٔ خطی یک آرایهٔ پیوسته از بایت‌هاست که ماژول آن را می‌خواند و می‌نویسد.
   • جاوااسکریپت آن را یک ArrayBuffer می‌بیند، پس آرایه‌های نوع‌دار می‌توانند همان بایت‌ها را ببینند.
   • اندازهٔ حافظه بر حسب صفحه‌های ۶۴ کیلوبایتی است و با memory.grow بزرگ می‌شود.
   • بزرگ‌کردن حافظه ممکن است بافر قدیمی را جدا کند، پس پس از آن نماهای آرایهٔ نوع‌دار را دوباره بسازید.
6. 6

   ایمپورت و اکسپورت میان ماژول و جاوااسکریپت

   • ماژول ایمپورت‌ها را اعلام می‌کند؛ یعنی تابع‌ها یا مقدارهایی که از میزبان نیاز دارد.
   • اکسپورت‌ها تابع‌ها، حافظه و متغیرهای سراسری‌ای هستند که ماژول در اختیار جاوااسکریپت می‌گذارد.
   • ایمپورت‌ها هنگام نمونه‌سازی ماژول در یک شیء ایمپورت فراهم می‌شوند.
   • ماژول از همین مرز به‌طور غیرمستقیم لاگ می‌گیرد، رسم می‌کند یا به DOM دسترسی پیدا می‌کند.
7. 7

   خواندن قالب متنی WAT

   • WAT شکل متنی و خوانای قالب باینری است.
   • این قالب از عبارت‌های S استفاده می‌کند: پرانتزهای تودرتو مثل (module (func ...)).
   • تابع‌ها پارامترها و نتیجهٔ نوع‌دار اعلام می‌کنند، مثل (param i32) و (result i32).
   • دستورها روی پشته کار می‌کنند؛ برای نمونه local.get مقداری را روی پشته می‌گذارد و i32.add دو مقدار برمی‌دارد.
8. 8

   گام‌به‌گام در یک فراخوانی

   • جاوااسکریپت یک تابع اکسپورت‌شده را با آرگومان‌هایی صدا می‌زند.
   • آرگومان‌ها به نوع‌های وب‌اسمبلی مثل i32 یا f64 تبدیل می‌شوند.
   • دستورهای تابع روی ماشین پشته‌ایِ موتور اجرا می‌شوند.
   • نتیجه دوباره به یک مقدار جاوااسکریپت تبدیل می‌شود و به فراخواننده برمی‌گردد.
9. 9

   مرور یک ماژول کوچک با توضیح خط‌به‌خط

   • ماژول نمونهٔ ما تابعی اکسپورت می‌کند که دو عدد i32 را با هم جمع می‌زند.
   • خط func دو پارامتر i32 و یک نتیجهٔ i32 اعلام می‌کند.
   • بدنه با local.get هر دو پارامتر را روی پشته می‌گذارد و سپس i32.add را اجرا می‌کند.
   • خط export به تابع نامی می‌دهد که جاوااسکریپت بتواند آن را صدا بزند.
10. 10

    فراخوانی تابع‌های اکسپورت‌شده از جاوااسکریپت

    • پس از نمونه‌سازی، اکسپورت‌ها روی instance.exports به شکل تابع‌های معمولیِ قابل فراخوانی قرار می‌گیرند.
    • آن‌ها را مثل تابع‌های جاوااسکریپت صدا بزنید، برای نمونه instance.exports.add(2, 3).
    • عددها مستقیم رد می‌شوند؛ رشته‌ها و شیءها باید در حافظهٔ خطی رمزگذاری شوند.
    • فراخوانی‌ها را درشت نگه دارید، چون عبورهای ریزِ پرشمار میان جاوااسکریپت و وب‌اسمبلی هزینهٔ اضافه دارد.
11. 11

    تله‌ها: وقتی ماژول با خطا متوقف می‌شود چه رخ می‌دهد

    • تله یعنی توقف فوری، وقتی ماژول کاری غیرمجاز انجام می‌دهد.
    • نمونه‌ها: دسترسی بیرون از محدودهٔ حافظه، تقسیم عدد صحیح بر صفر و دستور unreachable.
    • در جاوااسکریپت، تله به شکل استثنای WebAssembly.RuntimeError ظاهر می‌شود.
    • می‌توانید آن را با try/catch بگیرید، اما وضعیت ماژول ممکن است دیگر قابل اعتماد نباشد.
12. 12

    پشتیبانی در مرورگرهای اصلی امروز

    • قابلیت‌های پایهٔ وب‌اسمبلی در همهٔ مرورگرهای اصلی امروز اجرا می‌شوند: Chrome، Firefox، Safari و Edge.
    • پیشنهادهای تازه‌تر، مثل threads یا garbage collection، در زمان‌های متفاوتی عرضه می‌شوند.
    • پیش از تکیه بر قابلیت‌های اختیاری، وجودشان را در زمان اجرا بررسی کنید.
    • برای قابلیت‌هایی که مخاطبانتان نیاز دارند، یک جدول سازگاری مثل جدول MDN را ببینید.