2016-04-06 28 views
11

私はAngular Materialと外部APIからロードされたデータを使ってAngularJSアプリを持っています。IE「スタイル計算」のパフォーマンスがAngularJSアプリで非常に遅い

これは特にこのアプリで画期的なものではなく、Chrome、Firefox、Safariではすべてのテストが完全に正常に実行されます。

ただし、Internet Explorerを使用すると、すべての地獄が緩んでしまいます。アプリは信じられないほど遅いです、CSSのアニメーションは痛いほど遅く、アプリは完全に使用できません。

多くの潜在的なバグ修正とデバッグを試してきましたが、私は一気に上がってきています。私が見ることができる

もの:私はIE11の開発者ツールを使用して、パフォーマンスログを実行すると

  • 、「スタイルの計算」には、これまでで、ほとんどの時間量を取ります。
  • 私はワイルドカードCSSセレクタのパフォーマンスが(*{box-sizing: border-box}のように)遅い持っ

文字通り私はすべてがmd-virtual-repeatを下にスクロールされたときにここでは、パフォーマンスの検査官からの出力です:

IE Performance: Style Calculation

ご覧のとおり、style calculationはここで多くの時間を費やしています。

これに対応するために、グーグルが飛び交っています。何が起きてる?これは赤ちゃんだ、問題は私のアプリのどこか他の場所にある(私のJSは私が考えていると思うほど効率的だし、実際のデータではなく、30個の静的オブジェクトを仮想リピータにロードしてテストした。結果は同じです)。

+0

私は、これらの素材デザインのCSSとそのセレクタがIEで遅いと聞いています。 – YOU

+1

IE11でもngMaterial 1.0.7と同様の問題があります。 intl-tel-inputとangular-materialを組み合わせると、電話番号の国コードで国リストをスクロールするたびに、各スクロールをレンダリングするのに750msかかる。ばかばかしいことばかりでなく、他のすべてのブラウザが正常に動作します。解決策を見つけたら、pingしてください。今、私はCSSをレビューしています。いくつかのCSSをコメントアウトして速度の向上に気づいていますが、全体的にまだ遅く遅れています。 – ngDeveloper

+2

@ngDeveloper解決策は、(a)最新のngMaterialにアップグレードすることでした。私はそれがRC2だと思うし、(b)IEは私が持っていたCSSの量によって過負荷になっていました。使用されていたCSSライブラリのいくつかを削除すると、サイトの速度にかなり大きな影響がありました。 – Jascination

答えて

0

@ngDeveloperがコメントで指摘する解決策は、ngMaterialをアップグレードすることです。私はこの問題を抱えていて、それは私のために問題を引き起こしていたpositionElementsでした。

1

私はそれが含まれているCSSルールによって引き起こされた私の特定のケースでは100%に、「スタイルの計算」はスクロールしながら700ms程度取って、ロードCPUと同じ問題(IE11、Win10)

を持っていました"+"セレクタ、例えば

削除した後で正常に動作します。

時間を2〜3時間節約したいと考えています。

関連する問題