パフォーマンスに深刻な影響を与える一般的なJavascriptの間違い？[閉まっている]

私が参加した最近のUI / UX MeetUpで、対話とUIにJavascript（jQuery）を使用するWebサイトにいくつかのフィードバックを与えました。これはかなり単純なアニメーションと操作でしたが、まともなコンピューターでのパフォーマンスはすごかったです。

実際、同じ問題で見た多くのサイトやプログラムを思い出しました。特定のアクションはパフォーマンスを完全に破壊します。これは、JavascriptがFlashの代替としてほとんど機能している（または、少なくとももっと目立つ）状況にあります。これは、はるかに多くのJavascriptと機能を備えているものの、非常にスムーズに実行する、私が使用した一部のWebアプリケーションとはまったく対照的です（IBMのCOGNOSは頭の中で考えられるものです）。

サイトのパフォーマンスを低下させるJSを開発する際に考慮されない一般的な問題をいくつか知りたいです。

一般的なパフォーマンスキラーは.length、forループ内でHTMLCollectionを呼び出すことです。

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

このアンチパターンにより、ループの各パスでコレクションのサイズが計算されます。より良い方法は、ループの外側の長さを計算することです：

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

いいえ、問題はフラッシュの交換に使用されたJSに起因するものではありません。それが納得できない場合は、アクションスクリプトについてyourelfを文書化してください。JSに非常に近いです。

パフォーマンスキラーとして、いくつかの悪い習慣を見つけることができます。

• スクロール、マウスの移動など、継続的なイベントにイベントハンドラーをアタッチします。これには2つの欠点があります。イベントが十分にトリガーされない場合、アプリケーションは反応しません。トリガーしすぎると、CPU負荷が非常に高くなります。
• 同期AJAX呼び出しを行う。JavaScriptはマルチスレッド化されていないため、JSの一部が何かを待機していると、アプリケーションがフリーズします。非同期のAJAX呼び出しを使用する方が適切です。同じ方法でsetTimeout / setIntervalを使用して、長い計算フェーズを分割し、アプリケーションの反応を維持します。
• 他の言語と同じようにアルゴリズムの複雑度が高い。

インタラクションとUIにJavascript（jQuery）を使用するWebサイトにいくつかのフィードバックを与えました。これはかなり単純なアニメーションと操作でしたが、適切なコンピューターでのパフォーマンスは恐ろしかったです。

パフォーマンスに関する最大の問題の1つは、基礎となるDOMモデルとCSS3アニメーションモデル（またはキャンバス、またはsvg）を理解せずに高レベルの抽象化（jQueryなど）を使用することです。

あなたがいない場合は知っている抽象化せずにそれを行う方法を、あなたは絶対持っているゼロの技術が速いか遅いかの知識を。

JavaScriptを学ぶ、DOMを学ぶ。これらの2つを理解し、内部で抽象化が何を行うかがわかったら、それらを効率的に使用できます。もちろん、抽象化に気付くほとんどの時間は、ライブラリを使わずに手動で行うことです。

Javascriptの美しさと欠点は、非常に柔軟であることです。そうは言っても、実際には多くの場合に実行してはいけないことを実行することができます。

私が参加しているコードレビューから、主な懸念はCSSレンダリングに関連する傾向があります。新しいJS開発者にとって、グローバルスコープで使用されている変数が多すぎる傾向にあります。

また、不適切なクロージャはメモリリークを引き起こす可能性があります。ただし、最新のJavascriptフレームワークは、コードがフレームワークに従っている限り、この種の問題を防ぎます。

ここで私はより良いjqueryのコードを書くことについて1年ほど前に発見することを迅速リンクは次のとおりです。http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

パフォーマンスを低下させていた同僚のコードで見つけた1つのことは、キャッシュする必要のないデータをキャッシュすることでした。

例：

var table = $("#data").dataTable(.....);

DataTablesは、優れたグリッドを作成するために使用するjQueryプラグインです。とにかく、テーブルには5k行近くあり、DataTablesプラグインを適用してからテーブル変数に保存すると、実際にはFireFoxとIEの両方でスクリプトに時間がかかりすぎるという警告が表示されました。ストーリーのモラル。必要な場合にのみデータをキャッシュします。

聞いたところによると、forループはjQueryのループよりも計算的に高速です$.each()。