나는이 자바 스크립트에서 할 때 :적용된 스타일마다 리플 로우가 한번 발생합니까?
element.style.width="100px";
element.style.height="100px";
내가 바로 문서의 2 개 리플 로우가 있다고 말할 수 있습니까?
그리고 나는이 작업을 수행 할 경우 :
element.setAttribute("style","width:100px;height:100px;")은 1 리플 로우가?
사이드 질문 (나는 후자는 단순히 다른 모든 이전에 설정 한 스타일을 우선합니다 것을 알고) : 우리는 추측을 중지하고 브라우저에서 어떤 일이 일어나고 정확히 얼마나 많은 리플 로우 검사 할 수있는 방법이 (크롬/FF/etc)?
내가 자바 스크립트에서이 작업을 수행 할 때 :
element.style.width = "100 픽셀";
element.style.height = "100px";저는 문서에 2 개의 리플 로우가 있다고 말할 수 있습니까?
대부분의 경우. 리플 로우는 (상대적으로) 많은 시간을 필요로하기 때문에 자바 스크립트 실행 중에 만 발생하는 경향이 있습니다. 예를 들어 자바 스크립트가 레이아웃에 의존하는 속성을 다시 읽는 경우 (예 : offsetWidth.
그러나 세부 사항은 구현에 따라 다릅니다.
예, 첫 번째 예에서는 두 번의 리플 로우가 발생하고 두 번째 예에서는 두 번의 리플 로우가 발생합니다. When does reflow happen in a DOM environment?을 확인하십시오.
btw 브라우저에서 얼마나 많은 리플 로우가 수행되는지 검사 할 수있는 방법이 있습니까? – Pacerier
하지만 JavaScript가 레이아웃에 따라 달라지는 속성을 다시 읽을 때만 브라우저에서 리플 로우를 적용 할 수는 없습니다. 사실이라면 읽을 때까지 사용자가 폭을 100px로 보지 않을 수 있기 때문입니다. 너비에 의존하는 리플 로우가 발생하는 속성 즉, 내가 속성을 읽은 적이 없다면, 사용자는 너비가 "등록 된"것으로 보지 않을 것입니다. – Pacerier
@Pacerier - 화면이 사용자를 위해 업데이트 될 때마다. 물론, 필요한 경우 리플 로우가 발생하지만 자바 스크립트의 모든 행에 대해 화면이 업데이트되지는 않습니다. 그러나 Matt이 링크 한 질문을보아야합니다. 거기에 대한 답변은 제 것보다 훨씬 낫습니다. – Alohci
@Alohci +1 대답의 가장 좋은 줄은 "세부 정보가 구현에 따라 달라질 것"이라고 생각합니다. 그것은 확실히 브라우저에서 브라우저로 바뀝니다. 예를 들어 크롬에서는 가능한 한 오랫동안 리플 로우를 시도하고 지연하는 것처럼 보입니다. IE는 (적어도 eariler 것들) 내 경험에 더 자주 reflow 것 같습니다. –