(꿀팁)-웹페이지 랜더링의 이해와 속도 개선을 위한 Java-Script 기능 (async , defer, crossorign)
1. 웹브라우저의 랜더링
ㅇ웹프런트 화면을 구성하는 HTML은 Html Tag로 구성된 Text뿐 아니라 여러 개의 image CCS, Java-script 등의 파일 리소스로 구성되어 있다.
웹브라우저는 이들 리소스들을 서버로부터 다운로드하고 브라우저 내에서 로딩하고 파싱 하여 Dom구조를 만들어 우리가 보는 화면으로 보여 주는 과정을 거친다.
이런 과정을 웹 브라우저에서 랜더링이라고 한다.
정리하면 다음과 같다.
1. 웹브라우저는 서버로부터 HTML 문서를 다운로드한다.
2. 랜더링 엔진은 HTML을 파싱 하면서 DOM( Document Object Mode) Tree로 변환한다.
3. HTML내의 필요한 CSS, 이미지, Java-Script 등을 파일을 다운로드한다.
4. 파싱 된 CSS 문서는 CSSOM(CSS Object Model)으로 변환한다.
5. DOM + CSSOM으로 웹브라우저의 화면을 구성한다.
2. DOM( Document Object Mode) Tree를 구성하는 절차
- HTML DOM 트리 생성 과정은 다음과 같이
바이트 → 문자 → 토큰 → 노드 → DOM 객체 모델을 구성하는 과정입니다.
1. 바이트 → 문자 (Byte to Character Conversion):
브라우저는 HTML 문서를 디스크나 네트워크로부터 바이트 단위로 읽어옵니다.
읽어온 바이트는 지정된 인코딩에 따라 문자로 변환됩니다.
2. 문자 → 토큰 (Character to Tokenization):
문자열은 HTML 표준에 따라 토큰으로 분리됩니다. 이 과정을 렉싱(Lexing)이라고 합니다.
예를 들어, <div class="example"> Hello </div>은 StartTag, Attribute, Text, EndTag로 토큰화될 수 있습니다.
3. 토큰 → 노드 (Token to Nodes):
각 토큰은 DOM 노드로 변환됩니다. 렉싱된 토큰은 해당 요소, 속성 등을 나타내는 노드 객체로 매핑됩니다.
3.DOM 객체 모델 구성 (Building the DOM Object Model):
HTML 마크업이 여러 태그 간의 관계(부모, 자식)를 정의하여 노드를 구성하고 노드들은 트리 구조로 조직되어 DOM 객체 모델을 형성합니다.
트리의 최상위 노드는 <html>이며, 그 하위에는 <head>, <body> 등의 노드들이 계층적으로 연결됩니다.
부모-자식 관계를 통해 HTML 문서의 구조가 표현되며, 각 노드는 해당하는 HTML 요소의 특성과 콘텐츠를 나타냅니다.
이렇게 구성된 DOM 객체 모델은 웹페이지의 구조를 표현하고, JavaScript와 같은 스크립트 언어를 통해 동적으로 조작할 수 있게 해 줍니다.
2. DOM( Document Object Mode) Tree를 구성하는 절차
웹브라우저는 HTML과 마찬가지로 외부 CSS 스타일시트 문서를 읽어 문자로 변환된 CSS 바이트를 차례로 토큰과 노드로 변환한다.
그리고 'CSS Object Model'(CSSOM)이라는 트리 구조에 링크 태그를 구성한다.
3. 랜더링을 표현한다.
브라우저는 로딩된 DOM과 CSSOM을 이용하여 화면을 출력하기 위해서 "Rander Tree"를 구성하게 된다.
이때 로딩되는 이미지와 이미지의 크기, 폰트의 사이즈 등 가변적인 요소들이 매핑되면서 화면을 출력하게 된다.
4. 랜더링을 잘해야 웹페이지 성능이 좋아진다.
웹브라우저에서 화면이 로딩되기 위해서는 여러 번의 DOM이 재구성되는 과정을 거친다.
웹브라우저에 보이는 화면 출력 성능을 높이기 위해서는 위와 같은 Rander Tree가 로딩될 때 자주 변경되지 않도록 하는 것이 최적화하는 것이라고 할 수 있다.
2000년 초반에는 이미지도 작고, 주로 텍스트 위주의 웹콘텐츠를 사용했었다.
근래 네트워크속도가 좋아지고 모바일이 보급되면서 웹페이지는 다수의 이미지와 고용량의 이미지 그리고 동영상 등이 포함되고 있다. 이들 콘텐츠 조각들은 시용자 환경에 따라 실시간으로 Dynamic 하게 조합되고 화면에 갱신되어야 한다.
그래서 UI를 설계하고 웹페이지르 구성하여 개발하는 시점부터 랜더링을 고려해야 사용자에게 빠른 화면의 성능을 제공할 수 있다.
[랜더링을 고려하지 않는 경우 나타나는 문제점들]
1. 페이지를 호출할 때마다 화면이 깜박인다.
2. 화면 로딩이 느리고 이미지가 로딩되는 과정에서 화면의 구성이 여러 번 변경된다.
3. 페이지는 보이는데 화면로딩이 계속된다.
4. 페이지에 특정 기능이 늦게 작동된다.
렌더링이 느린 거는 동시에 많은 Object를 로딩하여 그리는데 소요되는 Cost가 높기 때문이다.
이미지 하나를 로딩하면 사이즈에 따라 전체의 틀이 깨지거나 다시 그려야 하는 부분도 있고
동시에 많은 이미지를 로딩하다 보면 늦게 출력되는 경우도 많아서 필요한 화면이 늦게 그려지기도 한다.
그래서 Single Page 아키텍처(SPA)나 Lazy Loading , Async Ajax 등을 통한 웹페이지 개발에서 다양한 기술을 통해서 화면의 성능 개선을 고려하고 있다.
5. 웹페이지 성능을 높이는 Java-Script 기능 (async , defer, crossorign)
위에서 웹브라우저에서 화면을 출력하는 랜더링 과정에서 HTML과 CSS파일을 로딩하여 DOM과 CSSOM을 빠르게 구성해야지 화면이 출력된다는 것을 이해할 수 있었다. 또한 CSSOM이 없다면 랜더링이 지연된다 것을 알 수 있다.
이런 랜더링의 과정에서 여러 가지 CSS와 Java Script 들을 빠르게 랜더링 하기 위해 Java-Script에는 두 가지 기능을 제공하고 있다.
1. "Async" : 주로 화면 출력에 필요한 HTML파싱에 관여하지 않는 script를 로딩할 때 사용한다.
<script src="async.js" async></script>
페이지가 구문 분석을 계속하는 동안 스크립트가 실행되므로 주로 google analytics와 같은 통계나 화면의 팝업이나 Float 레이아웃에 사용하면 좋겠다.
2. "Defer" : HTML 파싱 중에 파일을 다운로드하고 파싱이 완료된 후, DOM ContentLoaded 이벤트 이전에 실행하도록 합니다.
<script src="defer.js" defer></script>
페이지가 구문 분석을 마쳤을 때 스크립트가 실행되도록 지정하므로 DOM의 완전한 구성이 되었을 때 랜더링 되도록 하므로 "Undefined object"와 같은 오류가 발생되지 않도록 할 수 있다.
3. "crossorign" : CORS 요청으로 타 사이트의 <img>, <video> 또는 <script> 등을 가져올 때 호환성을 위해서 사용한다.
crossorigin 속성은 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 기록을 허용하기 위해 사용할 수 있다
- "anonymous"
사용자 자격 증명을 보내지 않고 스크립트를 실행하도록 브라우저에 지시할 수 있다. <script src="https://www.google.com/js/cors.js" crossorigin="anonymous"></script>
- "use-credentials"
동일한 출처에 있는 경우에도 자격 증명이 필요한 경우를 지시할 수 있다.
<script src="/js/cors.js" crossorigin="use-credential"></script>
(참고)
- https://www.w3schools.com/tags/att_script_async.asp
- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
- http://ui.cognifide.com/slides/async-js/template/#26
<script> 의 sync async defer 사용비교
<script async="async">
If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
If async is not present and defer is present: The script is executed when the page has finished parsing
If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
<script>
Let’s start by defining what <script> without any attributes does.
The HTML file will be parsed until the script file is hit, at that point parsing will stop and a request will be made to fetch the file (if it’s external). The script will then be executed before parsing is resumed.
<script async>
async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.
<script defer>
defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.
'Programming' 카테고리의 다른 글
| Gradle 설치 마스터 클래스 - 단계별로 익히는 간편한 설정 가이드 (3) | 2024.01.04 |
|---|---|
| 자바 개발자를 위한 필수 도구 설치 가이드 - JDK, Gradle, Maven 한 번에 완성하기 (65) | 2024.01.02 |
| 웹사이트 소셜 공유를 위한 Open-Graph 필수값 (158) | 2023.12.21 |
| Python 기초 - 튜플(Tuple) 자료형의 특징과 활용 (158) | 2023.10.17 |
| Python 기초 문법 제어문 - 조건문 (71) | 2023.10.14 |
| Python 기초 문법 제어문 - 반복문 (7) | 2023.10.13 |
| Python 리스트형 - Lamda 함수를 이용한 리스트 활용-람다식 (78) | 2023.10.12 |