私の Web プロジェクトの 1 つで、ブラウザー (Windows 7 x64)、特に IE で非常に遅い javascript/jQuery コードを大量に使用しています。
ホームページでのみ、同時に 3 つの Ajax リクエストを使用します。
検索ページでは、スクロールイベント、「検索タグ」（単純なアンカータグ）のクリックイベントなどで発生するajaxリクエストも使用します。これにより、一般的にデータの読み込みが非常に遅くなります。
私は、Anythingslider、jquery coockies プラグイン、Raty (評価プラグイン)、Tipsuy、jQuery coreUISelect、jScrollPane、マウス ホイールなどの jQuery プラグインを使用しています。これらのサード パーティ製プラグインはすべて、縮小して jquery.plugins.js ファイルにまとめました。約80KBです。
jQueryでDOM要素をたくさん選択しています。たとえば、次のコードを使用します。
$("#element")
それ以外の：
document.getElementById('element');
また、キャッシングとHTTPリクエストの削減のために、すべてのサードパーティのjQueryプラグインのcssファイルを1つのファイルにまとめたため、5,000行を超える大きなCSSファイルが1つあります。
コードを最適化してパフォーマンスを向上させ、Web ページの読み込みを高速化するにはどうすればよいでしょうか。
JS コードのデバッグにはどのようなツールを使用できますか? firebug または Chrome ネイティブ開発者ツールを開いて Google Chrome または Firefox でページを更新すると、その場合のページの読み込みも非常に遅くなることを忘れていました。時には Firefox がつぶれることさえあります。
生の js を使用して DOM 要素を選択すると、ドキュメントを解析するためのより優れた高速な方法が得られますか? それとも、jQueryの選択をやめるべきですか？話は約50要素です。
Anythingslider などの外部プラグインを分離してから縮小する必要がありますか? それとも、「オールインワン」のjsファイルを持っている方が良いですか?
jQuery プラグインの css コードもメインの style.css から分離した方がよいでしょうか? 要素にカーソルを合わせて css ファイルから :hover 状態に影響を与えることさえ、かなり遅いためです。
皆さん、本当に頼りにしています。
私は自分の質問に対する答えを見つけるために一晩中グーグルで検索してきましたが、ここでそれを見つけることを本当に望んでいます.
ありがとう。