JavaScript のファイル API、ストリーム API、Web 暗号化 API を学習します。

この記事では、javascript に関する関連知識を提供し、主に JavaScript の File API、Streams API、Web Cryptography API の関連内容を紹介します。

[関連する推奨事項: JavaScript ビデオ チュートリアル ]

1. アトミックと SharedArrayBuffer

マルチ コンテキスト アクセス SharedArrayBuffer 、バッファ上で同時に操作が実行されると、リソース競合の問題が発生する可能性があります。 Atomics API を使用すると、バッファ上で一度に 1 つの操作のみを実行できるようにすることで、複数のコンテキストが SharedArrayBuffer を安全に読み書きできるようになります。
アトミック操作の性質により、オペレーティング システムやコンピューター ハードウェアが通常は自動的に実行する最適化 (命令の並べ替えなど) が不可能になります。また、アトミック操作により、同時にメモリにアクセスすることができなくなります。不適切に使用すると、プログラムの実行速度が低下する可能性があります。このため、Atomics API の本来の設計意図は、最小限だが安定したコードに基づいて複雑なマルチスレッド JavaScript プログラムを構築することです。アトミックな動作。

2. アトミック操作の基本

1. 算術およびビット操作メソッド

Atomics API は、インプレースで実行するための単純なメソッドのセットを提供します操作 操作を変更します。 ECMA 仕様では、これらのメソッドは AtomicReadModifyWrite オペレーションとして定義されています。これらのメソッドは内部的に、SharedArrayBuffer 内の場所から値を読み取り、算術演算およびビット単位の演算を実行し、最後に結果を同じ場所に書き込みます。これらの操作のアトミックな性質は、上記の読み取り、変更、およびライトバック操作が順番に実行され、他のスレッドによって中断されないことを意味します。

//创建大小为1的缓冲区let sharedArrayBuffer = new SharedArrayBuffer(1);
//基于缓冲创建Unit8Arraylet typedArray = new Unit8Array(sharedArrayBuffer);
//所有ArrayBuffer全部初始化为0console.log(typedArray);
//Unit8Array[0]
//对索引0处的值执行原子加10Atomics.add(typedArray,0,10);
//Unit8Array[10]
//对索引0处的值执行原子减10Atomics.sub(typedArray,0,10);
//Unit8Array[0]

2. アトミックな読み取りと書き込み

ブラウザの JavaScript コンパイラと CPU アーキテクチャ自体は、プログラムの実行効率を向上させるために命令を再配置する権限を持っています。通常の状況では、JavaScript のシングルスレッド環境でいつでもこの最適化を実行できますが、マルチスレッドでの命令の再配置はリソースの競合を引き起こす可能性があり、トラブルシューティングが非常に困難です。
Atomics API は、この問題を 2 つの主な方法で解決します。

• すべてのアトミック命令の順序が相互に並べ替えられることはありません。

• アトミック読み取りまたはアトミック書き込みを使用すると、すべての命令がアトミック読み取りおよび書き込みに対して並べ替えられることがなくなります。

Atomics.load() と Atomics.store() は、バッファー値の読み取りと書き込みに加えて、「コード フェンス」を構築することもできます。 JavaScript エンジンは、非アトミックな命令を、load() および store() に関連してローカルに再配置できることを保証しますが、この再配置はアトミックな読み取りおよび書き込みの境界を侵害しません。

const sharedArrayBuffer = new SharedArrayBuffer(4);
const view = new Unit32Array(sharedArrayBuffer);
//执行非原子写view[0] = 1;
//非原子写可以保证在这个读操作之前完成，因此这里一定会读到1console.log(Atomics.load(view,0));
//1
//执行原子写Atomics.store(view,0,2);
//非原子读可以保证在原子写完成后发生，这里一定会读到2console.log(view[0]);
//2

3. アトミック交換

最初に読み取り、次に書き込みを継続的かつ中断なく行うために、Atomics API には、exchange() と CompareExchange() という 2 つのメソッドが用意されています。 。 Atomics.exchange() は、他のスレッドが交換を中断しないことを保証する単純な交換を実行します。

