집 > 기사 > 웹 프론트엔드 > JavaScript에 최적화된 DOM

JavaScript에 최적화된 DOM

php中世界最好的语言원래의: 2018-03-19 16:27:091825검색

이번에는 DOM 최적화를 위한 JavaScript와 DOM 최적화를 위한 JavaScript용 notes에 대해 소개하겠습니다.

DOM 최적화는 오래전부터 다시 그리기 및 리플로우로 시작해야 합니다...

1. 다시 그리기 및 리플로우

1.1 다시 그리기 및 리플로우란

다시 그리기는 일부 스타일 수정을 의미하지만, 요소의 위치와 크기가 변경되지 않았습니다.

재배열은 요소의 위치나 크기가 변경되었음을 의미하며 브라우저는 새 렌더링 트리가 설정된 후 영향을 받는 요소를 다시 계산해야 합니다. 다시 그려집니다.

1.2 브라우저 렌더링 페이지

인터뷰에 가면 항상 묻는 질문이 있습니다. 즉, "브라우저에 URL 한 줄을 입력하면 어떻게 되나요?" 이 질문에 대한 대답에는 추가 사항이 필요합니다. 네트워크 지식에 대한 브라우저 렌더링 페이지 문제도 포함됩니다. 브라우저가 서버로부터 응답된 페이지를 받으면 한 줄씩 렌더링을 시작합니다. CSS를 만나면 속성 값을 비동기적으로 계산한 다음 구문 분석이 완료된 후 DOM 트리를 계속해서 구문 분석합니다. 계산된 스타일(스타일 상자)은 DOM 트리와 결합되어 렌더 트리를 형성하고, 브라우저가 이를 페이지에 그립니다. DOM 트리와 렌더 트리의 차이점은 display:none 스타일의 노드가 DOM 트리에는 있지만 렌더 트리에는 없다는 것입니다. 그리기를 마친 후 브라우저는 js 파일을 구문 분석하기 시작하고 js를 기반으로 다시 그리기 및 리플로우 여부를 결정합니다.

1.3 다시 그리기 및 리플로우를 수행하는 이유

다시 그리기를 유발하는 요소:

요소 크기, 위치 등을 변경하지 않고 가시성, 윤곽선, 배경색 및 기타 스타일 속성을 변경합니다. . 브라우저는 요소의 새 속성을 기반으로 다시 그립니다.

리플로우를 유발하는 요인:

콘텐츠 변경

텍스트 변경 또는 이미지 크기 변경

DOM 요소의 기하학적 속성 변경

예를 들어, DOM 변경 요소의 너비와 높이 값이 변경되면 원래 렌더링 트리의 관련 노드가 무효화되고 브라우저는 변경된 DOM을 기반으로 렌더링 트리의 관련 노드를 재정렬합니다. 상위 노드의 기하학적 속성이 변경되면 하위 노드와 후속 형제 노드의 위치가 다시 계산되어 일련의 재배열이 발생합니다.

DOM 트리의 구조 변경

DOM 노드 추가, DOM 노드 위치 수정, 노드 삭제는 모두 DOM 트리 변경이므로 페이지 재정렬이 발생합니다. 브라우저 레이아웃은 위에서 아래로 진행되는 프로세스입니다. 현재 요소를 수정하면 이전에 탐색된 요소에는 영향이 없습니다. 그러나 새 요소가 모든 노드 앞에 추가되면 모든 후속 요소가 재정렬됩니다.

일부 속성 가져오기

렌더링 트리의 직접적인 변경 외에도 일부 속성 값을 가져올 때 브라우저는 올바른 값을 가져오기 위해 재정렬됩니다.
. offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

브라우저 창 크기 변경

창 크기 변경은 전체 웹 페이지 내 요소 크기 변경, 즉 DOM 요소의 컬렉션 속성 변경에 영향을 미치므로 재배열이 발생합니다.

스크롤 막대의 모양(전체 페이지의 리플로우를 트리거함)

간단히 말해서 js는 단일 스레드이고 다시 그리기 및 리플로우는 사용자 작업을 차단하고 영향을 미친다는 것을 알아야 합니다. 예를 들어 페이지 요소의 너비와 높이를 500ms마다 변경하는 타이머를 작성하는 경우와 같이 페이지가 여러 번 다시 그려지고 리플로우되면 페이지가 점점 더 중단될 수 있습니다. 최대한 리플로우합니다. 그런 다음 DOM 최적화도 이 시작점을 기반으로 합니다.

2. 최적화

2.1 액세스 감소

당연히 요소 캐싱을 의미하지만

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

이는 ele에 대한 각 호출은 여전히 ID에 한 번 액세스하는 것과 동일합니다. .은 ele의 노드입니다.

2.1.1 Cache NodeList

var foods = document.getElementsByClassName('food');

food[i]를 사용하여 클래스 food로 i번째 요소에 접근할 수 있지만 여기의 음식은 배열이 아니라 NodeList입니다. NodeList는 정렬된 노드를 저장하고 위치별로 이러한 노드에 액세스할 수 있는 배열과 유사한 배열입니다. NodeList 개체는 동적이며 문서 기반 쿼리는 액세스할 때마다 실행됩니다. 따라서 NodeList에 대한 방문 횟수를 최소화해야 하며 NodeList의 값을 캐싱하는 것을 고려할 수 있습니다.

