HTML 구문 분석 원칙에 대한 설명

표준 웹 프론트엔드 엔지니어가 알아야 할 ◎브라우저(또는 해당 플레이어)의 렌더링/다시 그리기 원리

이 부분은 더 열심히 해야겠습니다. 정말 명확하게 설명하지 않아서 그냥 G-ed 했고 결과가 별로 없어서 적어봤습니다. . .

다음 부분은 handawei-javaeye 블로그에서 발췌한 내용입니다.

웹페이지는 다양한 브라우저에서 실행되며, 브라우저가 페이지를 로드하고 렌더링하는 속도는 사용자 경험에 직접적인 영향을 미칩니다
간단히 말하면, 페이지 렌더링은 CSS에서 정의한 규칙에 따라 브라우저가 브라우저 창에 HTML 코드를 표시하는 프로세스입니다. 먼저, 브라우저의 작동 방식에 대해 전반적으로 이해해 봅시다:
1. 사용자가 URL을 입력하고(html 페이지이고 처음 방문한다고 가정), 브라우저는 서버에 요청을 보내고, 서버가 html 파일을 반환합니다.
2. 브라우저가 html 코드를 로드하기 시작하고

태그에 외부 CSS 파일을 참조하는 태그가 있음을 찾습니다.
3. 브라우저는 CSS 파일에 대한 요청을 다시 보내고 서버는 CSS 파일을 반환합니다.
4. 브라우저는 html의 부분의 코드를 계속 로드하고, CSS 파일을 가져옵니다.
5. 브라우저는 코드에서 를 찾아 이미지를 참조하고 서버에 요청합니다. 이때 브라우저는 이미지가 다운로드될 때까지 기다리지 않고 다음 코드를 계속 렌더링합니다.
6. 이미지가 특정 영역을 차지하므로 서버가 이미지 파일의 배열에 영향을 미칩니다. 다음 단락으로 돌아가서 코드의 이 부분을 다시 렌더링해야 합니다.
7. 브라우저는 Javascript 코드 줄이 포함된 <script> 태그를 찾아서 빠르게 실행합니다. Javascript 스크립트는 브라우저가 코드에서 <div>를 숨기도록 명령하는 이 명령문을 실행합니다(style.display=”none”). 이런, 갑자기 그러한 요소가 누락되어 브라우저가 코드의 이 부분을 다시 렌더링해야 합니다. <br/> 9. 마침내 가 도착하면 브라우저는 눈물을 흘립니다. <br/> 10 . 잠깐만요, 아직 끝나지 않았습니다. 사용자가 인터페이스에서 "스킨 변경" 버튼을 클릭했고 Javascript가 브라우저에 <br/> 태그의 CSS 경로를 변경하도록 요청했습니다. ;div&gt ;<span><ul><li> "모두 짐을 챙기세요. 다시 시작해야 합니다...", 브라우저는 <br/> 서버에 새 CSS 파일을 요청하고 페이지. <… 달리다가 죽었어요. 다행스럽게도 세상에는 여전히 눈에 띄지 않는 그런 그룹의 사람들이 있습니다. 그들은 단지 시각적 디자이너가 그림을 자르고 단어를 바꾸는 것을 돕는 것뿐입니다. <br/>페이지가 왜 느린지 말이에요? 이는 브라우저가 렌더링하는 데 시간과 에너지가 걸리기 때문입니다. 특히 특정 부분이 약간 변경되어 레이아웃에 영향을 미치고 다시 돌아가서 다시 렌더링해야 하는 경우 전문가들은 이 롤백 프로세스를 리플로우라고 부릅니다. <p><p><p> Reflow는 거의 불가피합니다. 트리형 디렉토리의 접기 및 확장(기본적으로 요소 표시 및 숨기기) 등과 같이 현재 인터페이스에서 널리 사용되는 일부 효과로 인해 브라우저가 리플로우됩니다. 마우스 슬라이딩, 클릭... 이러한 작업으로 인해 페이지에 있는 특정 요소의 영역, 위치, 여백 및 기타 속성이 변경되는 한 페이지 전체 내, 주변 또는 전체 페이지가 다시 렌더링됩니다. 일반적으로 우리는 브라우저가 코드의 어느 부분을 리플로우할지 예측할 수 없으며 모두 서로 영향을 미칩니다. <p><p style="max-width:90%"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/963/493/887/1488959472280777.jpg" class="lazy" title="HTML 구문 분석 원칙에 대한 설명" alt="HTML 구문 분석 원칙에 대한 설명" style="max-width:90%" style="max-width:90%"/> Reflow 문제를 최적화하여 불필요한 Reflow를 최소화할 수 있습니다. 예를 들어, 시작 부분의 예에서 <img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" alt="HTML 구문 분석 원칙에 대한 설명" > 이미지 로딩 문제는 실제로 피할 수 있는 리플로우입니다. 이미지의 너비와 높이만 설정하면 됩니다. 이러한 방식으로 브라우저는 이미지가 차지하는 영역을 알고 이미지를 로드하기 전에 공간을 예약합니다. <p>그리고 리플로우(reflow)와 비슷하게 생긴 용어가 있는데, 리페인트(repaint)인데 중국어로 redraw라고 합니다. 주변 또는 내부 레이아웃에 영향을 주지 않고 요소의 배경색, 텍스트 색상, 테두리 색상 등을 변경하면 브라우저가 다시 그려지기만 합니다. 리페인트 속도는 리플로우보다 훨씬 빠릅니다(IE에서는 용어를 변경해야 하며 리플로우는 리페인트보다 느립니다). 다음번에는 Firefox 및 IE와 같은 브라우저에서 리플로우 최적화를 설명하기 위해 일련의 실험을 사용할 것입니다. <p style="max-width:90%"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" title="HTML 구문 분석 원칙에 대한 설명" alt="HTML 구문 분석 원칙에 대한 설명" style="max-width:90%" style="max-width:90%"/></script>

위 내용은 HTML 구문 분석 원칙에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!