const sharedArrayBuffer = new SharedArrayBuffer(4);
const view = new Unit32Array(sharedArrayBuffer);
//在索引0处写入10Atomics.store(view,0,10);
//从索引0处读取值，然后在索引0处写入5console.log(Atomics.exchange(view,0,5));
//10
//从索引0处读取值console.log(Atomics.load(view,0));
//5

マルチスレッド プログラムでは、最後に値が読み取られてから他のスレッドがその値を変更していない場合にのみ、スレッドが共有バッファに書き込むことができます。値が変更されていない場合、このスレッドは更新された値を安全に書き込むことができます。値が変更されている場合、書き込み操作を実行すると、他のスレッドによって計算された値が破棄されます。この種のタスクのために、Atomics API は Compare-Exchange() メソッドを提供します。このメソッドは、ターゲット インデックスの値が期待値と一致する場合にのみ書き込み操作を実行します。

4. アトミック Futex の操作とロック

何らかのロック メカニズムがなければ、マルチスレッド プログラムは複雑な要件をサポートできません。この目的を達成するために、Atomics API は Linux Futex (高速ユーザー空間ミューテックス) を模倣するメソッドを提供します。これらのメソッドは、それ自体は非常に単純ですが、より複雑なロック メカニズムの基本コンポーネントとして機能します。
すべてのアトミックな Futex 操作は Int32Array ビューでのみ使用でき、ワーカー スレッド内でのみ使用できます。

3. クロスコンテキスト メッセージング

クロスドキュメント メッセージング (クロスドキュメント メッセージング、とも呼ばれます) 間で情報を転送する機能。

4. エンコーディング API

エンコーディング API は主に文字列とステレオタイプ配列の間の変換に使用されます。

5. ファイル API と BLOB API

1. ファイル タイプ

ファイル API は依然としてフォームのファイル入力フィールドに基づいていますが、ファイル情報に直接アクセスする機能を追加します。 HTML5 では、ファイル入力要素の DOM にファイル コレクションが追加されます。ユーザーがファイル フィールドで 1 つ以上のファイルを選択すると、ファイル コレクションには、選択したファイルを表す File オブジェクトのセットが含まれます。各 File オブジェクトには、いくつかの読み取り専用属性があります。

2. FileReader タイプ

FileReader タイプは、非同期ファイル読み取りメカニズムを表します。FileReader は、XMLHttpRequest と同様のものと考えることができますが、読み取りに使用される点が異なります。ファイル システム。サーバーからデータを読み取るのではなく、ファイルをフェッチします。 FileReader タイプには、ファイル データを読み取るためのメソッドがいくつか用意されています。

• readAsText(file,encoding);//ファイルからプレーン テキスト コンテンツを読み取り、結果属性に保存します

• readAsDataURL(file);// ファイルを読み取り、コンテンツのデータ URI を結果属性に保存します

• readAsBinaryString(file);// Read ファイルを取得し、結果属性の各文字のバイナリ データを保存します。

• readAsArrayBuffer(file);//ファイルを読み取り、ファイルの内容をフォームの result 属性に保存します。 ArrayBuffer

##3. FileReaderSync タイプ

FileReader タイプの同期バージョン。

4. BLOB と部分読み取り

場合によっては、ファイル全体ではなくファイルの一部を読み取る必要がある場合があります。この目的のために、File オブジェクト提供される名前は、slice() メソッドです。 lice() メソッドは、開始バイトと Yaodu 領域のバイト数の 2 つのパラメータを受け取ります。このメソッドは、実際には File のスーパークラスである Blob のインスタンスを返します。

Blob はバイナリ ラージ オブジェクトを表します。これは、変更不可能なバイナリ データに対する JavaScript のカプセル化タイプです。文字列を含む配列、ArrayBuffers、ArrayBufferView、さらにはその他の BLOB を使用して BLOB を作成できます。 Blob コンストラクターはオプション パラメーターを受け取り、その中で MIME タイプを指定できます。

6. Streams API

1. アプリケーション シナリオ

Streams API は、Web アプリケーションが小規模なデータをどのように消費できるかという単純だが基本的な問題を解決するために生まれました。 、大きな塊ではなく、情報の塊を注文しましたか？この機能には、主に 2 つのアプリケーション シナリオがあります。

