JavaScriptのArrayBufferとSharedArrayBuffer、パート2：新しい言語オブジェクトの紹介

前回 、 ArrayBufferとSharedArrayBufferについての議論の準備として、メモリ管理へのさまざまなアプローチを検討しました。 覚えておく必要がありますが、JSエンジンはメモリを操作する際に仲介役の役割を果たしますが、新しいオブジェクトはプログラマーにいくつかの手動ツールを提供します。 なぜこれが必要なのでしょうか？

JavaScriptとメモリ管理

自動メモリ管理は、開発の容易さと追加のシステム負荷との間の妥協です。 場合によっては、この追加の負荷がパフォーマンスの問題につながります。









自動メモリ管理は開発を簡素化しますが、プログラムのパフォーマンスに影響します



たとえば、JSで変数を作成する場合、エンジンはこの変数がどのような型になるか、メモリでどのように表現する必要があるかを推測する必要があります。 このような推測は、エンジンが実際に変数を保存するのに必要な量よりも多くのメモリを予約するという事実につながります。 データのタイプによっては、割り当てられたメモリが必要なサイズの2〜8倍になる場合があります。 これは、メモリの非効率的な使用につながる可能性があります。



これに加えて、JSオブジェクトを作成および使用するためのテンプレートによっては、ガベージコレクションが複雑になる場合があります。 プログラマがメモリを手動で管理する場合、特定のプロジェクトのニーズを満たすメモリの割り当てと解放の戦略を選択することにより、このような問題を回避できます。



ただし、多くの場合、自動メモリ管理は特定の問題を引き起こしません。 ほとんどのJSアプリケーションは、プログラマーが手動のメモリ管理について真剣に考えるように、パフォーマンスをそれほど要求しません。 また、多くの場合、手動のメモリ管理は生産性、少なくともプログラマの生産性に悪影響を及ぼす可能性さえあります。



ただし、優先順位がプログラムの速度である場合は、ArrayBufferとSharedArrayBufferに目を向けることが理にかなっています。









手動メモリ管理とは、コードで発生していることをより完全に制御し、高性能ソリューションを実現することを意味しますが、より多くのメンタルワークとプログラム設計への注意が必要です。

ArrayBufferの仕組み

一般に、ArrayBufferとのやり取りは、他のJS配列の操作に似ています。 ただし、重要な機能が1つあります。 それは、ArrayBufferを使用するとき、プログラマーがオブジェクトや文字列のようなものをその中に入れることができないという事実にあります。 この配列に書き込むことができるのはバイトのみで、これは数字として表すことができます。









左側の通常の配列には、数字、オブジェクト、文字列などを含めることができます。 ArrayBufferにはバイトのみを含めることができます



実際、ArrayBufferに直接バイトを追加しないことに注意してください。 このオブジェクトは、バイトのサイズや、さまざまな数値をバイトに変換する方法を知りません。



ArrayBufferは、同じ行に書き込まれたゼロと1のシーケンスとして表すことができます。 このオブジェクトは、要素の境界がどこにあるかを認識していません。









ゼロと1のシーケンスとしてのArrayBuffer



ArrayBufferからの生データを意味のあるものとして認識し、ゼロと1のストリームをブロックに分割するには、 DataViewオブジェクトまたは型付き配列にラップする必要があります。



たとえば、 Int8Array型の配列をラッパーとして使用すると、ArrayBufferに格納されているものが8ビットのフラグメントに分割されるという事実につながります。









ゼロと1のシーケンスは、8ビットのブロックに分割されます



このような状況で型付きUint16Array配列を使用すると、ArrayBufferの内容が16ビットのフラグメントに分割され、このデータが符号なし整数として解釈されるようになります。









ゼロと1のシーケンスは16ビットのブロックに分割されます



同じArrayBufferは、複数のラッパーのベースとして機能できます。 このアプローチでは、同じ操作で異なる結果が得られます。



たとえば、Int8Array型の配列を介してアクセスされるArrayBufferの最初と2番目の要素は、Uint16Arrayを介してArrayBufferを操作するときに取得される最初と2番目の要素とは異なることを以下に示します。 同じビットシーケンスは、異なるタイプのデータ構造を介して作業する場合、異なって見えます。









異なるラッパーを使用して同じArrayBufferにアクセスする



この状況では、ArrayBufferは通常のRAMと非常によく似ています。 Cのような言語で利用可能なダイレクトメモリアクセスのようなものをエミュレートします。



JSプログラマーにメモリへの直接アクセスを与える方が良いかどうか、ArrayBufferを超える追加の抽象化レベルが必要な理由を疑問に思うかもしれません。 これは、直接メモリアクセスがセキュリティ上の問題の原因になる可能性があるためです。

SharedArrayBufferとは何ですか？

SharedArrayBufferとは何かについて話すには、まずJavaScriptがコードと並行して実行される方法を理解する必要があります。



並行性はプログラムを高速化します。 これは、たとえば、データ処理をより高速に実行したり、ユーザーインターフェイスに関連するイベントに少ない遅延で応答したりするのに役立ちます。 並列化する予定のタスクは、最初にサブタスクに分割する必要があります。



典型的なJSアプリケーションでは、メインスレッドがすべての作業を行います。 彼は、JavaScriptコード、DOM、およびWebページのレイアウトを担当するフルサイクル開発者を連想させます。



