WebAssembly 1.0 dört yıl önce yayınlandı, ancak geliştirme burada durmadı. aracılığıyla yeni özellikler eklenir. teklif standardizasyon süreci. Genellikle web’deki yeni özelliklerde olduğu gibi, uygulama sırası ve zaman çizelgeleri farklı motorlar arasında önemli ölçüde farklılık gösterebilir. Bu yeni özellikleri kullanmak istiyorsanız, hiçbir kullanıcınızın dışarıda bırakılmadığından emin olmanız gerekir. Bu makalede, bunu başarmak için bir yaklaşım öğreneceksiniz.
Bazı yeni özellikler, ortak işlemler için yeni talimatlar ekleyerek kod boyutunu iyileştirir, bazıları güçlü performans ilkelleri ekler ve diğerleri, geliştirici deneyimini ve web’in geri kalanıyla entegrasyonu geliştirir.
Tekliflerin tam listesini ve ilgili aşamalarını şu adreste bulabilirsiniz: resmi repo veya resmi olarak motorlardaki uygulama durumlarını takip edin özellik yol haritası sayfa.
Tüm tarayıcıların kullanıcılarının uygulamanızı kullanabilmesini sağlamak için hangi özellikleri kullanmak istediğinizi bulmanız gerekir. Ardından, tarayıcı desteğine göre bunları gruplara ayırın. Ardından, bu grupların her biri için kod tabanınızı ayrı ayrı derleyin. Son olarak, tarayıcı tarafında, desteklenen özellikleri tespit etmeniz ve ilgili JavaScript ve Wasm paketini yüklemeniz gerekir.
Toplama ve gruplama özellikleri #
Örnek olarak rastgele bir özellik seti seçerek bu adımları gözden geçirelim. Diyelim ki, boyut ve performans nedenleriyle kitaplığımda SIMD, iş parçacıkları ve istisna işlemeyi kullanmak istediğimi belirledim. Onların tarayıcı desteği Şöyleki:
Her kullanıcının en iyileştirilmiş deneyimi aldığından emin olmak için tarayıcıları aşağıdaki gruplara ayırabilirsiniz:
- Chrome tabanlı tarayıcılar: Konular, SIMD ve istisna işlemenin tümü desteklenir.
- Firefox: Thread ve SIMD desteklenir, istisna işleme desteklenmez.
- Safari: Konular desteklenir, SIMD ve istisna işleme desteklenmez.
- Diğer tarayıcılar: yalnızca temel WebAssembly desteğini varsayar.
Bu döküm, her tarayıcının en son sürümündeki özellik desteğine göre ayrılır. Modern tarayıcılar her zaman yeşildir ve otomatik olarak güncellenir, bu nedenle çoğu durumda yalnızca en son sürüm hakkında endişelenmeniz gerekir. Bununla birlikte, temel WebAssembly’ı yedek kohort olarak dahil ettiğiniz sürece, eski tarayıcılara sahip kullanıcılar için bile çalışan bir uygulama sağlayabilirsiniz.
Farklı özellik kümeleri için derleme #
WebAssembly, çalışma zamanında desteklenen özellikleri algılamak için yerleşik bir yola sahip değildir, bu nedenle modüldeki tüm yönergeler hedefte desteklenmelidir. Bu nedenle, kaynak kodunu bu farklı özellik setlerinin her biri için ayrı ayrı Wasm’da derlemeniz gerekir.
Her araç zinciri ve derleme sistemi farklıdır ve bu özellikleri nasıl değiştireceğiniz konusunda kendi derleyicinizin belgelerine başvurmanız gerekir. Basitlik adına, aşağıdaki örnekte tek dosyalı bir C++ kitaplığı kullanacağım ve bunun Emscripten ile nasıl derleneceğini göstereceğim.
kullanacağım simd aracılığıyla SSE2 öykünmesiüzerinden ileti dizileri Pthread’ler kitaplık desteği ve arasında seçim yapın Wasm istisna işleme ve geri dönüş JavaScript uygulaması:
# First bundle: threads + SIMD + Wasm exceptions
$ emcc main.cpp -o main.threads-simd-exceptions.mjs -pthread -msimd128 -msse2 -fwasm-exceptions
# Second bundle: threads + SIMD + JS exceptions fallback
$ emcc main.cpp -o main.threads-simd.mjs -pthread -msimd128 -msse2 -fexceptions
# Third bundle: threads + JS exception fallback
$ emcc main.cpp -o main.threads.mjs -pthread -fexceptions
# Fourth bundle: basic Wasm with JS exceptions fallback
$ emcc main.cpp -o main.basic.mjs -fexceptions
C++ kodunun kendisi kullanabilir #ifdef __EMSCRIPTEN_PTHREADS__ Ve #ifdef __SSE2__ aynı işlevlerin paralel (iş parçacıkları ve SIMD) uygulamaları ile derleme zamanındaki seri uygulamaları arasında koşullu olarak seçim yapmak. Şöyle görünecek:
void process_data(std::vectorint>& some_input) {
#ifdef __EMSCRIPTEN_PTHREADS__
#ifdef __SSE2__
// …implementation using threads and SIMD for max speed
#else
// …implementation using threads but not SIMD
#endif
#else
// …fallback implementation for browsers without those features
#endif
}
İstisna işlemeye gerek yok #ifdef yönergeler, çünkü derleme bayrakları aracılığıyla seçilen temel uygulamadan bağımsız olarak C++ ile aynı şekilde kullanılabilir.
Doğru paketi yükleme #
Tüm özellik grupları için paketler oluşturduktan sonra, ana JavaScript uygulamasından doğru olanı yüklemeniz gerekir. Bunu yapmak için önce mevcut tarayıcıda hangi özelliklerin desteklendiğini tespit edin. ile yapabilirsiniz wasm-özellik-algılama kütüphane. İle birleştirerek dinamik içe aktarmaen optimize paketi herhangi bir tarayıcıya yükleyebilirsiniz:
import { simd, threads, exceptions } from 'https://unpkg.com/wasm-feature-detect?module';let initModule;
if (await threads()) {
if (await simd()) {
if (await exceptions()) {
initModule = import('./main.threads-simd-exceptions.mjs');
} else {
initModule = import('./main.threads-simd.mjs');
}
} else {
initModule = import('./main.threads.mjs');
}
} else {
initModule = import('./main.basic.mjs');
}
const Module = await initModule();
// now you can use `Module` Emscripten object like you normally would
Son sözler #
Bu gönderide, farklı özellik kümeleri için paketlerin nasıl seçileceğini, oluşturulacağını ve paketler arasında nasıl geçiş yapılacağını gösterdim.
Özellik sayısı arttıkça, özellik kohortlarının sayısı sürdürülemez hale gelebilir. Bu sorunu hafifletmek için, gerçek dünyadaki kullanıcı verilerinize dayalı olarak özellik gruplarını seçebilir, daha az popüler olan tarayıcıları atlayabilir ve biraz daha az optimum kohortlara geri dönmelerine izin verebilirsiniz. Uygulamanız tüm kullanıcılar için çalışmaya devam ettiği sürece, bu yaklaşım aşamalı geliştirme ile çalışma zamanı performansı arasında makul bir denge sağlayabilir.
Gelecekte WebAssembly, desteklenen özellikleri algılamak ve modül içinde aynı işlevin farklı uygulamaları arasında geçiş yapmak için yerleşik bir yol elde edebilir. Bununla birlikte, böyle bir mekanizmanın kendisi, yukarıdaki yaklaşımı kullanarak koşullu olarak algılamanız ve yüklemeniz gereken bir MVP sonrası özellik olacaktır. O zamana kadar bu yaklaşım, tüm tarayıcılarda yeni WebAssembly özelliklerini kullanarak kod oluşturmanın ve yüklemenin tek yolu olmaya devam ediyor.