JavaScript'te Paylaşılan Belleğe Giriş

Paylaşılan hafıza JavaScript'in gelişmiş bir özelliği olup, iş parçacığı (bir işlemin eşzamanlı olarak yürütülen bölümleri) kaldıraç yapabilir. Hafızaların paylaşılması iş parçacığı arasında güncellenmiş veriyi geçme zorluğu ve tüm başlıklar paylaşılan hafızada aynı verilere erişebilir ve bunları güncelleyebilir..

Bu kulağa hoş gelmiyor mu? Neredeyse. Bu yayında göreceğiz JavaScript’te paylaşılan hafızanın nasıl kullanılacağı ve gerçekten yapmak istediğin şeyin bu olup olmadığına nasıl karar verileceği.

Paylaşılan hafızanın avantajları ve dezavantajları

Kullanırız web çalışanları için JavaScript'te konu yarat. Web İşçileri API'si, kullanılabilecek çalışan iş parçacıkları oluşturmamıza izin veriyor. arka planda kod yürütmek böylece ana iş parçacığı, UI olaylarını işleyerek ve kullanıcı arayüzünün donmamasını sağlayarak yürütülmesine devam etmekte özgürdür..

İşçi konuları ana iplik ve birbirleriyle eşzamanlı olarak çalıştırın. Bir görevin farklı bölümlerinin bu eşzamanlı olarak yürütülmesi zaman tasarrufu sağlar. Daha hızlı bitirirsiniz, ancak kendi problemleri de vardır..

Her iş parçacığından emin olma Gerekli kaynakları alır ve zamanında iletişim kurar. Bir talihsizliğin şaşırtıcı sonuçlara yol açabileceği başlı başına bir iştir. Ya da eğer bir konu veriyi değiştiriyor, diğeri onu okuyor aynı zamanda, sence diğer konu ne görecek? Güncellenen veya eski veriler?

Bununla birlikte, web çalışanlarının batırılması kolay değildir. Mesajları kullanarak iletişimleri sırasında, birbirlerine gönderdikleri veriler orijinal değil, kopya, yani yapmazlar pay Aynı veri. Onlar veri kopyalarını birbirine geçirmek ihtiyaç duyulduğunda.

Ancak paylaşım önemlidir ve birden fazla iş parçacığının aynı anda aynı verilere bakması ve bunları değiştirmesi gerekebilir. Yani, paylaşımı yasaklamak büyük bir hayır-hayır. İşte burası SharedArrayBuffer nesne resme gelir. Bize izin verecek birden fazla iş parçacığı arasında ikili veri paylaşma.

`SharedArrayBuffer` nesne

Verilerin kopyalarını dişler arasında geçirmek yerine, kopyalarını geçmek SharedArrayBuffer nesne. bir SharedArrayBuffer nesne verilerin kaydedildiği hafızaya.

Yani, ne zaman kopyalarını SharedArrayBuffer dişler arasında geçirilir, onlar hepsi hala aynı hafızaya işaret edecek Orijinal verilerin kaydedildiği yer. Böylece iplikler aynı hafızadaki verileri görüntüleyin ve güncelleyin..

Web çalışanları olmadan paylaşılan hafıza

Bir web çalışanının paylaşılan hafızayı kullanmadan nasıl çalıştığını görmek için alt iş parçacığı oluştur ve ona bazı veriler iletmek.

index.html dosya tutar ana senaryo içinde etiketi, aşağıda gördüğünüz gibi:

 const w = yeni İşçi ('worker.js'); var n = 9; w.postMessage (n);

worker.js dosya taşır çalışan komut dosyası:

 onmessage = (e) => console.group ('[işçi]'); console.log ('Ana dizinden veri alındı:% i', e.data); console.groupEnd ();

Yukarıdaki kodu kullanarak aşağıdakileri elde ederiz: konsolda çıkış:

 [işçi] Ana konudan alınan veriler: 9

Söz konusu gönderiyi web çalışanlarına yukarıdaki kod parçalarının tam açıklaması için okuyabilirsiniz.

Şimdilik, verilerin olduğunu unutmayın. dişler arasında ileri geri gönderildi kullanmak postMessage () yöntem. Veri diğer taraftan alınan mesaj olay işleyicisi, etkinliğin değeri olarak veri özellik.

Şimdi, eğer biz veriyi değiştir alıcı sonunda güncellenecek mi? Bakalım:

 const w = yeni İşçi ('worker.js'); var n = 9; w.postMessage (n); n = 1;