// 优化前var lis = document.getElementsByTagName('li');for(var i = 0; i < lis.length; i++) {     // do something...  }// 优化后，将length的值缓存起来就不会每次都去查询length的值var lis = document.getElementsByTagName('li');for(var i = 0, len = lis.length; i < len; i++) {     // do something...  }

그리고 NodeList는 동적으로 변경되기 때문에 캐시하지 않으면 NodeList의 길이를 가져오다가 요소를 추가하는 등 무한 루프가 발생할 수 있습니다.

2.1.2 선택기 변경

요소를 얻는 가장 일반적인 두 가지 방법은 getElementsByXXX()와 queryselectorAll()입니다. 이 두 선택기의 차이점은 전자는 동적 컬렉션을 얻는 것이고 후자는 매우 큽니다. 예를 들어 정적 컬렉션을 얻으려면.

// 假设一开始有2个livar lis = document.getElementsByTagName('li');  // 动态集合var ul = document.getElementsByTagName('ul')[0]; 
for(var i = 0; i < 3; i++) {
    console.log(lis.length);    var newLi = document.createElement('li'); 
    ul.appendChild(newLi);
}// 输出结果：2， 3， 4var lis = document.querySelector('li');  // 静态集合 var ul = document.getElementsByTagName('ul')[0]; 
for(var i = 0; i < 3; i++) {
    console.log(lis.length);    var newLi = document.createElement('li'); 
    ul.appendChild(newLi);
}// 输出结果：2， 2， 2

정적 컬렉션에 대한 작업으로 인해 문서가 다시 쿼리되지 않으므로 동적 컬렉션보다 더 최적화됩니다.

2.1.3 불필요한 루프 방지

// 优化前
for(var i = 0; i < 10; i++) {
    document.getElementById('ele').innerHTML += 'a';

} 
// 优化后 
var str = ''; 
for(var i = 0; i < 10; i++) {
    str += 'a'; 
}
document.getElementById('ele').innerHTML = str;

사전 최적화된 코드는 ele 요소에 10번 액세스하는 반면, 최적화된 코드는 한 번만 액세스하므로 효율성이 크게 향상됩니다.

2.1.4 이벤트 위임

js의 이벤트 함수는 모두 객체입니다. 이벤트 함수가 너무 많으면 많은 메모리를 차지하게 됩니다. 게다가 이벤트에 바인딩된 DOM 요소가 많을수록 DOM의 양도 더 많아집니다. 액세스되고 페이지의 대화형 준비 시간도 늘어납니다. 따라서 이벤트 위임은 이벤트 버블링을 사용하여 특정 유형의 모든 이벤트를 관리하기 위해 하나의 이벤트 핸들러 프로그램만 지정할 수 있습니다.

// 事件委托前var lis = document.getElementsByTagName('li');for(var i = 0; i < lis.length; i++) {
   lis[i].onclick = function() {
      console.log(this.innerHTML);
   };  
}    
// 事件委托后var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(event) {
   console.log(event.target.innerHTML);
};

이벤트 위임 전에는 lis.length번의 li를 방문했지만, 이벤트 위임을 사용한 후에는 ul에 한 번만 방문했습니다.

2.2 다시 그리기 및 재배열 줄이기

2.2.1 dom 노드의 여러 스타일 변경

p 요소의 너비와 높이를 변경하고 싶습니다. 일반적인 접근 방식은 다음과 같습니다

 p = document.getElementById('p1'

The 위의 작업 요소의 두 가지 속성이 변경되었고 DOM에 세 번 액세스했으며 두 번의 재배열과 두 번의 다시 그리기가 트리거되었습니다. 최적화는 방문 횟수와 다시 그리기 및 재정렬 횟수를 줄이는 것이라고 말했습니다. 이 시작점에서 요소에 한 번만 액세스하고 재정렬 횟수를 1로 줄일 수 있습니까? 분명히 가능합니다. CSS로 클래스를 작성할 수 있습니다

/* css
.change {
    width: 220px;
    height: 300px;
}*/document.getElementById('p').className = 'change';

이 방법으로 한 번에 여러 스타일을 조작할 수 있습니다

2.2.2 DOM 노드 스타일을 일괄 수정합니다

위 코드는 하나의 dom 노드에 대한 것입니다. DOM 컬렉션의 스타일을 변경하고 싶다면?

가장 먼저 생각나는 방법은 컬렉션을 탐색하고 각 노드에 className을 추가하는 것입니다. 다시 생각해 보세요. 이는 dom 노드를 여러 번 방문했다는 의미가 아닌가요? 기사 시작 부분에서 언급한 DOM 트리와 렌더링 트리의 차이점을 생각해 보세요. 노드의 표시 속성이 없음이면 이 노드는 렌더 트리에 존재하지 않습니다. 즉, 이 노드의 작업은 렌더링 트리에 영향을 주지 않으며 다시 그리기 및 재배열이 발생하지 않습니다. 이 아이디어를 기반으로 최적화를 달성할 수 있습니다.

Display: none;
수정할 컬렉션의 상위 요소
之后遍历修改集合节点
将集合父元素display: block;

// 假设增加的class为.changevar lis = document.getElementsByTagName('li');  
var ul = document.getElementsByTagName('ul')[0];
ul.style.display = 'none';for(var i = 0; i < lis.length; i++) {
    lis[i].className = 'change';  
}
ul.style.display = 'block';

3、总结

减少访问dom的次数

缓存节点属性值
选择器的使用
避免不必要的循环
事件委托

减少重绘与重排

使用className改变多个样式
使父元素脱离文档流再恢复

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！