最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptパフォーマンス


どのようにJavaScriptコードをスピードアップします。


ループ内の活性を低下させます

ループは、多くの場合、プログラミングで使用されています。

含むループ内の各ステートメント、 for文は、ループの各反復のために実行されます。

ループの外側に配置することができ文または割り当てを検索します。

バートコード:

for (i = 0; i < arr.length; i++) {

より良いコード:

l = arr.length;
for (i = 0; i < l; i++) {

不正なコードは、配列のループが繰り返されるたびにlengthプロパティにアクセスします。

より良いコードは、ループの外lengthプロパティにアクセスし、ループの実行時間を短縮できます。


DOMアクセスを削減

HTML DOMにアクセスすると、他のJavaScript文に比べ、非常に遅いです。

あなたは、DOM要素を複数回アクセスしたら、それをアクセスし、ローカル変数として使用することが予想される場合は:

obj = document.getElementById("demo");
obj.innerHTML = "Hello";
»それを自分で試してみてください

DOMのサイズを小さく

HTML DOM小の要素数を保管してください。

これは、常にページの読み込みを改善し、特に小型のデバイス上で、(ページ表示)をレンダリングスピードアップします。

(getElementsByTagNameのような)DOMを検索するあらゆる試みは、より小さなDOMの恩恵を受ける。


不要な変数を避けます

あなたは値を保存する予定がない場合は、新しい変数を作成しないでください。

多くの場合、あなたはこのようなコードを置き換えることができます。

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

これとともに:

document.getElementById("demo").innerHTML = firstName + " " + lastName

遅延JavaScriptの読み込み中

ページ本体の下部にスクリプトを置く、ブラウザが最初のページをロードすることができます。

スクリプトがダウンロードしている間、ブラウザは、他のダウンロードを開始しません。 さらに、すべての解析およびレンダリング活動がブロックされる可能性があります。

HTTPの仕様では、ブラウザは、並列に二つ以上のコンポーネントをダウンロードしないことを規定しています。

代替案は、使用することですdefer="true"スクリプトタグに。 延期属性は、ページが構文解析が終了した後にスクリプトが実行されるべきであることを指定しますが、それだけで外部スクリプトのために働きます。

可能な場合はページが読み込まれた後、あなたは、コードによってページにスクリプトを追加することができます。

<script>
window.onload = downScripts;

function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

での使用は避けてください

キーワードでの使用は避けてください。 これは、速度にマイナスの影響を持っています。 JavaScriptのスコープアップそれもクラッタ。

キーワードとstrictモードでは使用できません