고성능 JavaScript 리플로우 및 다시 그리기(2)_javascript 기술

이전 기사 고성능 JavaScript DOM 프로그래밍 을 검토해 보겠습니다. 하나는 DOM 액세스를 최소화하고 다른 하나는 최대한 캐시하는 것입니다. 길이 등의 지역 변수가 가능합니다. 마지막으로 결합 선택 시 과감하게 사용할 수 있는 두 가지 새로운 API인 querySelector() 및 querySelectorAll()이 도입되었습니다. 이 기사에서는 주로 DOM 프로그래밍, 재배치 및 다시 그리기에서 가장 시간이 많이 걸리는 부분에 대해 설명합니다.

1. 리플로우와 리드로우란 브라우저가 페이지 HTML 태그, JavaScript, CSS 및 이미지의 모든 구성 요소를 다운로드한 후
DOM 트리와 렌더링 트리라는 두 가지 내부 데이터 구조를 구문 분석하고 생성합니다.

DOM 트리는 페이지 구조를 나타내고, 렌더링 트리는 DOM 노드가 표시되는 방식을 나타냅니다. 표시되어야 하는 DOM 트리의 각 노드에는 렌더링 트리에 적어도 하나의 해당 노드가 있습니다(표시 값이 없음인 숨겨진 DOM 요소는 렌더링 트리에 해당 노드가 없습니다). 렌더링 트리의 노드는 "프레임" 또는 "상자"라고 하며 페이지 요소를 패딩, 여백, 테두리 및 위치가 있는 상자로 이해하는 CSS 모델의 정의를 따릅니다. DOM과 렌더 트리가 구성되면 브라우저는 페이지 요소를 표시(그리기)하기 시작합니다.

DOM 변경이 요소의 기하학적 속성(너비 또는 높이)에 영향을 미치는 경우 브라우저는 요소의 기하학적 속성을 다시 계산해야 하며 다른 요소의 기하학적 속성과 위치도 영향을 받습니다. 브라우저는 렌더 트리의 영향을 받은 부분을 무효화하고 렌더 트리를 재구성합니다. 이 과정을

재배열이라고 합니다. 리플로우가 완료된 후 브라우저는 영향을 받은 부분을 화면에 다시 그립니다. 이 과정을 다시 그리기라고 합니다. 브라우저의 흐름 레이아웃으로 인해 렌더 트리 계산은 일반적으로 한 번만 통과하면 됩니다. 테이블과 내부 요소를 제외하고 렌더링 트리에서 노드의 속성을 결정하려면 여러 계산이 필요할 수 있으며 이는 일반적으로 동등한 요소에 비해 3배의 시간이 걸립니다. 이것이 레이아웃에 테이블을 사용하지 말아야 하는 이유 중 하나입니다.

모든 DOM 변경 사항이 기하학적 속성에 영향을 미치는 것은 아닙니다. 예를 들어 요소의 배경색을 변경해도 요소의 너비와 높이에는 영향을 미치지 않습니다.

2. 재배치하고 다시 그리는 비용은 얼마인가요
리플로우와 리페인트 비용은 얼마나 되나요? 다리를 건너는 이전 사례로 돌아가 보면, "다리를 건너는 것"으로 인해 천배의 시간 차이가 발생하지 않는다는 것을 알 수 있습니다. . 그리고 대부분의 에너지 소비가 여기서 발생합니다!

var times = 15000;

// code1 每次过桥+重排+重绘
console.time(1);
for(var i = 0; i < times; i++) {
 document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);

// code2 只过桥
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
 var tmp = document.getElementById('myDiv2').innerHTML;
 str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);

