CSS 位置レイアウト最適化ガイド: レイアウトの再描画を減らす方法-CSSチュートリアル-php.cn

CSS 位置レイアウト最適化ガイド: レイアウトの再描画を減らす方法

王林

リリース： 2023-09-28 10:47:01

オリジナル

645 人が閲覧しました

CSS Positions布局优化指南：减少布局重绘的方法

CSS ポジションレイアウト最適化ガイド: レイアウトの再描画を削減する方法

フロントエンド開発のプロセスにおいて、レイアウトの再描画 (レイアウト再描画) はパフォーマンスに関する一般的な質問です。ページ要素の位置、サイズ、表示状態が変更されると、ブラウザはページレイアウトを再計算して描画する必要があります。これにより、大量のコンピューティングリソースが消費され、ページの読み込みと応答が遅くなります。ページのパフォーマンスを向上させるには、レイアウトの再描画の回数を減らすための最適化措置を講じる必要があります。この記事では、実際的な CSS Positions レイアウトの最適化方法をいくつか紹介し、具体的なコード例を示します。

絶対配置を使用する

絶対配置は非常に一般的なページレイアウト方法ですが、レイアウトの再描画が容易に発生する方法でもあります。絶対配置を使用する場合は、要素の位置やサイズを頻繁に変更しないようにしてください。変更が必要な要素の位置やサイズに関連するスタイル属性をクラスとして個別に定義し、クラスの className を変更して動的な効果を実現することで、レイアウトの再描画の回数を減らすことができます。

サンプルコードは次のとおりです。

HTML:

<div class="container">
  <div class="box"></div>
</div>
<button onclick="moveBox()">移动盒子</button>

ログイン後にコピー

CSS:

.container {
  position: relative;
  width: 500px;
  height: 500px;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

.box.move {
  top: 100px;
  left: 100px;
}

ログイン後にコピー

JavaScript:

function moveBox() {
  var box = document.querySelector('.box');
  box.classList.toggle('move');
}

ログイン後にコピー

上記のコード内、ボックスの位置変更は .move クラスによって制御され、 の有無の切り替えには JavaScript の classList.toggle メソッドが使用されます。 move クラスを使用して動的な効果を実現します。この利点は、ページレイアウトを毎回再計算して描画するのではなく、クラスの切り替え時にのみレイアウトの再描画がトリガーされることです。

固定配置を使用する (Fixed Positioning)

固定配置は、ブラウザウィンドウ内の要素または親要素を固定するレイアウト方法です。固定位置を使用すると、要素の位置の変更によるレイアウトの再描画を回避し、ページのレンダリングのパフォーマンスを向上させることができます。

サンプルコードは以下のとおりです。

HTML:

<div class="header">
  <h1>固定头部</h1>
</div>
<div class="content">
  <p>页面内容</p>
</div>

ログイン後にコピー

CSS:

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
}

.content {
  margin-top: 50px;
}

ログイン後にコピー

上記コードでは、headのposition属性を設定することで、要素を fix に変更すると、ページをスクロールするときにヘッドが固定されたままになり、スクロール時にページコンテンツによってレイアウトの再描画がトリガーされなくなります。

流体レイアウトの使用

流体レイアウトは、ブラウザウィンドウのサイズに応じて自動的に調整されるページレイアウトです。流動レイアウトを使用すると、ページサイズの変更によるレイアウトの再描画を回避でき、さまざまなデバイスサイズでのレスポンシブ開発に適しています。

サンプルコードは次のとおりです。

CSS:

.container {
  max-width: 1000px;
  margin: 0 auto;
}

.box {
  width: 33.33%;
  float: left;
  padding: 10px;
  box-sizing: border-box;
}

ログイン後にコピー

上記のコードでは、コンテナ要素の最大幅は 1000px に設定されており、 margin 属性が 0 auto に設定されていると、コンテナーが中央に表示されます。アダプティブ効果を実現するために、ボックス要素の幅は 33.33% に設定されています。こうすることで、さまざまな幅のブラウザウィンドウ下でページの表示効果が向上し、レイアウトの再描画の問題も回避されます。

要約すると、絶対配置、固定配置、流動レイアウトなどのテクノロジを合理的に使用することで、レイアウトの再描画の回数を効果的に減らし、ページのパフォーマンスとユーザーエクスペリエンスを向上させることができます。実際の開発では、ページのパフォーマンスを向上させるために、CSS Positions レイアウトの過度の使用を避けるために、特定の状況に応じて最適化する必要もあります。

以上がCSS 位置レイアウト最適化ガイド: レイアウトの再描画を減らす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。