JavaScript|Reflowバー(feat.レンダリングブラウザ)
中に入ると…。
フロントエンド開発者としては、ブラウザのレンダリングプロセスを理解する必要があります.また、ブラウザレンダリングでは、コアがリフローされます.DOM要素を扱うときは、リフローを最小限に抑えることに注意してください.そこで、ブラウザのレンダリングプロセスと再生について説明します.
レンダーブラウザ(Render Browser)
ブラウザは、次の方法でスクリーンをレンダリングします.
Load:ブラウザは、HTML、CSS、JS、画像、フォントファイルなどのレンダリングに必要なリソースをサーバに要求して応答します.
HTMLとCSSはレンダリングエンジングループ、ツリー構造、JavaScriptはJavaScriptエンジングループ、ASTを生成します.
レンダリングエンジンは、HTMLファイルとCSSファイルをロードしてグループ化し、DOMとCSSOMを生成し、それらを結合してレンダリングツリーを生成します.
JAvascriptエンジンは、JSファイルをロードしてグループ化し、AST(AbstractSyntax Tree)を生成し、バイトコードに変換して実行します.JAvascriptは、文単位で解釈および実行するインタラクティブな言語です.この場合、JavaScriptはDOM APIを介してDOMまたはCSSOMを変更することができる.変更したDOMとCSSOMは、レンダーツリーに再結合されます.
レンダリングツリーに基づいてHTML要素のレイアウト(位置とサイズ)を計算し、ブラウザ画面に色を塗ります.
ReflowとRepaint
Repaint
は、再結合されたレンダリングツリーの上に画面を塗り直します.
Reflow
レイアウト計算を再実行し、Reflowが発生すると必ずRepaintが発生します.
リフレッシュにはHTML要素の位置とサイズを再計算する必要があるため、リフレッシュに比べて時間がかかります.
つまり、変更する特定の要素の位置とサイズを再計算するだけでなく、関連する他の要素の位置とサイズも再計算します.したがって,頻繁にリフローするコードは避けるべきである.
Reflowが発生しているかどうかを確認します。
Chromeブラウザでは、開発者ツールを使用してリフレッシュが発生したかどうかを確認できます.
次のHTMLコードを作成し、Chromeブラウザで開きます.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>reflow</title>
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// Reflow를 발생시키는 코드
const $box = document.querySelector('.box');
$box.onclick = () => {
$box.style.width = '200px';
$box.style.height = '200px';
};
</script>
</body>
</html>
下図に示すように、box要素をクリックせずに「停止」をクリックすると、最初はレイアウト計算が1回のみ行われ、リフローは発生しません.
ただし、box要素をクリックして「停止」をクリックすると、レイアウト計算とリフレッシュを最初に確認できます.
Reflow発生時
頻繁にリフレッシュされないようにコードを記述することで、ブラウザのレンダリング性能を向上させ、ユーザー体験を向上させることができます.では、リバーロッキーが発生した状況を理解し、彼を避ける代替案を見つけましょう.
還流は6つの場合に発生します。
Layout thrashing cheatsheet
ちなみに上のリンクに入ると、還流が発生するCSSプログラムが出てきます.
Reflowを最小化する方法
これは,快適なユーザ環境を提供するために,リフレッシュ量を最小限に抑える方法である.
レイアウトを極力避ける
widthやheightなどのジオメトリプロパティの変更はロールバックする必要があります.
変更された要素に加えて多くの要素が存在する場合は、すべての要素の位置とサイズを計算するのに多くの時間がかかります.したがって、必要でない場合はwidthやheightなどのジオメトリプロパティの変更は避けたほうがいいです.
逆流をトリガするCSSトリガ:https://csstriggers.com/
ジオメトリのプロパティを変更する必要がある場合は、
transformを使用します.visibility, displayと比較して、opacityを使用すると、パフォーマンスの向上に役立ちます.以前のレイアウトモデルの代わりにFlexboxを使用
floatなどの以前のレイアウトモデルを使用する場合のリフレッシュ時間は、Flexboxを使用する場合よりもずっと長いです.同じビジュアルレイアウトを表現するにはfloatではなくFlexboxを使用することが望ましい.
ただしFlexboxではIE 6-9とOpera 10-11.5のバージョンは提供されていないため、IEを考慮する必要があるページを開発する際には利用できない方法です.
アニメーションのストリーム外での変更
アニメーションなどの複雑なレンダリング変更が必要な場合は、パフォーマンスを向上させるためにHTML要素の流れの外で変更する必要があります.つまり、変更する場合は、絶対位置(
position)または固定位置(absolute)を使用して、fixedを周囲要因に影響しない要因に設定する必要があります.n/a.結論
このプッシュで、ロールバックが発生しないように、必ずホームページを作成しなければならないとは思わないでください.還流を余儀なくされる場合もある.華やかなアニメーションでユーザーに楽しさを伝える過程は、必ずブームを伴う.しかし,ブラウザの性能を改善するためには,フロントエンド開発者は,少なくとも1つの方法でリフローを生成できれば,この方法を選択できる能力を備える必要がある.
リファレンス
Reference
この問題について(JavaScript|Reflowバー(feat.レンダリングブラウザ)), 我々は、より多くの情報をここで見つけました https://velog.io/@heelieben/JavaScript-Reflow-란-feat.-브라우저-렌더링テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol