레이아웃 Jank와의 싸움

웹 페이지 렌더링을 완료한다고해서 레이아웃이 고정되어 있음을 의미하지는 않습니다. 미디어 리소스의로드 (예 : 이미지)는 크기로 인해 레이아웃이 변경 될 수 있으며 스트리밍 레이아웃에서는 이미지 크기가 일반적으로 렌더링 후에 만 ​​결정됩니다. 이는 글꼴로드 및 재 배열 레이아웃으로 인해 발생하거나 XHR 요청이 페이지에 더 많은 콘텐츠를 가져옵니다. 우리는 레이아웃 지터를 방지하려고 노력했습니다. 그것이 제가 레이아웃 janks라고 부르는 것입니다. 그것은 성가시고 아무도 그것을 좋아하지 않습니다. 최선의 경우, 읽을 때 위치를 잃게됩니다. 최악의 경우 클릭하지 않으려는 것을 클릭 할 수 있습니다.

Eric Portis는 새로운 레이아웃 불안정성 API를 이해하고 친구들과 토론하려고 노력하면서 매우 통찰력있는 점수를주었습니다. 기본적으로 레이아웃 지터는 문제이며 여러 가지 방법으로 해결하기 위해 노력하고 있습니다.

• 내용/생성 수준에서 문제를 해결하십시오. 이제 우리는 intrinsicsize HTML 속성으로, CSS 속성으로 aspect-ratio 가지고 있습니다. 둘 다이 문제를 해결하도록 설계되었지만 아직 브라우저 지원이 좋지 않지만 대신 DIY 종횡비 상자가 필요합니다. 또한 UA 스타일 시트를 변경한다는 아이디어는 aspect-ratio 효과를 확장한다는 것도 마찬가지입니다.
• 브라우저 동작 수준에서 문제를 해결하십시오. 스크롤 고정은이 문제를 해결하도록 설계되었습니다. 이제 기본적으로 활성화 된 것은 큰 발전입니다. 필요한 경우 CSS를 통해 ( overflow-anchor 통해) 여전히 제어 할 수 있습니다.
• 문제 및 원인 측정 : 레이아웃 불안정성 API는이를 위해 설계되었으며 도구를 모니터링하는 데 사용할 수 있습니다.

위 내용은 레이아웃 Jank와의 싸움의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!