1.DOM再描画とリターンリペイント＆リフロー
1.1再描画：要素のスタイルの変更（ただし、幅と高さ、大きさ、位置など変わらず）
如アウトライン、可視性、色、背景色等
1.2戻り値：要素のサイズや位置を再レンダリングツリー設計レイアウトとレンダリングにつながる、再レイアウトをトリガーする、（ときにページのレイアウトやジオメトリーの変更）に変更されます。
そのような追加または可視DOM要素を削除するように、要素の位置の変化を、素子サイズの変更、コンテンツの変更（例えば、テキストや画像のサイズを変更すると、他の異なる画像によって置換される）;開始ページレンダリング時間を（あります）を回避することができない。還流がビューポートのサイズ、また還流原因ブラウザウィンドウサイズの変化に応じて要素の位置及び大きさとして算出されます。
注還流が再描画をトリガする、再描画は必ずしも還流しません。
2.フロントエンドのパフォーマンスの最適化：DOMの回避還流
従来のオペレーティングDOMを放棄2.1は、反応VUE開始データに基づいて表示モードに影響を与えます/
等がDOMを直接操作を避けるために、VUEフレームの仮想DOM / DOMの差分を反応させることができます。
2.2分離読み取りおよび書き込み操作（最近のブラウザがメカニズムキューのレンダリングを持っています）
スタイルスタイル
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
</style>コードのボディ
<body>
<div id="box"></div>
<script>
//(1)
let box = document.getElementById('box');
box.style.width = '200px'; //大小发生变化，引发一次回流
box.style.height = '200px';
box.style.margin = '10px';
//因为浏览器存在渲染队列机制，如果引发回流的语句挨在一起写，只会引发一次回流
//(2)
box.style.height = '300px';
console.log(box.clientWidth); //不引发回流
box.style.margin = '20px';
//中间插入非引发回流语句，打断了任务队列，所以总共回流2次
//(3)
box.style.height = '300px';
box.style.margin = '30px';
console.log(box.clientWidth); //只引发一次DOM回流
/*分离读写:就是把能引发回流的"写语句"与不能引发回流的"读语句"分开写，以减少回流次数*/
</script>
</body>2.3集中型のスタイルの変更
スタイルスタイル
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
.a {
width: 200px;
}
</style>コードのボディ
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box');
/*批量处理：把元素的多个样式统一修改减少DOM的回流*/
//(1)直接添加多种样式
// box.style.cssText = 'width:200pxl;height:200px;';
//(2)通过添加类名添加多种样式
box.className = 'a';
</script>
</body>2.4キャッシュされたレイアウト情報
コードのボディ
<body>
<script>
let box = document.getElementById('box');
//缓存处理(实质上属于分离读写)
//(1)
box.style.width = box.clientWidth + 10 + 'px';
box.style.height = box.clientHeight + 10 + 'px';
//由于box.clientWidth获取操作，终端了任务队列，上面语句触发两次DOM回流
//(2)
let a = box.clientWidth;
let b = box.clientHeight;
box.style.width = a + 10 + 'px';
box.style.height = b + 10 + 'px';
//先使用一个变量存储获取的数据，再进行写操作，就不会中断任务队列，只触发一次DOM回流。
</script>
</body>2.5一括編集要素
コードのボディ
<body>
<ul id="box">
</ul>
<script>
//批量处理：在ul中动态创建5个li
var box = document.querySelector('#box');
//(1)
for (let i = 0; i < 5; i++) {
let newLi = document.createElement('li');
newLi.innerHTML = i;
box.appendChild(newLi);
}
//这种写法循环几次便会引发几次回流不可取
//(2) 文档碎片
let frg = document.createDocumentFragment(); //创建一个文档碎片的临时容器
for (let i = 0; i < 5; i++) {
let newLi = document.createElement('li');
newLi.innerHTML = i;
//创建的li先储存在文档碎片中
frg.appendChild(newLi);
}
box.appendChild(frg);
frg = null; //对于不用的容器，要进行销毁释放
//相当于把文档碎片frg中的对象一次性添加到box中只引发一次文档回流。可取
//(3)模板字符串拼接 (最优)
let str = ``;
for (let i = 0; i < 5; i++) {
str += `<li>${i}</li>`;
}
box.innerHTML = str; //只引发一次回流
//运用ES6的模板字符串，添加标签十分方便，并且能够有效减少文档回流，为最优方法。
</script>
</body>2.6アニメーションは、絶対に位置プロパティを使用するか（文書フローから）固定されなければなりません
あなたが位置要素にマージンおよびその他のプロパティを使用している場合は、位置の他の要素を還流に影響を与えると発生します。ドキュメントフロー要素のpositionプロパティを使用して配置すると、新しい平面上の操作、逆流を引き起こす可能性がありますが、取り外すことができますが、他の要素、および優れたパフォーマンスには影響しません。
2.7CSS3ハードウェアアクセラレーション（GPUアクセラレーション）
リフローおよび再描画する必要はありません、我々はそれを期待して、再描画、逆流を軽減する方法を検討するために比較すると、変換、不透明度、フィルタ...これらの属性は、ハードウェアアクセラレーションをトリガする逆流及び再描画につながることはありません。
一般的に（スタイルの変更は絶対に正常ではないスタイルを変えることができる）より、変換の使用。そのような要素の動きを翻訳するような特性で逆流が発生することはありません。
短所：メモリ集約し、深刻なパフォーマンスのオーバーヘッドに複数のリードと。
スピードのための滑らかさを犠牲2.8
総移動アニメーション100pxに、各第2のモバイル1ピクセル、高平滑性が、原因リフロー100がケース単に、毎秒、比較的貧弱な滑らかさを移動10pxのは、それは10還流をもたらします。前者が速い場合、好ましくは、コンピュータは、低速なコンピュータでは、後者を取る必要があります。
テーブルのレイアウトを使用して2.9避けてください
ネストの層にテーブルレイアウトとしては、基本的なスタイルの追加が完了し、層、良い文体、およびDOMのパフォーマンスを最適化を助長していないだけではなくて、レイヤーからスタイルに始まりました。