JavaScriptはフルスタック開発言語であり、JSがブラウザ、携帯電話、サーバー側で見ることができることを誰もが知っていると思います。この記事では、基礎となるJSと実装の原則の理解を向上させるために、効率的なJavaScriptのベストプラクティスを共有します。
データストレージ
コンピューターの分野には、データストレージの場所を変更することで最適な読み取りと書き込みのパフォーマンスを実現する古典的な問題があります。 JavaScriptでは、データストレージの場所がコードパフォーマンスに大きな影響を与える可能性があります。 {}でオブジェクトを作成できる場合は、新しいオブジェクトを使用しないでください。 []で配列を作成できる場合は、新しい配列を使用しないでください。 JSのリテラルのアクセス速度は、オブジェクトのアクセス速度よりも高くなっています。変数がスコープチェーンに深くなるほど、アクセスに必要なプラクティスが長くなります。このような変数の場合、局所変数はキャッシュによって保存され、スコープチェーンへのアクセスの数を減らすことができます。ポイント表記（Object.Name）と演算子（Object [name]）の間に大きな違いはありません。 Safariのみが違いを持ち、ポイントは常に高速です
サイクル
JSにはいくつかの一般的なループがあります：
for（var i = 0; i <10; i ++）{//何かをします} for（var propin in object）{// for loop object} [1,2] .foreach（function（value、index、array）{//関数ベースループ}）疑いの余地はありませんが、最初の方法はネイティブであり、パフォーマンスの消費が最も低く、最速の速度があります。 2番目の方法は、すべての反復をより多くのオーバーヘッド（ローカル変数）生成し、その速度は最初のタイプの1/7にすぎません。 3番目の方法は明らかにより便利なループ方法を提供しますが、その速度は通常のループの1/8にすぎません。したがって、プロジェクトの状況に応じて適切なループ方法を選択できます。
イベント委任
ページ上の各タグにイベントを追加することを想像してください。各タグにオンクリックを追加しますか？この状況は、ページに同じイベント処理にバインドする必要がある多数の要素がある場合、パフォーマンスに影響を与える可能性があります。各バインディングイベントは、ページまたは実行中の負担を増加させます。豊富なフロントエンドアプリケーションの場合、あまりにも多くのバインディングが、重い相互作用のあるページ上のメモリが多すぎます。シンプルでエレガントな方法は、イベント委任です。これは、イベントベースのワークフローです。レイヤーごとにレイヤーをキャプチャし、ターゲットに到達し、レイヤーごとにバブルアップレイヤーです。イベントにはバブルメカニズムがあるため、イベントを外層に結合することにより、すべての子供の要素から始まるイベントを処理できます。
document.getElementById（ 'content'）。onclick = function（e）{e = e || window.event; var Target = E.Target || E.SRCELEMENT; //それがタグではない場合、（ターゲット.nodenmae！=== 'a'）{return} // console.log（target.href）}のリンクアドレスを印刷するif（target.nodenmae！=== 'a'）}を終了します。塗り直して再配置します
ブラウザがHTML、CSS、およびJSをダウンロードすると、DOMツリーとレンダリングツリーの2つのツリーが生成されます。 DOMの幅と高さ、または色、位置などのDOMの幾何学的特性が変化すると、ブラウザは要素の幾何学的特性を再計算し、レンダリングツリーを再構築する必要があります。このプロセスは、再描画と再配置と呼ばれます。
bodystyle = document.body.style; bodystyle.color = red; bodystyle.height = 1000px; bodystyke.width = 100％;
上記の方法で3つのプロパティを変更することにより、ブラウザは3回再塗装します。場合によっては、この再配置を減らすと、ブラウザのレンダリングパフォーマンスが向上する可能性があります。推奨される方法は次のとおりです。1つの操作のみが実行され、3つのステップが完了します。
bodystyle = document.body.style; bodystyle.csstext 'color：red; height：1000px; width：100％';
JavaScriptロード
IE8、Firefox3.5、およびChrome2はすべて、JavaScriptファイルの必要なダウンロードを許可します。したがって、<script>他のタグのダウンロードをブロックしません。残念ながら、JSダウンロードプロセスは、画像などの他のリソースのダウンロードをブロックします。最新のブラウザは、並列ダウンロードを許可することでパフォーマンスを向上させますが、スクリプトブロックは依然として問題です。したがって、すべての<body>タグの下部にすべての<script>タグを配置して、ページ全体のレンダリングへの影響を最小限に抑え、ユーザーが空白スペースが表示されないようにすることをお勧めします。
高性能JSファイルの展開
複数の<script>タグがページのレンダリング速度に影響することをすでに知っているため、「ページレンダリングに必要なHTTPの削減」がWebサイトのスピードアップの古典的なルールであることを理解することは難しくありません。したがって、製品環境ですべてのJSファイルをマージすると、リクエストの数が減り、ページレンダリングが高速化されます。 JSファイルのマージに加えて、JSファイルを圧縮することもできます。圧縮とは、実行に関連していないファイルの一部を削除することを指します。削除されたコンテンツには、Whitespaceキャラクターとコメントが含まれます。変更プロセスは通常、ファイルサイズを半分に削減できます。また、次のようなローカル変数の長さを短縮する圧縮ツールもいくつかあります。
var myname = "foo" + "bar"; //圧縮後、それはvar a = "foobar"になります。
JSファイルをキャッシュします
キャッシュHTTPコンポーネントは、ウェブサイトの返品訪問のユーザーエクスペリエンスを大幅に改善できます。 Webサーバーは、「HTTP Responseヘッダーの有効期限」を使用して、クライアントにリソースをキャッシュする時間を伝えます。もちろん、キャッシュには独自の欠陥もあります。アプリケーションがアップグレードされたとき、ユーザーが最新の静的コンテンツをダウンロードすることを確認する必要があります。この問題は、静的リソースのファイル名を変更することで解決できます。製品環境には、ブラウザリファレンスjsapplication-20151123201212.jsが表示されます。これは、新しいJSファイルをタイムスタンプに保存し、それによりキャッシュが更新されないという問題を解決するためです。
要約します
もちろん、効率的なJSは、改善できるこれらのことだけではありません。パフォーマンスの損失を減らすことができる場合は、JavaScriptを使用してより効率的に開発できます。