大量のデータは一度に利用できない場合があります。ネットワーク要求に対する応答は典型的な例です。ネットワーク負荷は連続パケットで配信され、ストリーミングを使用すると、アプリケーションはすべてのデータが読み込まれるまで待つ必要がなく、到着したデータを消費できるようになります。
1. 大きなデータは、小さな部分に分けて処理する必要がある場合があります。ビデオ処理、データ圧縮、画像エンコード、JSON 解析などはすべて、すべてのデータがメモリに入るまで待つことなく、細かく処理できる処理の例です。

2. ストリームについて理解する

Streams API は 3 つのストリームを定義します:

• 読み取り可能なストリーム: パブリック インターフェイスを通じて読み取ることができます。データブロックの数。データは基礎となるソースから内部的にストリームに入り、コンシューマーによって処理されます。

• 書き込み可能なストリーム: 特定のパブリック インターフェイスを通じてデータ ブロックを書き込むことができるストリーム。プロデューサー (コンシューマー) はデータをストリームに書き込み、データは内部で基礎となるデータ スロット (シンク) に転送されます。

• 変換ストリーム: 2 つのストリームで構成されます。書き込み可能ストリームはデータの受信に使用され、読み取り可能ストリームはデータの出力に使用されます。これら 2 つのストリーム品質チェックは、必要に応じてストリーム コンテンツを検査および変更できるトランスフォーマーです。

7. Web 暗号化 API

Web 暗号化 API は、JavaScript が安全かつ従来の方法で暗号化を実装する方法を標準化する一連の暗号化ツールについて説明します。これらのツールには、暗号化キー ペアの生成、使用、適用、情報の暗号化と復号化、および乱数の信頼性の高い生成が含まれます。

乱数を生成する必要がある場合、多くの人は

Math.random() を使用します。このメソッドは、疑似乱数ジェネレーター (PRNG、PseudoRandom Number Generator) としてブラウザーに実装されます。いわゆる擬似とは、真にはランダムではない値を生成するプロセスを指します。 PRNG によって生成された値は、ランダムな特性のみをシミュレートします。ブラウザの PRNG は真のランダム ソースを使用せず、固定アルゴリズムを内部状態に適用するだけです。 Math.random() が呼び出されるたびに、この内部状態がアルゴリズムによって変更され、結果が新しい乱数に変換されます。たとえば、V8 エンジンは xorshift128 というアルゴリズムを使用してこの変更を実行します。

アルゴリズム自体は固定で入力は前の状態のみなので乱数列も決まります。

xorshift128 128 ビットの内部状態を使用し、アルゴリズムは、初期状態が繰り返される前に 2128^{-1 の疑似乱数値を生成するように設計されています。この種のループは順列ループと呼ばれ、このループの長さは周期と呼ばれます。攻撃者が PRNG の内部状態を知っていれば、その後に生成される擬似乱数値を予測できることは明らかです。開発者が誤って PRNG を使用して暗号化用の秘密キーを生成した場合、攻撃者は PRNG のこの機能を使用して秘密キーを計算する可能性があります。}

擬似乱数ジェネレーターは、主に一見乱数を素早く計算するために使用されますが、暗号化アルゴリズムには適していません。この問題を解決するには、暗号的に安全な擬似乱数ジェネレーター (CSPRNG、Cryptographically Secure PseudoRandom Number Generator) を使用します。 )、ハードウェア時間や予測不可能な動作を伴うその他のシステム特性のテストなど、追加のエントロピーを入力として追加します。PRNG ほど高速ではありませんが、生成された値は予測がより難しく、暗号化に使用できます。

Web 暗号化 API には CSPRNG が導入されており、

crypto.getRandomValues() を通じてグローバル Crypto オブジェクトにアクセスできます。 0 から 1 までの浮動小数点数を返す Math.random() とは異なり、getRandomValues() はパラメータとして渡されるステレオタイプ化された配列にランダムな値を書き込みます。基礎となるバッファーにはランダムなビットが埋め込まれるため、ステレオタイプ化された配列のクラスは重要ではありません。

JavaScript マインド マップ

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がJavaScript のファイル API、ストリーム API、Web 暗号化 API を学習します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。