渚  直樹

渚 直樹

1650746340

7(極端な)JavaScriptのパフォーマンスのヒント🔥

Brendan Eichによって書かれたJavaScriptは、1995年に最初にリリースされ、その後、世界で2番目に人気のあるプログラミング言語に進化しました。ほぼ20年前のものですが、構文と標準ライブラリの習得が簡単で十分に文書化されていることもあり、柔軟性とクロスプラットフォーム機能があることもあり、今でも広く使用されています。

何に取り組んでいるか、JavaScriptがどこで使用されているかに関係なく、これらの7つの(極端な)パフォーマンスのヒントは、アプリケーションが実行速度の点で今日の標準に匹敵することを保証するために必要なツールを提供します。

長さを使用して配列内の空を削除する

「アレイ」のサイズを変更して空にする場合、このアプローチは非常に役立ちます。からエントリを
削除するときは、関数を使用します。narrayarray.lenght

array.length = n

See this example:

var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.length); // 6 
array.length = 3; 
console.log(array.length); // 3 
console.log(array); // [1,2,3]

For **emptying array** use

array.length = 0;.

例:

var array = [1, 2, 3, 4, 5, 6]; 
array.length = 0; 
console.log(array.length); // 0 
console.log(array); // []

このアプローチは、配列コンポーネントのサイズ変更と設定解除の代替方法よりも推奨されることが多く、大多数の開発者はJavaScriptのベストプラクティスの1つと見なしています。

スプライスを使用して配列要素を削除します

これは間違いなく、最も効果的なjavascript最適化戦略の1つです。JSコードのパフォーマンスが向上します。

可能であれば、削除の代わりにスプライスを使用してください。nullこれにより、コードの一部が保存undefined spaceされ、読みやすさが向上します。

deleteを使用することの欠点は、オブジェクトプロパティを破棄しますが、配列のインデックスを再作成したり、その長さを更新したりしないため、未定義の値が返されることです。さらに、実行中にかなりの時間が必要になります。

例:

myArray = ["a", "b", "c", "d"] 
myArray.splice(0, 2) ["a", "b"]

Result: myArray ["c", "d"]

変数をキャッシュする

変数をキャッシュすると、JavaScriptの速度に大きな影響があります。または
を使用するたびに、JSは、送信する比較可能な要素リクエストごとに、ドキュメント内のすべての要素を繰り返し処理します。document.getElementById()getElementsByClassName()

効率を向上させるには、選択を一時変数にキャッシュする必要があります(同じ選択を複数回使用する場合)。

例:

var cached = document.getElementById('someElement');
cached.addClass('cached-element');

これは、速度に大きな影響を与える基本的な最適化のヒントであり、ループ内の巨大な配列を処理するために推奨されます。

条件文を短絡します

論理演算子がすべての引数を分析しない場合、これは短絡と呼ばれます。

if (loggedin) { 
welcome\_messege();
 }

検証済みの変数を関数と組み合わせ、組み合わせの2つの要素の間に&&(および演算子)を挿入して、短くします。

例:

loggedin && welcome\_messege();

||を使用したデフォルト値 オペレーター

JSには、デフォルト値を設定するという基本的なガイドラインがあります。そうしないと、プロセスは未定義の値で終了します。

変数にデフォルト値を指定するには||、この最も一般的な問題を回避するために使用します。

var a = a || 'hello'

バグを防ぐために、開発者は、競合する値がユーザーによって関数に提供されているかどうかを確認する必要があります。

配列フィルターを使用する

これは、配列プールからアイテムのバケットを除外できるようにする単純なハックです。

このメソッドは、以前に定義された(関数として提供された)テストに合格したすべての配列項目を含む配列を作成します。仕様に従って、不要なコンポーネントのコールバック関数を作成します。

次の例のバケットコンポーネントはnullであり、フィルタリングする準備ができています。

schema = ["hi","ihaveboyfriend",null, null, "goodbye"]
schema = schema.filter(function(n) {
 return n
 });

出力は次のようになります。

Output: ["hi","ihaveboyfriend", "goodbye"]

このハックにより、開発者の時間とコード行を節約できます。

サーバーに負荷をかけずにアレイをマージする

2つの配列を組み合わせる必要がある場合、そのArray.concat()方法はあなたが探しているものです。

2つのアレイをマージする場合:

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

この方法は、小さな配列を処理する場合に最適に機能します。

この手法を利用して、大きなアレイを統合します。

Array.push.apply(arr1, arr2)

これは、巨大な配列でこのArray.concat()メソッドを使用すると、新しい配列を作成するときに大量のメモリが必要になるためです。

Array.push.apply(arr1, arr2)この状況では、の代わりにを使用できます。これによりArray.push.apply(arr2, arr1)、2番目の配列が最初の配列にマージされるため、使用されるメモリの量が最小限に抑えられます。

例:

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

また、配列のサイズに関係なく、Javascriptコードの全体的な速度が向上します。

ソース:https ://medium.com/@Luna-Rojas/7-extreme-performance-tips-in-javascript

#javascript 

What is GEEK

Buddha Community

