モバイル Web フロントエンド開発は現在非常に人気があり、これ以上人気が高まることはありません。 H5 エンジニアとハイブリッド アプリ開発エンジニアはどこでも採用されており、彼らの主な責任は実際にはモバイル Web フロントエンド開発作業です。フロントエンドの経験がある人なら誰でも、携帯電話のオーバーヘッドが PC よりもはるかに大きいことを知っています。PC シミュレータではスムーズにデバッグできますが、携帯電話を使用するとフリーズしてしまいます。実際、これはパフォーマンスの問題です。コンピューティング リソースを占有する他のオーバーヘッドがあります。では、どのオーバーヘッドが占有しているのでしょうか。バックエンド インターフェイスの遅さ、ネットワークの状態の悪さなどはさておき、今日はブラウザ自体、リフローと再ペイントの詳細について話しましょう。特にCSS3アニメーションを追加したり、複数のDOM要素を一括操作したりする場合、リフローやリペイントの影響はさらに大きくなります。
リペイントは「再描画」であり、DOM要素の視覚効果を変更するときに実行され、レイアウトを変更するときにトリガーされません。たとえば、不透明度、背景色、可視性、アウトラインはすべてトリガーされますが、DOM 要素の視覚効果が変更された後、ブラウザは DOM 要素内のすべてのノードをチェックするため、「再描画」のコストは依然として比較的高くなります。
リフローは「再流動」であり、その影響はさらに大きいです。これは、特定の DOM 要素の位置が変更された後にトリガーされ、すべての要素の位置と、ページ上でそれらが占める領域を再計算します。これにより、ページの特定の部分またはページ全体が再計算されます。 -レンダリングされました。要素を変更すると、そのすべての子、祖先、兄弟に影響します。
リフローとリペイントが実行されると、ユーザーも Web ページも操作を実行したり応答したりできなくなり、極端な場合には CSS によって JS の実行速度が遅くなります。これは、操作後にブラウザが応答しなくなる場合がある理由の 1 つです。
リフローはコストが高いため、いつリフローがトリガーされますか?
DOM 要素の追加、削除、または表示/変更を行うとき: JS を使用して DOM 要素を変更すると、リフローがトリガーされます。
CSS スタイルの追加、削除、変更: CSS スタイルまたは要素のクラスを直接変更するとレイアウトに影響する可能性があり、要素の幅を変更すると、その要素が配置されている DOM ノード内のすべての要素に影響する可能性があります。その周りの要素。
CSS3 アニメーションとトランジション: アニメーションの各フレームでリフローがトリガーされます。
offsetWidth と offsetHeight を使用する: これは非常に特殊で、DOM の offsetWidth プロパティと offsetHeight プロパティを読み取ると、リフローもトリガーされます。これは、これら 2 つのプロパティを計算するためにいくつかの要素に依存する必要があるためです。
ユーザー インタラクション: ユーザーは、リンクにカーソルを置く、入力にテキストを入力する、ブラウザのサイズをドラッグする、フォント サイズを変更する、スタイル シートやフォントを変更するなどを行うと、リフローがトリガーされます。
インライン スタイルやテーブル レイアウトは使用しないでください。フレックスボックス レイアウトもパフォーマンスにいくつかの小さな問題を引き起こします。インライン スタイルでは、HTML のダウンロード後に追加のリフローが実行されます。テーブル レイアウトのオーバーヘッドは、他の DOM 要素よりもはるかに大きくなります。 HTML がダウンロードされた後、Flexbox アイテムのサイズが変更されます。
CSS を省略してみてください。複雑な CSS セレクターの使用を避け、未使用の CSS (https://unused-css.com/)、uCSS (https://github.com/oyvindeh/ucss)、gulp を使用してください。 uncss (https://github.com/ben-eb/gulp-uncss) は、スタイル定義とファイル サイズを効果的に削減できます。
DOM のレベルを下げ、DOM の数を減らします。古いブラウザに適応する必要がない場合は、不要なラッパー DOM 要素を削除します。
DOM ツリーでは、DOM 内に特に多数の子要素を持たないクラスを変更するようにしてください。子要素が少ないクラスは変更できますが、多くは推奨されません。
複雑なアニメーションを使用する要素は、可能な限りposition:absoluteまたはposition:fixedにする必要があります。これにより、それらがドキュメントフローから外され、他の要素に影響を与えなくなります。
display:none を持つ要素は、リフローや再ペイントをトリガーしません。これらの要素を表示する前に、色やサイズなどの変更を加えることができます。
たとえば、次の例ではリフローを 3 回トリガーします:
上記のコードは次の方法で最適化できます:
さらに、新しい DOM を生成するときに DOM フラグメントを使用することもできます。そして最初にメモリ内に DOM を構築します:
多数の DOM が相互作用するのを避けてください
たとえば、タブのようなシナリオでは、タブをクリックすると、そのタブが制御するブロックが表示され、そのブロックが他のブロックに影響を与えます。高さが異なるため、リフローが発生する可能性があります。このシナリオは高さを設定することで最適化できます。
パフォーマンスはかっこよさよりも常に重要です
ウェブページのアニメーションがどれほど素晴らしくても、フレームごとに 1 ピクセル移動することでページがフリーズする場合は、パフォーマンスを優先するという原則を覚えておいてください。毎回フレームを 10 ピクセルずつ移動すると、ページのパフォーマンスが低下することなく、アニメーション フレームが遅くなります。
上の画像を長押しすると、抱き合うサルをフォローできます
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
