HTML 랜더링 과정 순서

웹 브라우저의 HTML 문서 렌더링 프로세스

1. 로딩

로더가 서버에서 받은 리소스 스트림을 읽는 프로세스입니다.

'추천 관련글,

읽을 때 어떤 종류의 파일인지, 데이터인지 또는 파일을 다운로드할지 결정합니다.

2. 위상 위치

웹 엔진의 HTML/XML 파서는 문서를 파싱하고 DOM 트리를 만듭니다.

3. 렌더 트리 구축

DOM 트리는 컨텐츠를 저장하는 트리로 JavaScript에서 접근하는 DOM 객체를 작성할 때 사용되며, 렌더링 트리인 별도의 문자 트리를 생성해야 합니다.

(그리기 시 불필요한 Head, Title, Body 태그 없음 + DOM에 존재하지만 화면에서 필터링이 필요한 것 필터링, e.g. Display:none)

4. CSS 결정

CSS에 적용되는 태그는 선택기에 따라 다르기 때문에 모든 CSS 스타일을 분석하여 태그에 적용할 스타일 규칙을 결정합니다.

5. 배치

개체는 렌더 트리에서 위치나 크기가 없기 때문에 개체의 위치를 지정하고 크기를 조정하는 프로세스를 레이아웃이라고 합니다.

6. 그리기

렌더 트리를 통과하면서 그립니다.

* 가능한 경우 렌더링 엔진은 HTML 문서가 구문 분석될 때까지 기다리지 않고 레이아웃 및 그리기 프로세스를 시작합니다.

위의 CSS 아래 스크립트?

이는 웹 브라우저의 재생 순서를 이해하는 경우 의미가 있습니다.

문서를 파싱하고 DOM 트리를 빌드해도 스타일 규칙이 없으면 렌더링이 불가능합니다.

즉, 렌더링 트리가 완전히 구축되기 위해서는 최대한 빨리 스타일 규칙을 알아야 합니다.

-태그 (인터프리터에서 HTML 파일을 위에서 아래로 읽기)

성능 향상을 위해 JavaScript를 아래에 배치해야 하는 이유는 무엇입니까?

이는 JavaScript가 DOM 개체를 사용하여 구성 요소를 조작하기 때문입니다.

B. 사이 태그, HTML 파서는 구문 분석을 중지하고 스크립트 파일을 읽습니다.

파싱을 멈추고 읽기 때문에 그 위에 스크립트 파일이나 대용량 파일이 많을 경우 읽기에 시간이 오래 걸리고 웹페이지가 사용자 입장에서 느리게 보이기 때문에 느리게 느껴질 수 있습니다.

코딩을 잘못하더라도 HTML이 파싱되기 전에 JavaScript 파일이 실행되어 적용되지 않는 것을 확인할 수 있습니다.

그래서 우리는 일반적으로 스크립트를 -낮.

* 이렇게 하면 자바스크립트 애니메이션이 늦게 적용되는 것을 볼 수 있습니다.

그래서 처음 웹 페이지에 들어가면 매우 짧은 시간 동안 다른 웹 페이지가 표시된 다음 애니메이션이 적용됩니다.

head> 태그 사이에 넣어 적용하는 방법이 있습니다.

.

jQuery Document.ready(), Window.load() 실행 순서

$(document).ready() : 외부 리소스나 이미지에 관계없이 DOM 트리를 빌드한 후 실행합니다.

$(window).load() : 화면에 필요한 모든 요소가 메모리에 로드된 후 실행됩니다.

(=화면이 완전히 그려진 후)

이미 결론은 내려졌습니다.

$(document).ready()는 DOM 트리가 생성된 직후에 실행되므로 $(window).load()보다 먼저 실행된다.

$(window).load() 사용시 주의사항

– 바디의 onload 이벤트 적용 시 $(window).load()를 실행하면 안됩니다.

– $(window).load()가 내부에 있으면 외부 링크나 파일이 포함되어 있으면 그 중 하나만 실행된다.

– 웹 페이지에 이미지가 많고 이미지 로드 시간이 오래 걸리는 경우 $(window).load()가 로드될 때까지 지연됩니다.

* 다른 렌더링 최적화 방법으로 초기 렌더링에서 AJAX 요청을 최소화하는 방법있다

처음 HTML은 화면을 구성하는 레이아웃만 가지고 있다가 나중에 AJAX 요청을 통해 실제 데이터를 받으면

1차 렌더링이 끝난 후 AJAX에서 제공하는 데이터를 이용하여 2차 렌더링을 하기 때문에 2번 렌더링을 하기 때문에 느려 보입니다.

따라서 초기 렌더링 중에 AJAX 요청을 최소화해야 합니다.

원천 : https://jeong-pro.90

참조 페이지:
http://wikibook.co.kr/article/web-sites-optimization-3/

http://d2.naver.com/helloworld/59361

https://appear.github.io/2017/09/28/Etc/etc-01/