7(極端な)JavaScriptのパフォーマンスのヒント🔥
渚  直樹

渚 直樹

1650746340

7(極端な)JavaScriptのパフォーマンスのヒント🔥

Brendan Eichによって書かれたJavaScriptは、1995年に最初にリリースされ、その後、世界で2番目に人気のあるプログラミング言語に進化しました。ほぼ20年前のものですが、構文と標準ライブラリの習得が簡単で十分に文書化されていることもあり、柔軟性とクロスプラットフォーム機能があることもあり、今でも広く使用されています。

何に取り組んでいるか、JavaScriptがどこで使用されているかに関係なく、これらの7つの(極端な)パフォーマンスのヒントは、アプリケーションが実行速度の点で今日の標準に匹敵することを保証するために必要なツールを提供します。

長さを使用して配列内の空を削除する

「アレイ」のサイズを変更して空にする場合、このアプローチは非常に役立ちます。からエントリを
削除するときは、関数を使用します。narrayarray.lenght

array.length = n

See this example:

var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.length); // 6 
array.length = 3; 
console.log(array.length); // 3 
console.log(array); // [1,2,3]

For **emptying array** use

array.length = 0;.

例:

var array = [1, 2, 3, 4, 5, 6]; 
array.length = 0; 
console.log(array.length); // 0 
console.log(array); // []

このアプローチは、配列コンポーネントのサイズ変更と設定解除の代替方法よりも推奨されることが多く、大多数の開発者はJavaScriptのベストプラクティスの1つと見なしています。

スプライスを使用して配列要素を削除します

これは間違いなく、最も効果的なjavascript最適化戦略の1つです。JSコードのパフォーマンスが向上します。

可能であれば、削除の代わりにスプライスを使用してください。nullこれにより、コードの一部が保存undefined spaceされ、読みやすさが向上します。

deleteを使用することの欠点は、オブジェクトプロパティを破棄しますが、配列のインデックスを再作成したり、その長さを更新したりしないため、未定義の値が返されることです。さらに、実行中にかなりの時間が必要になります。

例:

myArray = ["a", "b", "c", "d"] 
myArray.splice(0, 2) ["a", "b"]

Result: myArray ["c", "d"]

変数をキャッシュする

変数をキャッシュすると、JavaScriptの速度に大きな影響があります。または
を使用するたびに、JSは、送信する比較可能な要素リクエストごとに、ドキュメント内のすべての要素を繰り返し処理します。document.getElementById()getElementsByClassName()

効率を向上させるには、選択を一時変数にキャッシュする必要があります(同じ選択を複数回使用する場合)。

例:

var cached = document.getElementById('someElement');
cached.addClass('cached-element');

これは、速度に大きな影響を与える基本的な最適化のヒントであり、ループ内の巨大な配列を処理するために推奨されます。

条件文を短絡します

論理演算子がすべての引数を分析しない場合、これは短絡と呼ばれます。

if (loggedin) { 
welcome\_messege();
 }

検証済みの変数を関数と組み合わせ、組み合わせの2つの要素の間に&&(および演算子)を挿入して、短くします。

例:

loggedin && welcome\_messege();

||を使用したデフォルト値 オペレーター

JSには、デフォルト値を設定するという基本的なガイドラインがあります。そうしないと、プロセスは未定義の値で終了します。

変数にデフォルト値を指定するには||、この最も一般的な問題を回避するために使用します。

var a = a || 'hello'

バグを防ぐために、開発者は、競合する値がユーザーによって関数に提供されているかどうかを確認する必要があります。

配列フィルターを使用する

これは、配列プールからアイテムのバケットを除外できるようにする単純なハックです。

このメソッドは、以前に定義された(関数として提供された)テストに合格したすべての配列項目を含む配列を作成します。仕様に従って、不要なコンポーネントのコールバック関数を作成します。

次の例のバケットコンポーネントはnullであり、フィルタリングする準備ができています。

schema = ["hi","ihaveboyfriend",null, null, "goodbye"]
schema = schema.filter(function(n) {
 return n
 });

出力は次のようになります。

Output: ["hi","ihaveboyfriend", "goodbye"]

このハックにより、開発者の時間とコード行を節約できます。

サーバーに負荷をかけずにアレイをマージする

2つの配列を組み合わせる必要がある場合、そのArray.concat()方法はあなたが探しているものです。

2つのアレイをマージする場合:

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

この方法は、小さな配列を処理する場合に最適に機能します。

この手法を利用して、大きなアレイを統合します。

Array.push.apply(arr1, arr2)

これは、巨大な配列でこのArray.concat()メソッドを使用すると、新しい配列を作成するときに大量のメモリが必要になるためです。

Array.push.apply(arr1, arr2)この状況では、の代わりにを使用できます。これによりArray.push.apply(arr2, arr1)、2番目の配列が最初の配列にマージされるため、使用されるメモリの量が最小限に抑えられます。

例:

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

また、配列のサイズに関係なく、Javascriptコードの全体的な速度が向上します。

ソース:https ://medium.com/@Luna-Rojas/7-extreme-performance-tips-in-javascript

#javascript