데이터 바인딩 및 DOM 리플로우 예시에 대한 자세한 설명

데이터 바인딩 방법:

　　1. 요소 노드를 동적으로 생성하고 페이지에 추가하여 데이터 바인딩을 구현합니다(ul에 동적으로 추가된 li 추가)　

var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            oUl.appendChild(oLi)
        }

　 장점: 필요한 콘텐츠 추가 원래 요소에 영향을 주지 않고 하나씩 동적으로 페이지에 바인딩됩니다.

단점: li을 만들 때마다 이를 페이지에 추가하고 DOM 리플로우를 트리거하면 결국 너무 많은 리플로우가 발생하여 결과에 영향을 미칩니다. 성능.

2. 문자열 접합 방법: 먼저 바인딩해야 하는 데이터를 루프로 묶은 다음 동적으로 바인딩해야 하는 레이블을 문자열 형태로 접합합니다. (문자열 접합은 향후 작업에서 데이터를 바인딩하는 데 가장 일반적으로 사용되는 방법입니다)

 str = ""( i = 0;i<ary.length;i++ cur =+="<li>"+="<span>"+(i+1)+"</span>"+=+="</li>"+= str;//oUl.innerHTML(把之前的li以字符串的方式获取到)+str;拼接完成的整体还是字符串
　　　　 最后再把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签

　 단점: 새로 접합한 문자열을 ul에 추가하고, 원래의 li 바운드 이벤트가 모두 사라졌습니다

장점: 콘텐츠를 미리 연결하고 마지막으로 페이지에 추가하면 리플로우가 한 번만 발생합니다.

JS에서 DOM에 대한 심층적인 지식: 리플로우를 최소화해야 함

리플로우(reflow) : 페이지의 HTML 구조가 변경되면(요소 추가, 삭제 및 위치 변경) 브라우저는 최신 DOM 구조를 다시 계산하고 현재 페이지를 다시 렌더링해야 합니다

Redraw: Part of the 특정 요소의 스타일이 변경된 경우(배경색) 브라우저는 현재 요소를 다시 렌더링

　　3하기만 하면 됩니다. 문서 조각화:　

var frg = document.createDocumentFragment();

　　문서 조각을 만드는 것은 다음과 같습니다. 일시적으로 컨테이너 만들기　

for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            frg.appendChild(oLi)
        }
        oUl.appendChild(frg);
        frg = null;

　　리플로우가 하나만 있고 원래 리플로우에 영향을 주지 않습니다

위 내용은 데이터 바인딩 및 DOM 리플로우 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!