Beklendiği gibi veri var değil güncellendi:

 [işçi] Ana konudan alınan veriler: 9

Niçin öyle olsun ki? Onun Ana senaryodan işçiye gönderilen bir klon.

Web çalışanları ile paylaşılan hafıza

Şimdi yapacağız kullan SharedArrayBuffer nesne Aynı örnekte. Yeni bir tane yaratabiliriz SharedArrayBuffer örnek olarak kullanmak yeni anahtar kelime. Yapıcı bir parametre alır; bir bayt cinsinden uzunluk değeri, arabellek boyutunu belirleme.

 const w = yeni İşçi ('worker.js'); buff = yeni SharedArrayBuffer (1); var arr = yeni Int8Array (buff); / * ayar verileri * / arr [0] = 9; / * arabellek (kopya) işçisine * / w.postMessage (buff) gönderme;

Bir not SharedArrayBuffer nesne sadece paylaşılan hafıza alanını temsil eder. için ikili verileri görme ve değiştirme, uygun bir veri yapısı kullanmamız gerekiyor ( TypedArray veya bir Veri görünümü nesne).

İçinde index.html yukarıdaki dosya, yeni SharedArrayBuffer yalnızca bir bayt uzunluğunda oluşturulur. O zaman yeni Int8Array, hangisi TypedArray nesneler için kullanılır veriyi “9” sağlanan bayt alanında.

 onmessage = (e) => var arr = yeni Int8Array (e.data); console.group ([işçi] '); console.log ('Ana dizinden alınan veriler:% i', arr [0]); console.groupEnd ();

Int8Array İşçide ayrıca tampondaki verileri görüntüle.

Konsolda beklenen değer görünüyor tam olarak istediğimiz şey işçi ipliğinden:

 [işçi] Ana konudan alınan veriler: 9

Şimdi hadi ana konudaki verileri güncelle değişimin işçiye yansıdığını görmek için.

 const w = yeni İşçi ('worker.js'), buff = yeni SharedArrayBuffer (1); var arr = yeni Int8Array (buff); / * ayar verileri * / arr [0] = 9; / * arabellek (kopya) işçisine * / w.postMessage (buff) gönderme; / * verilerin değiştirilmesi * / arr [0] = 1;

Ve aşağıda gördüğünüz gibi güncelleme İşçinin içine yansıtır!

 [işçi] Ana iş parçacığından alınan veriler: 1

Ancak, ayrıca kod başka yollarla çalışması gerekiyor: işçi içindeki değer ilk önce değiştiğinde ayrıca güncellenmesi gerekiyor ana iplikten basıldığında.

Bu durumda kodumuz şöyle görünür:

 onmessage = (e) => var arr = yeni Int8Array (e.data); console.group ([işçi] '); console.log ('Ana dizinden alınan veriler:% i', arr [0]); console.groupEnd (); / * verilerin değiştirilmesi * / arr [0] = 7; / * ana dizine gönderme * / postMessage (");

İşçilerdeki veriler değiştirildi ve bir Ana konuya boş bir mesaj gönderildi Tampondaki verilerin değiştirildiğini ve çıkacak ana iş parçacığına hazır olduğunu bildiren.

 const w = yeni İşçi ('worker.js'), buff = yeni SharedArrayBuffer (1); var arr = yeni Int8Array (buff); / * ayar verileri * / arr [0] = 9; / * arabellek (kopya) işçisine * / w.postMessage (buff) gönderme; / * verilerin değiştirilmesi * / arr [0] = 1; / * işçi değiştikten sonra verileri yazdırma * / w.onmessage = (e) => console.group ('[main]'); console.log ('Çalışan iş parçacığından güncellendi verileri:% i', arr [0]); console.groupEnd ();

Ve bu da işe yarıyor! Tampondaki veriler, çalışan içindeki verilerle aynı.

 [işçi] Ana iş parçacığından alınan veriler: 1 [ana] Çalışan iş parçacığından alınan veriler güncellendi: 7

Değer her iki durumda da güncellenmiş görünüyor; hem ana hem de çalışan iş parçacığı aynı verileri görüntülüyor ve değiştiriyor.

Son sözler

Daha önce de belirttiğim gibi, paylaşılan hafızayı JavaScript’te kullanmak olumsuz taraf değil. Bunu sağlamak için geliştiricilere kalmış yürütme sırası tahmin edildiği gibi gerçekleşir ve hiçbir iki konu aynı verileri almak için yarışmıyor çünkü kimse kupayı kimin alacağını bilmiyor.