高パフォーマンスの JavaScript について知っておくべきこと-jsチュートリアル-php.cn

高パフォーマンスの JavaScript について知っておくべきこと

coldplay.xixi

リリース： 2020-06-23 12:51:43

転載

1572 人が閲覧しました

高パフォーマンスの JavaScript について知っておくべきこと

JavaScript はフルスタック開発言語であり、ブラウザ、携帯電話、サーバーで使用できることは誰もが知っているはずです。この記事では、JS の基礎となる原則と実装原則についての全員の理解を深めるために、効率的な JavaScript のベストプラクティスをいくつか紹介します。

データストレージ

コンピュータサイエンスにおける古典的な問題は、データストレージの場所を変更することで最高の読み取りおよび書き込みパフォーマンスを得るというものです。JavaScript では、データストレージの場所が影響します。コードのパフォーマンスに大きな影響を与えます。 – {} を使用してオブジェクトを作成できる場合は、new Object を使用しないでください。[] を使用して配列を作成できる場合は、new Array を使用しないでください。 JSのリテラルはオブジェクトよりもアクセス速度が速いです。 – 変数がスコープチェーン内で深くなるほど、アクセスに時間がかかります。この種の変数の場合、キャッシュを通じてローカル変数を使用して変数を保存すると、スコープチェーンへのアクセス数を減らすことができます。ドット表記 (object.name) と演算子 (object[name]) の使用に大きな違いはありません。 Safari には違いがあります。ポイントは常に高速です。

ループ

JS の一般的なループには次の種類があります。

for(var i = 0; i < 10; i++) { // do something}  
for(var prop in object) { // for loop object}    
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

ログイン後にコピー

最初のメソッドであることは間違いありません。ネイティブであり、パフォーマンスが優れています。消費量が最も少ないものは、最も高速でもあります。 for-in の 2 番目の方法は、反復ごとにより多くのオーバーヘッド (ローカル変数) を生成し、その速度は最初の方法の 1/7 にすぎません。3 番目の方法は、明らかにより便利なループメソッドを提供しますが、速度は 1/8 しかありません。通常のサイクルの。したがって、プロジェクトの状況に応じて適切なリサイクル方法を選択できます。

イベント委任

ページ上の各 A タグにイベントを追加することを想像してください。各タグに onClick を追加しますか?同じイベントハンドラーにバインドする必要がある要素がページ内に多数ある場合、この状況はパフォーマンスに影響を与える可能性があります。イベントのバインディングごとに、ページまたは実行時の負荷が増加します。リッチなフロントエンドアプリケーションの場合、バインディングが多すぎると、対話が頻繁に行われるページで多くのメモリが占有されます。シンプルでエレガントな方法は、イベントの委任です。これはイベントベースのワークフローです。レイヤーごとにキャプチャし、ターゲットに到達し、レイヤーごとにバブルします。イベントにはバブリングメカニズムがあるため、イベントを外側の層にバインドすることで、すべての子要素からのイベントを処理できます。

document.getElementById(&#39;content&#39;).onclick = function(e) { 
    e = e || window.event;    
    var target = e.target || e.srcElement;    //如果不是 A标签，我就退出   
    if(target.nodeNmae !=== &#39;A&#39;) { return }   //打印A的链接地址    
    console.log(target.href) }

ログイン後にコピー

再描画と再配置

ブラウザは 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 &#39;color:red;height:1000px;width:100%&#39;;

ログイン後にコピー

JavaScript の読み込み

IE8、Firefox3.5、および Chrome2 ではすべて、JavaScript ファイルの必須ダウンロードが許可されています。したがって、<script> は他のタグのダウンロードをブロックしません。残念ながら、JS のダウンロードプロセスでは、画像などの他のリソースのダウンロードが引き続きブロックされます。最新のブラウザでは並列ダウンロードが可能になりパフォーマンスが向上しましたが、スクリプトのブロックには依然として問題があります。したがって、ページ全体のレンダリングへの影響を最小限に抑え、ユーザーに表示されないようにするために、すべての <script> タグを <body> タグの下部に配置することをお勧めします。空白

JS ファイルの高パフォーマンスのデプロイメント

複数の <script> タグがページのレンダリング速度に影響することは誰もが知っているので、難しいことではありません。「ページのレンダリングに必要な時間を短縮する」を理解するには、「HTTP」は Web サイトの速度を向上させるための古典的なルールです。したがって、実稼働環境ですべての JS ファイルをマージすると、リクエストの数が減り、ページのレンダリングが高速化されます。 JS ファイルをマージするだけでなく、JS ファイルを圧縮することもできます。圧縮とは、ファイルの実行に関係のないファイルの部分を削除することを指します。除去されたコンテンツには空白文字やコメントが含まれます。通常、変更プロセスによりファイルサイズを半分に減らすことができます。ローカル変数の長さを短縮する圧縮ツールもいくつかあります。たとえば、次のとおりです。

var myName = "foo" + "bar";  
//压缩后变成  
var a = "foobar";

ログイン後にコピー

JS ファイルのキャッシュ

HTTP コンポーネントのキャッシュにより、Web サイトへの再アクセスのユーザーエクスペリエンスが大幅に向上します。 Web サーバーは、「Expires HTTP 応答ヘッダー」を使用して、リソースをキャッシュする期間をクライアントに伝えます。もちろん、キャッシュには独自の欠点があります。アプリケーションがアップグレードされるときは、ユーザーが最新の静的コンテンツをダウンロードするようにする必要があります。この問題は、静的リソースのファイル名を変更することで解決できます。運用環境では、ブラウザが jsapplication-20151123201212.js を参照していることがわかります。これにより、新しい JS ファイルがタイムスタンプとして保存され、キャッシュが更新されない問題が解決されます。