jsパフォーマンス最適化JavaScriptページをより迅速にロードする方法
4427 ワード
コードができるだけ簡潔であることを確認
何もJavaScriptに依存しないでください.重複するスクリプトは作成しないでください.JavaScriptをキャンディツールにするには、美化の役割を果たすだけです.あなたのサイトにJavaScriptコードを大量に追加しないでください.必要なときだけ使ってください.ユーザー体験を確実に改善できる時だけ使ってみましょう.
DOMアクセスを最小限に抑える
JavaScriptを使用してDOM要素にアクセスするのは簡単で、コードは読みやすいですが、速度が遅いです.JavaScriptを使用してWebレイアウトを修飾することを制限し、アクセス要素に対する参照をキャッシュします.時には、あなたのサイトが大量のDOMに依存して変更された場合、あなたのマークを制限することを考慮する必要があります.これはHTML 5に変更し、元のXHTMLやHTML 4を捨てる十分な理由です.Firebugプラグインのコンソールに「document」と入力するだけでDOM要素の数を表示できます.getElementsByTagName('*').length.
圧縮コード
圧縮されたJavaScriptページを提供するには、まずJavaScript圧縮ツールでコードを圧縮します.この圧縮ツールは変数とパラメータ名を圧縮し、得られたコードを提供し、gzip圧縮を使用します.
はい、私はmainを圧縮していません.jsですが、圧縮されていないjQueryプラグインがあるかどうかを確認し、圧縮を忘れないでください.圧縮に関するいくつかのシナリオを以下に示します.
◆YUI圧縮ツール(jQuery開発チームが使用)、初心者ガイド
(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第2ガイド(http://vilimpoc.org/research/js-speedup/)と公式サイト(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の読み込み速度を速める優れたツールがたくさんあります.特筆すべきツールはLab.jsです.
LAB.js(JavaScriptの読み込みとブロック)を使用すると、JavaScriptファイルを並列に読み込み、全体的な読み込みプロセスを高速化できます.また、ロードするスクリプトの順序を設定することで、依存関係の整合性を確保できます.また、開発者はウェブサイトの速度が2倍に向上したと主張しています.
適切なCDNを使用
現在、多くのWebページでコンテンツ配信ネットワーク(CDN)が使用されています.誰もが使用できるため、キャッシュメカニズムを改善することができます.帯域幅を節約することもできます.ping検出やFirebugを使用してサーバをデバッグしやすく、データの速度を速める方法を把握できます.CDNを選ぶときは、あなたのサイトの訪問者の位置を配慮しなければなりません.できるだけ共通のリポジトリを使用することを忘れないでください.
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――マイクロソフトのCDN
•http://code.jquery.com/jquery-1.4.2.min.js――Edgecast (mt).
Webページの最後にJavaScriptを読み込む
ユーザーに注目すると、インターネット接続速度が遅いため、ユーザーがWebページを離れないのは非常に良い方法です.使いやすさとユーザーがトップ、JavaScriptが最下位.これはつらいかもしれませんが、JavaScriptを無効にするユーザーもいるはずです.読み込みが必要なJavaScriptは、ヘッダ部分に配置できますが、非同期で読み込むことが前提です.
非同期読み込みトレースコード
この点は非常に重要です.私たちの多くはグーグル分析ツール(Google Analytics)を使って統計データを取得しています.これはいいですね.今、追跡コードをどこに置いたか見てみましょう.頭の部分に置いてありますか?それともdocumentを使っていますか?write?そして、グーグル分析ツールを使ってコードを非同期で追跡していない場合は、あなた自身のせいにするしかありません.
これがグーグル分析ツールがコードを非同期で追跡している様子です.documentではなくDOMを使用していることを認めなければなりません.write、これはもっとあなたに似合うかもしれません.Webページを読み込む前に、いくつかのイベントを検出することができます.これは非常に重要です.今考えてみると、あなたのページはまだ読み込まれておらず、すべてのユーザーがページを閉じています.ページブラウズのエラーを解決する方法が見つかりました.
Google分析ツールを使用していませんか?これは問題ではありません.今日の分析ツールプロバイダの多くは、非同期追跡を使用することを許可しています.
Ajax最適化
Ajaxリクエストはあなたのサイトのパフォーマンスに大きな影響を及ぼします.Ajaxの最適化に関するいくつかのポイントをご紹介します.
あなたのajaxをキャッシュします
まずあなたのコードを見てください.あなたのajaxはキャッシュできますか?はい、データに依存していますが、ajaxリクエストの多くはキャッシュできるはずです.jQueryでは、scriptおよびjsonpデータ型を除くデフォルトでリクエストがキャッシュされています.
Ajaxリクエストに対するGETの使用
POSTタイプ要求は、2つのTCPパケットを送信する(ヘッダを先に送信し、次にデータを送信する).GETタイプリクエストは、パケットを送信するだけです(これはクッキーの数に依存する可能性があります).だから、URLの長さが2 K未満で、またいくつかのデータを要求したい場合は、GETを使ってみてください.
ySlowの使用
性能といえば、ySlowは簡単で、極めて有効です.それはあなたのウェブサイトを採点して、どのような面が修正する必要があるか、どのような面に注目すべきかを表示することができます.
もう一つの手:JavaScriptをPNGファイルにパッケージ化する
あなたのJSとCSSを画像の末尾に追加し、CSSで裁断し、HTTPリクエストでアプリケーションに必要なすべての情報を取得することを想定します.
私は最近この方法を見つけた.JavaScript/cssデータをPNGファイルにパッケージ化します.その後、キャンバスAPIのgetImageData()を使用する限り、パッケージを取り外すことができます.また、非常に効率的です.データを縮小せずに35%程度圧縮することができます.しかも無損圧縮!膨大なスクリプトでは、キャンバスを指したり、ピクセルを読み取ったりする過程で、「一段」の読み込み時間が感じられることを指摘しなければなりません.英文原文:http://www.1stwebdesigner.com/design/load-JavaScript-faster/
何もJavaScriptに依存しないでください.重複するスクリプトは作成しないでください.JavaScriptをキャンディツールにするには、美化の役割を果たすだけです.あなたのサイトにJavaScriptコードを大量に追加しないでください.必要なときだけ使ってください.ユーザー体験を確実に改善できる時だけ使ってみましょう.
DOMアクセスを最小限に抑える
JavaScriptを使用してDOM要素にアクセスするのは簡単で、コードは読みやすいですが、速度が遅いです.JavaScriptを使用してWebレイアウトを修飾することを制限し、アクセス要素に対する参照をキャッシュします.時には、あなたのサイトが大量のDOMに依存して変更された場合、あなたのマークを制限することを考慮する必要があります.これはHTML 5に変更し、元のXHTMLやHTML 4を捨てる十分な理由です.Firebugプラグインのコンソールに「document」と入力するだけでDOM要素の数を表示できます.getElementsByTagName('*').length.
圧縮コード
圧縮されたJavaScriptページを提供するには、まずJavaScript圧縮ツールでコードを圧縮します.この圧縮ツールは変数とパラメータ名を圧縮し、得られたコードを提供し、gzip圧縮を使用します.
はい、私はmainを圧縮していません.jsですが、圧縮されていないjQueryプラグインがあるかどうかを確認し、圧縮を忘れないでください.圧縮に関するいくつかのシナリオを以下に示します.
◆YUI圧縮ツール(jQuery開発チームが使用)、初心者ガイド
(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第2ガイド(http://vilimpoc.org/research/js-speedup/)と公式サイト(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の読み込み速度を速める優れたツールがたくさんあります.特筆すべきツールはLab.jsです.
LAB.js(JavaScriptの読み込みとブロック)を使用すると、JavaScriptファイルを並列に読み込み、全体的な読み込みプロセスを高速化できます.また、ロードするスクリプトの順序を設定することで、依存関係の整合性を確保できます.また、開発者はウェブサイトの速度が2倍に向上したと主張しています.
適切なCDNを使用
現在、多くのWebページでコンテンツ配信ネットワーク(CDN)が使用されています.誰もが使用できるため、キャッシュメカニズムを改善することができます.帯域幅を節約することもできます.ping検出やFirebugを使用してサーバをデバッグしやすく、データの速度を速める方法を把握できます.CDNを選ぶときは、あなたのサイトの訪問者の位置を配慮しなければなりません.できるだけ共通のリポジトリを使用することを忘れないでください.
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――マイクロソフトのCDN
•http://code.jquery.com/jquery-1.4.2.min.js――Edgecast (mt).
Webページの最後にJavaScriptを読み込む
ユーザーに注目すると、インターネット接続速度が遅いため、ユーザーがWebページを離れないのは非常に良い方法です.使いやすさとユーザーがトップ、JavaScriptが最下位.これはつらいかもしれませんが、JavaScriptを無効にするユーザーもいるはずです.読み込みが必要なJavaScriptは、ヘッダ部分に配置できますが、非同期で読み込むことが前提です.
非同期読み込みトレースコード
この点は非常に重要です.私たちの多くはグーグル分析ツール(Google Analytics)を使って統計データを取得しています.これはいいですね.今、追跡コードをどこに置いたか見てみましょう.頭の部分に置いてありますか?それともdocumentを使っていますか?write?そして、グーグル分析ツールを使ってコードを非同期で追跡していない場合は、あなた自身のせいにするしかありません.
これがグーグル分析ツールがコードを非同期で追跡している様子です.documentではなくDOMを使用していることを認めなければなりません.write、これはもっとあなたに似合うかもしれません.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分析ツールを使用していませんか?これは問題ではありません.今日の分析ツールプロバイダの多くは、非同期追跡を使用することを許可しています.
Ajax最適化
Ajaxリクエストはあなたのサイトのパフォーマンスに大きな影響を及ぼします.Ajaxの最適化に関するいくつかのポイントをご紹介します.
あなたのajaxをキャッシュします
まずあなたのコードを見てください.あなたのajaxはキャッシュできますか?はい、データに依存していますが、ajaxリクエストの多くはキャッシュできるはずです.jQueryでは、scriptおよびjsonpデータ型を除くデフォルトでリクエストがキャッシュされています.
Ajaxリクエストに対するGETの使用
POSTタイプ要求は、2つのTCPパケットを送信する(ヘッダを先に送信し、次にデータを送信する).GETタイプリクエストは、パケットを送信するだけです(これはクッキーの数に依存する可能性があります).だから、URLの長さが2 K未満で、またいくつかのデータを要求したい場合は、GETを使ってみてください.
ySlowの使用
性能といえば、ySlowは簡単で、極めて有効です.それはあなたのウェブサイトを採点して、どのような面が修正する必要があるか、どのような面に注目すべきかを表示することができます.
もう一つの手:JavaScriptをPNGファイルにパッケージ化する
あなたのJSとCSSを画像の末尾に追加し、CSSで裁断し、HTTPリクエストでアプリケーションに必要なすべての情報を取得することを想定します.
私は最近この方法を見つけた.JavaScript/cssデータをPNGファイルにパッケージ化します.その後、キャンバスAPIのgetImageData()を使用する限り、パッケージを取り外すことができます.また、非常に効率的です.データを縮小せずに35%程度圧縮することができます.しかも無損圧縮!膨大なスクリプトでは、キャンバスを指したり、ピクセルを読み取ったりする過程で、「一段」の読み込み時間が感じられることを指摘しなければなりません.英文原文:http://www.1stwebdesigner.com/design/load-JavaScript-faster/