최근 리플로우에 대한 질문을 많이 읽었지만 이전에는 이러한 현상을 눈치 채지 못했기 때문에 최근에는 천천히 연구하기 시작했습니다. 결국 이전에는 많은 성능 세부 사항에 관심을 기울이지 않았습니다. 리플로우에 관해서는 간단히 말하면 DOM의 렌더링(CSS나 다른 요소를 통해 문서 트리의 각 객체의 크기, 레이아웃 등을 계산하는 것)이라고 해야 합니다. 설명은 일방적일 수 있지만 먼저 정의해야 합니다. 이해를 돕기 위한 간단한 개념.
먼저 Mozilla에서 권장하는 CSS 속성의 작성 순서를 살펴보았습니다. 이 작성 순서는 프로젝트의 개발 코드 사양 표준 때문일 뿐만 아니라 합리적인 작성 순서가 더 적합하기 때문입니다. 브라우저의 렌더링 순서.
mozilla.org 기본 스타일
* fantasai가 관리함
* (마크업 가이드 -http://mozilla.org/contribute/writing/markup에 정의된 클래스)
*/
/* 권장 순서:
//속성 표시
*표시하다
*목록 스타일
* 위치
* 뜨다
*분명한
//자체 속성
*너비
*키
* 마진
*심
* 국경
* 배경
//텍스트 속성
* 색상
*세례반
* 텍스트 장식
* 텍스트 정렬
*수직 정렬
*공백
* 기타 텍스트
* 내용
이 "Visual Reflow"는 브라우저의 렌더링 프로세스를 실제로 생생하게 나타냅니다. 이를 통해 브라우저가 로딩 프로세스 중에 모든 DOM을 한 단계에서 올바르게 배치하지 않는 대신 렌더링 결과가 자주 변경되는 것을 볼 수 있습니다. js, css 등이 dom 성능에 미치는 영향을 포함하는 지속적인 계산 후.