legacy-knowledge-base
公開されました Jul. 2, 2025

Microsoft Internet Explorer 11 の CSS スタイル計算によるパフォーマンス問題

投稿者

Justin Choi

knowledge-article-header-disclaimer-how-to

knowledge-article-header-disclaimer

legacy-article

learn-legacy-article-disclaimer-text

Liferay Supportは、特定のサードパーティ製品を他の製品よりも推奨または承認するものではありません。 Liferayは、これらの製品に関して、ここに記載または参照されているいかなる指示に対しても責任を負いません。 これらの原則の実行は、加入者の責任において行われるものとします。

この記事では、Internet Explorer 11 (IE11) を使用して、Liferay DXP 7.0 で高レベルのコンテンツが表示されているページを表示する場合のパフォーマンスの制限について説明します。 これは、CSSを多用したコンテンツであれば、顕著に現れます。 問題は、複数のスタイルの再計算で、それがパフォーマンスの問題を引き起こしたことです。

解像度

実証すること:

  1. DXP 7.0を起動する
  2. コンテンツ → ウェブコンテンツに移動します。
  3. ウェブコンテンツの記事を作成し、CSSで書式を追加する。 例えば、記事にリンクがある場合、リンクの上に mouseOver があったときに、異なる背景色を使用します:
    <style type="text/css">
    
    a:hover {
    	background-color: yellow;
    	
    }
    </style>
    
  4. 記事を公開する。 そのため、どのブラウザでも記事を表示したときに、リンクにマウスを合わせると背景色が黄色に変化します。
  5. IE11に関する記事を表示します。
  6. ツール アイコンをクリック → F12 デベロッパーツール.
  7. Performanceタブに行きます。
  8. ページのさまざまな部分をクリックしながらマウスオーバーしたり、上下にスクロールしたときに記録されるDOMイベントを表示するプロファイルを作成します。

他の類似ブラウザのパフォーマンス指標と比較して、CSS Stylesが数回再計算されたことを示すはずです。 根本的な問題は、IE11がCSSセレクタを処理する方法です。 ページが複雑になればなるほど、パフォーマンスの問題は顕著になります。

さらに、マイクロソフト社も、CSSルールが多すぎるページ のレンダリングに時間がかかりすぎることを認識しています。 ベンチマークについては、こちらの ブログ の記事をご覧ください。

この問題は、Microsoft IE11とEdgeのCSSスタイルのレンダリングと計算方法に関するものなので、Liferayサポートが解決するためにできることはほとんどありません。

追加情報

Developer Toolsの使用方法の詳細については、 Microsoft Edge Performance のドキュメントを参照してください。

IE11の互換モードに関する同様の問題については、 Internet Explorer 11 with Compatibility Mode May Lead to Slow Page Loadをご覧ください。

did-this-article-resolve-your-issue

legacy-knowledge-base