// code3 
console.time(3);
var _str = '';
for(var i = 0; i < times; i++) {
 _str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str;
console.timeEnd(3);


// 1: 2874.619ms
// 2: 11.154ms
// 3: 1.282ms

데이터는 거짓말을 하지 않습니다. DOM에 여러 번 액세스하는 것은 DOM을 리플로우하고 다시 그리는 데 걸리는 시간 때문에 언급할 가치가 없습니다.

3. 재배치는 언제 진행되나요
분명히 모든 재배치는 필연적으로 다시 그려지게 됩니다. 그러면 어떤 상황에서 재배치가 발생합니까?

1. 표시되는 DOM 요소 추가 또는 삭제

2. 요소 위치 변경
3. 요소 크기 변경
4. 요소 콘텐츠 변경(예: 텍스트가 다른 크기의 다른 이미지로 대체됨)
5. 페이지 렌더링 초기화(피할 수 없음)
6. 브라우저 창 크기 변경
아마도 여러분은 이미 이런 경험을 했을 것입니다. 브라우저 창의 크기를 계속 변경하면 UI가 느리게 반응하게 됩니다(일부 낮은 버전의 IE도 바로 중단됩니다). 재배치하고 다시 그리는 것이 원인입니다!

4. 렌더 트리 변경 대기열 및 새로 고침 다음 코드를 고려해보세요:

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

처음에는 요소의 스타일이 세 번 변경되었고 변경될 때마다 재배치 및 다시 그리기가 발생하므로 총 세 번의 재배치 및 다시 그리기 프로세스가 있지만 브라우저는 그렇게 바보가 아니므로 세 번 수정합니다. "저장"(대부분의 브라우저는 수정 사항을 대기열에 넣고 일괄적으로 실행하여 재정렬 프로세스를 최적화합니다)이 한 번에 완료됩니다! 그러나 (종종 무의식적으로) 대기열 플러시를 강제로 실행하고 예약된 작업을 즉시 실행해야 하는 경우가 있습니다. 레이아웃 정보를 얻는 작업으로 인해 다음과 같이 대기열이 새로 고쳐집니다.

1.offsetTop, offsetLeft, offsetWidth, offsetHeight

2.scrollTop, scrollLeft, scrollWidth, scrollHeight
3.clientTop, clientLeft, clientWidth, clientHeight
4.getCompulatedStyle()(IE의 currentStyle)
위의 코드를 약간 수정하세요:

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';

// here use offsetHeight
// ...
ele.style.padding = '5px';

因为offsetHeight属性需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值（即使队列中改变的样式属性和想要获取的属性值并没有什么关系），所以上面的代码，前两次的操作会缓存在渲染队列中待处理，但是一旦offsetHeight属性被请求了，队列就会立即执行，所以总共有两次重排与重绘。所以尽量不要在布局信息改变时做查询。

5、最小化重排和重绘
我们还是看上面的这段代码：

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

三个样式属性被改变，每一个都会影响元素的几何结构，虽然大部分现代浏览器都做了优化，只会引起一次重排，但是像上文一样，如果一个及时的属性被请求，那么就会强制刷新队列，而且这段代码四次访问DOM，一个很显然的优化策略就是把它们的操作合成一次，这样只会修改DOM一次：

var ele = document.getElementById('myDiv');

// 1. 重写style
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

// 2. add style
ele.style.cssText += 'border-;eft: 1px;'

// 3. use class
ele.className = 'active';

6、fragment元素的应用
看如下代码，考虑一个问题：

<ul id='fruit'>
 <li> apple </li>
 <li> orange </li>
</ul>

如果代码中要添加内容为peach、watermelon两个选项，你会怎么做？

var lis = document.getElementById('fruit');
var li = document.createElement('li');
li.innerHTML = 'apple';
lis.appendChild(li);

var li = document.createElement('li');
li.innerHTML = 'watermelon';
lis.appendChild(li);

很容易想到如上代码，但是很显然，重排了两次，怎么破？前面我们说了，隐藏的元素不在渲染树中，太棒了，我们可以先把id为fruit的ul元素隐藏（display=none)，然后添加li元素，最后再显示，但是实际操作中可能会出现闪动，原因这也很容易理解。这时，fragment元素就有了用武之地了。

var fragment = document.createDocumentFragment();

var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);

var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);

document.getElementById('fruit').appendChild(fragment);

文档片段是个轻量级的document对象，它的设计初衷就是为了完成这类任务——更新和移动节点。文档片段的一个便利的语法特性是当你附加一个片断到节点时，实际上被添加的是该片断的子节点，而不是片断本身。只触发了一次重排，而且只访问了一次实时的DOM。

7、让元素脱离动画流
用展开/折叠的方式来显示和隐藏部分页面是一种常见的交互模式。它通常包括展开区域的几何动画，并将页面其他部分推向下方。

一般来说，重排只影响渲染树中的一小部分，但也可能影响很大的部分，甚至整个渲染树。浏览器所需要重排的次数越少，应用程序的响应速度就越快。因此当页面顶部的一个动画推移页面整个余下的部分时，会导致一次代价昂贵的大规模重排，让用户感到页面一顿一顿的。渲染树中需要重新计算的节点越多，情况就会越糟。

使用以下步骤可以避免页面中的大部分重排：

使用绝对位置定位页面上的动画元素，将其脱离文档流
让元素动起来。当它扩大时，会临时覆盖部分页面。但这只是页面一个小区域的重绘过程，不会产生重排并重绘页面的大部分内容。
当动画结束时恢复定位，从而只会下移一次文档的其他元素
总结
重排和重绘是DOM编程中耗能的主要原因之一，平时涉及DOM编程时可以参考以下几点：

尽量不要在布局信息改变时做查询（会导致渲染队列强制刷新）
同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）
如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排（fragment元素的应用）
将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

以上就是高性能JavaScript 重排与重绘的全部介绍内容，大家可以结合上一篇高性能JavaScript DOM编程（1）一起学习，

希望这两篇文章可以帮到大家，解决大家这方面的疑惑。