ホームページ > 記事 > ウェブフロントエンド > js パフォーマンスの最適化 JavaScript ページをより速く読み込む方法
js パフォーマンスの最適化 JavaScript ページをより速く読み込む方法
- 高洛峰オリジナル
- 2017-02-04 13:16:50915ブラウズ
コードはできるだけシンプルにしてください
すべてを JavaScript に依存しないでください。繰り返しのスクリプトは書かないでください。 JavaScript は、見た目を美しくするためだけのお菓子のツールだと考えてください。 Web サイトに大量の JavaScript コードを追加しないでください。必要な場合にのみ使用してください。ユーザー エクスペリエンスを本当に向上できる場合にのみ使用してください。
DOM アクセスを最小限に抑える
JavaScript を使用して DOM 要素にアクセスするのは簡単で、コードも読みやすくなりますが、速度は遅くなります。重要なポイントをいくつか紹介します。 Web ページのレイアウトを変更するための JavaScript の使用を制限し、アクセスされた要素への参照をキャッシュします。場合によっては、サイトが大規模な DOM 変更に依存している場合、マークアップを制限することを検討する必要があります。これは、古い XHTML と HTML4 を放棄して HTML5 に切り替える十分な理由です。 DOM 要素の数を確認するには、Firebug プラグインのコンソールに document.getElementsByTagName('*').length と入力します。
圧縮されたコード
圧縮された JavaScript ページを提供する最も効果的な方法は、まず JavaScript 圧縮ツールを使用してコードを圧縮し、その後、gzip 圧縮を使用して結果のコードを提供することです。 。
はい、main.js は圧縮していませんが、圧縮されていない jQuery プラグインがないか確認して、圧縮を忘れないようにしてください。以下に、圧縮のためのいくつかのオプションをリストします。
◆ YUI 圧縮ツール (jQuery 開発チームが使用)、初心者ガイド
(http://www.slideshare.net/nzacas/extreme-JavaScript-compression-with-yui-compressor)、第 2 ガイド ( http: //vilimpoc.org/research/js-speedup/) および公式 Web サイト (http://developer.yahoo.com/yui/compressor/)。
◆ Dean Edwards Packer(http://dean.edwards.name/packer/)
◆ JSMin(http://crockford.com/JavaScript/jsmin)
GZip 圧縮: その背後にあるアイデアは、ブラウザとサーバーの間でデータを転送するのにかかる時間。時間を短縮すると、「Accept-Encoding: gzip,deflate」というタイトルのファイルが得られます。ただし、この圧縮方法にはいくつかの欠点があります。これは、サーバー側とクライアント側 (圧縮および解凍用) の両方のプロセッサ リソースとディスク領域を占有します。
eval() を避ける: eval() は時間の面である程度の効率をもたらす場合もありますが、それを使用するのは明らかに間違ったアプローチです。 eval() を使用すると、コードが汚く見えるため、ほとんどの圧縮ツールによる圧縮が回避されます。
JavaScriptの読み込みを高速化するツール: Lab.js
JavaScriptの読み込みを高速化する優れたツールがたくさんあります。言及する価値のあるツールの 1 つは Lab.js です。
LAB.js (JavaScript のロードとブロック) を使用すると、JavaScript ファイルを並行してロードして、全体のロードプロセスを高速化できます。さらに、ロードする必要があるスクリプトに特定の順序を設定して、依存関係の整合性を確保できます。さらに、開発者は Web サイトで速度が 2 倍向上したと主張しています。
適切な CDN を使用する
現在、多くの Web ページでコンテンツ配信ネットワーク (CDN) が使用されています。誰でも使用できるため、キャッシュ メカニズムが改善されます。また、帯域幅も節約できます。簡単に ping を送信したり、Firebug を使用してサーバーをデバッグし、どこでデータを高速化できるかを見つけることができます。 CDN を選択するときは、Web サイトへの訪問者の所在地を考慮してください。可能な限りパブリック リポジトリを使用するようにしてください。
jQuery 用のいくつかの CDN ソリューション:
◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js - Google Ajax、ライブラリの詳細については、http:/ を参照してください。 /code.google.com/apis/libraries/devguide.html#Libraries。
◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——Microsoft の CDN
•http://code.jquery.com/jquery-1.4.2。 .js - エッジキャスト (mt)。
Web ページの最後に JavaScript をロードします
ユーザーに焦点を当て、インターネット接続が遅いためにユーザーが Web ページから離れなかった場合、これは非常に良い習慣です。使いやすさとユーザーが第一であり、JavaScript は最後にあります。これは苦痛かもしれませんが、一部のユーザーは JavaScript を無効にするという事実を覚悟しておく必要があります。ロードする必要があるヘッダーに JavaScript を入れることができますが、それは非同期でロードされる場合に限られます。
トラッキングコードを非同期で読み込む
これはとても重要です。私たちのほとんどは統計を取得するために Google Analytics を使用します。これはいい。次に、トラッキング コードを配置する場所を確認してください。ヘッダー内にあるのでしょうか? それとも document.write を使用しているのでしょうか? では、コードを非同期的に追跡するために Google Analytics を使用していない場合は、責任があるのは自分だけです。
Google Analyticsの非同期トラッキングコードはこんな感じです。これは document.write を使用する代わりに DOM を使用することを認めざるを得ませんが、これはあなたにとってより適しているかもしれません。 Web ページが読み込まれる前にこれらのイベントの一部を検出できますが、これは非常に重要です。ここで、ページがまだ読み込まれておらず、すべてのユーザーがページを閉じているという状況について考えてみましょう。ページビューの欠落に対する解決策が見つかりました
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();Google Analytics を使用していませんか? それは問題ありません。今日の分析プロバイダーのほとんどは非同期トラッキングを使用できます。
Ajaxの最適化
Ajax リクエストはウェブサイトのパフォーマンスに大きな影響を与えます。以下に、Ajax 最適化に関するいくつかの重要なポイントを紹介します。
ajaxをキャッシュします
まずコードを見てください。 Ajax はキャッシュ可能ですか? はい、データに依存しますが、ほとんどの Ajax リクエストはキャッシュ可能であるはずです。 jQuery では、script および jsonp データ型を除いて、リクエストはデフォルトでキャッシュされます。
Ajax リクエストには GET を使用します
POST タイプのリクエストでは、2 つの TCP データ パケットを送信する必要があります (最初にヘッダーを送信し、次にデータを送信します)。 GET タイプのリクエストでは、1 つのパケットを送信するだけで済みます (これは、持っている Cookie の数によって異なる場合があります)。したがって、URL の長さが 2K 未満で、何らかのデータをリクエストする場合は、GET を使用した方がよいでしょう。
ySlowの使い方
パフォーマンスに関して言えば、ySlowはシンプルでありながら非常に効果的です。 Web サイトにスコアを付けて、修正が必要な領域と重点を置くべき領域を示します。
もう 1 つのトリック: JavaScript を PNG ファイルにパッケージ化します
想像してみてください: JS と CSS を画像の最後に追加し、CSS を使用してトリミングし、単一の HTTP リクエストを通じてアプリケーションで必要なものを取得し、すべての情報を取得します。
最近この方法を見つけました。基本的に、JavaScript/CSS データを PNG ファイルにパックします。その後、キャンバス API の getImageData() を使用するだけで、それを解凍できます。さらに、非常に効率的です。データを圧縮せずに、さらに約 35% 圧縮できます。そして、これは可逆圧縮です。大きなスクリプトの場合、画像がキャンバスにポイントされてピクセルが読み取られるまでに「ある程度」の読み込み時間がかかると感じられることを指摘しなければなりません。
さらに js パフォーマンスの最適化については、PHP 中国語 Web サイトに注目して、JavaScript ページをより速く読み込む方法に関する関連記事をご覧ください。