メインスレッドの負荷を軽減するものはすべて、アプリケーションのパフォーマンスに有益な効果をもたらします。 特定の状況では、ArrayBufferを使用すると、メインスレッドに割り当てられる作業量を減らすことができます。









メインスレッドを、テーブルの上に横たわる書類の山で表される通常の作業の一部から解放すると、これはアプリケーションのパフォーマンスに有益な影響を与えます。



ただし、メインスレッドの作業量を減らすだけでは不十分な場合があります。 メインスレッドにアシスタントが必要になることがあります。



ほとんどのプログラミング言語では、いくつかのタスクは通常、スレッドまたはプロセスと呼ばれる構造を使用して並行して実行されます。 彼らの共同作業は、複数の人々がプロジェクトに取り組んでいる様子を思い起こさせます。 プロジェクトのフレームワーク内で解決されたタスクが互いに十分に独立している場合、複数のストリームで並行して解決できます。



JavaScriptでは、これはWeb Workers APIを使用して実装されます 。 特に、バックグラウンドタスクを操作するためのツールであるタイプworkerのオブジェクトについて話します。 JSのバックグラウンドタスクは、他の言語のスレッドやプロセスとは少し異なります。 特に、デフォルトでは、共有メモリはありません。









現在、2つのスレッドが作業を行っています。 それぞれのテーブルの紙の山は、前の図の半分です。 各スレッドは、別のスレッドに関連付けられていない独自のメモリ領域で動作します。



つまり、あるストリームから別のストリームに特定のデータを転送するには、そのデータをメモリ領域にコピーする必要があります。 これは、 postMessage関数を使用して行われます。



postMessage関数は、渡されたオブジェクトをシリアル化し、目的のバックグラウンドタスクに渡します。そこで、それらは逆シリアル化され、メモリに書き込まれます。









postMessage関数を使用すると、スレッド間のデータ交換を整理できます。



この方法でスレッド間でデータを転送するのは、かなり遅いプロセスです。



ArrayBufferに記録されているデータなど、一部のタイプのデータを使用して、いわゆるメモリ転送を実装できます。 2スレッドの例では、これは最初のスレッドに属する特定のメモリブロックを2番目のスレッドに転送することを意味します。 その後、2番目のスレッドはこのメモリブロックを操作できるようになり、最初のスレッドはアクセスできなくなります。









以前に最初のスレッドに属していたメモリブロックを2番目のスレッドに転送することによる、2つのスレッド間のメモリの分離。 最初のスレッドはこのメモリへのアクセスを失い、2番目のスレッドはこのメモリを使用できます。



同様のアプローチは場合によっては適用可能ですが、複数のスレッドを使用する目的が高性能データ処理である多くの状況では、複数のプロセスが同時に動作できる共有メモリが必要です。



SharedArrayBufferは、JS開発者にまさにこの機会を与えます。









2つのスレッドには、それぞれが操作できる共通のメモリ領域があります。



SharedArrayBufferのおかげで、ワーカーオブジェクトによって表される両方のバックグラウンドタスクである両方のスレッドは、同じメモリ領域に対してデータを読み書きできます。



つまり、このような状況では、スレッド間のデータ交換やpostMessage関数の使用時に避けられない遅延のためのシステムリソースの追加コストはありません。 両方のバックグラウンドタスクには、できるだけ早くメモリを操作する機能があります。



ただし、異なるスレッドからメモリへの即時アクセスには、いくつかの危険が伴います。 特に、これは競合状態につながる可能性があります。









同じメモリロケーションにアクセスするレーシングスレッド



この一連の資料の第3部では、流れのレースの状態について詳しく説明します。

SharedArrayBufferのサポート

近い将来、最も人気のあるブラウザにSharedArrayBufferのサポートが搭載されることが知られています。









ブラウザはSharedArrayBufferを歓迎します



SharedArrayBufferのサポートは、Safari（10.1）ですでに利用可能です。 次の行はFirefoxとChromeです。 彼らは夏の終わりまでにこの新しい施設のサポートを取得する予定です。 Edgeでは、おそらく秋にSharedArrayBufferが表示されます。



SharedArrayBufferはまもなくすべての主要なブラウザをサポートしますが、通常のアプリケーション開発者が直接使用することは期待されていません。 さらに、これは推奨されません。 SharedArrayBufferに基づいて構築された特別なツールを使用することをお勧めします。



SharedArrayBufferの新機能が、通常の開発者がプロ​​ジェクトでSharedArrayBufferを使用できるシンプルで安全なツールを作成するJSライブラリ開発者の関心を引くことを願っています。



さらに、SharedArrayBufferオブジェクトはプラットフォームの一部であるため、WebAssemblyで使用してスレッドサポートを実装できます。 これが発生すると、JSプログラマーは、信頼性が高く便利なマルチスレッド化組織で知られるRustなど、他の言語のものと類似した並列処理抽象化を使用できるようになります。

まとめ

ご覧のとおり、SharedArrayBufferはJSの並列プロセスの相互作用を新しいレベルに引き上げることができ、ArrayBufferとともに、開発者に手動メモリ管理の機会を提供します。



次回は、ライブラリ開発者がSharedArrayBufferに基づいたデータを使用してマルチスレッド作業用のツールを作成するときに使用できるツールについて説明します。 特に、JS Atomicsオブジェクトについて説明します。



親愛なる読者！ ArrayBufferおよびSharedArrayBufferプロジェクトにはどのようなアプリケーションがありますか？