2

Twitter ブートストラップを使用して、自分のサイトに 1 つのページを作成しました。その中で、以下のブートストラップの js を含めました。

bootstrap-transition.js
bootstrap-alert.js
bootstrap-modal.js
bootstrap-dropdown.js
bootstrap-scrollspy.js
bootstrap-tab.js
bootstrap-tooltip.js
bootstrap-popover.js
bootstrap-button.js
bootstrap-collapse.js
bootstrap-carousel.js
bootstrap-typeahead.js

このページは FF と chrome で正常に動作しています。IEでそのページを開いてチェックボックスをオンにすると、そのチェックボックスをオン/オフにするのに時間がかかります。dtropwown の場合も同じことが起こり、ドロップダウンの展開/折りたたみに時間がかかります。

そこで、すべてのブートストラップ js を 1 つずつ削除すると、パフォーマンスが向上し始めました。そして、すべてのブートストラップ js が削除されると、他のブラウザーと同じように正常に動作し始めました。

それで、これを解決する解決策はありますか？

前もって感謝します。

4

2 に答える 2

7

私はjquery-1.8.1.min.js自分のアプリケーションで使用していました。

そして、私は単に置き換えるだけで問題を解決jquery-1.8.1.min.jsしましたjquery-1.8.3.min.js

IEを含むすべてのブラウザで正常に動作するようになりました。

于 2012-11-22T06:36:40.317 に答える
4

JSの量があなたを遅くしているとは思えません。たとえば、Bootstrap の公式ドキュメント ページのボタンをクリックすると、同じようにパフォーマンスが低下しますか? 私は違います。

むしろ、他の JS ライブラリと競合しているか、マークアップの形式が正しくないため、Bootstrap プラグインの 1 つが異常な量のコールバックをページに添付していると思われます。

後者をテストする 1 つの方法は、jQuery.on呼び出されたときにコンソールに出力するように変更することです。jQueryの読み込み後、Bootstrap ライブラリの前に次を実行すると、うまくいきます。

var old = jQuery.fn.on;
jQuery.fn.on = function (types) {
  console.log(types);
  return old.apply(this, arguments);
};

Bootstrap のドキュメントには、50 個のリスナーが登録されており、ほとんどがクリックです。

それ以外の場合、JS の量については、BootstrapCDNが提供するもの ( bootstrap.min.js ) のように、すべての個別のファイルではなく、集約され縮小されたバージョンの Bootstrap を使用する必要があります。開発中のものを使用してください。縮小されたものをパフォーマンス テスト/本番環境で使用します。

于 2012-11-20T16:39:47.650 に答える