load => after resources : css images파일 다 로드되면
DomContentLoaded => html만 로드되면
defer를 쓰거랏 <head>에 쓰면 안전
DOM
Document Object Model
- html을 브라우저가 가지고있는걸 자바스크립트에서는 노드라는 오브젝트로 변환됨
- node는 eventTarget을 상속
- Document, Element, Text는 Node를 상속
- 그래서 모든 노드들에게는 이벤트가 발생할 수 있다.
- 브라우저가 HTML을 한줄한줄 읽고 DOM TREE로 변환해서 브라우저가 이해할 수 있도록 자신들만의 오브젝트 나무로 만들어 나감
- DOM TREE는 완전히 구문 분석된 HTML 페이지의 Object 표현이다. => 브라우저도 메모리에 보관할 수 있도록
아래의 html문서가 브라우저에서 DOM TREE로 파싱되는 것
<html>
<head>
<title>Understanding the Critical Rendering Path</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Understanding the Critical Rendering Path</h1>
</header>
<main>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet</p>
</main>
<footer>
<small>Copyright 2017</small>
</footer>
</body>
</html>
HTML Critical rendering path의 이해
아래의 글은 "Understanding the Critical Rendering Path"의 내용을 번역한 글이다. 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 한다. 브라우저가 페이
blog.asamaru.net
브라우저가 서버에서 페이지에 대한 HTML응답을 받으면 화면에 표시되기 전에
많은 단계를 거쳐야 한다.
브라우저가 실행될때
우리의 웹페이지를 읽으면
글로벌에 윈도우에는 DOM / BOM / JavaScript 가 존재
노드는 이벤트 타겟을 상속한다는 표현
- DOM 노드 인터페이스는
HTML -> DOM으로 브라우저가 만들면..
DOM + CSS = CSSOM
렌더트리는
DOM + CSSOM = Render Tree
CSSOM : Cascading 적용됨 -> 부모요소에서 지정하면 케스케이딩 룰에 따라서 자식들도 동일한 속성 룰 값을 받을 수 있다.
렌더트리에 display: none에 있으면 포함이 안됨. => 아예 요소조차 포함안됨
visibility 속성 0 => 은 요소는 있는데 안보이는거
사용자에게 안보여지니까
DOM에 헤드가 있어서 최종 렌더트리에는 head가 보여지지 않는다.
왜냐면 사용자에게 보여지는 모습만 Render Tree에 나타나니까.
브라우저에서 URL을 입력하면 이런 순서로 보여짐
HTML
|
request/response->loading->scripting(HTML요소를 DOM으로 변환하는것)->rendering->layout->paiting
|
Device
*출처: 앨리의 드림코딩
Dream Coding
All Courses, 프론트엔드 중급, 백엔드 타입스크립트 + 객체지향 프로그래밍 마스터 (14) 5.0 average rating
academy.dream-coding.com
HTML 파일을 서버에게 받아서 로딩
.
Layout은 x,y 너비 높이 등이 계산됨 -> CSS 포함
Paint 부분적으로 레이별로 준비(성능개선을위해) -> 브라우저에서 한번에 다 안그림 ? 왜? 전체 그림을 그리면
우리가 부분을 바꾸기 위해서 전체를 바꿔야 하기 때문이다.
css에 will-change -> 오퍼시티가 변화될지도 몰라~~~
그럼 브라우저가 레이어를 따로 준비해놓음 -> 너무 불필요하게 사용하면 안됨!
Composition
준비한 레이어를 차곡차곡 브라우저에 내려놓음 Z-index가 낮은것부터 차곡차곡
wormwlrm.github.io/2021/03/27/How-browsers-work.html
프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 - 재그지그의 개발 블로그
브라우저에서 어떤 과정을 통해 렌더링이 실행되는지에 대해 알아봅니다.
wormwlrm.github.io
크롬개발툴에서
layers로 입체적으로 레이어들 볼 수 있음
img {
z-index: 100;
will-change: opacity;
}
이렇게 하면 이미지는 나중에 opacity가 변경될수도 있다는 것을 알기 때문에
이미지 레이어를 미리 분리해놓음.
저 위의 paint 과정에서!
CSS Triggers
@PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates
csstriggers.com
즐겨찾기 필수임.
내가 쓰는 CSS값이 좋은지 안좋은지 판단가능한 사이트
Blink 크롬브라우저 엔진
Gecko 파이어
webkit 사파리
edgeHTML 엣지 -> 근데 엣지도 이제 크롬엔진 써서 이거 쓰면 오래된 것임
change from default : 기본값에서 변화될 때..
composite만 발생하면 너무좋음
layout까지 발생하면..안좋음!
어떤걸쓰면 제일 최악인지 알 수 있다.
그래서 움직일 때는 top과 left를 변화하지말고 tanslation쓰는게 제일 좋다.
퍼포먼스 개발툴 사용하기
- 크롬 개발툴에서 Performance가 있다. 녹화해서 끝내면 됨
- 거기서 퍼포먼스 확인 가능 -> 어떤 현상이 안좋은지도 자세히 알려줌 -> 빨간색 Warning이 나오면 안좋음
- 커맨드 쉬프트 피 누르면 개발툴 팔레트 가능 -> layput shift ~같은게 나옴 -> 레이아웃이 어떻게 발생하는지 나옴
- 레이아웃쉬프트가 계속 발생중이면 자주 발생했다는것
getElementbyId~ 등등 : 오래된 것 => byClass 블라블라 할때마다 function 바꿔야함
querySelecor : 요즘 것 => function 안바꿔도됨 / 조건에 만족하는 가장 첫번째만 가져오는 것
=> 다양한 DOM의 요소를 받아올 수 있다. 그런애들은 다 노드와 이벤트 타겟이다.
qurySelectorAll: 이미지 전부다 들고오는것
setAttribute를 통해 속성값 할당가능
textContent를 통해 내용 설정 가능
append 새로 나온거 -> 인터넷 익스플로러에서 지원 안됨 -> 나중에 바벨을 써서 trans Compile을 해도됨
appendChild 옛날것 -> 새로 추가된 자식노드자체를 추가됨
appendChild: 제일 끝 부분에 추가됨
insertBefore : 추가하고자하는 노드를 레퍼런스 노드 이전에 추가됨
innerHTML / element???
innerHTML은 `` 백태그 써서 사용하면 HTML사용하는것처럼 써서 좋지만
일부만 변경해도 전체가 리로드됨.
한번 업데이트하고 다시는 변경할 일이 없으면 innerHTML로 추가해도 좋음
'[React] Front-End' 카테고리의 다른 글
| [리액트기초] 1) React 프로젝트 시작하기(환경셋팅 편) (0) | 2021.05.06 |
|---|---|
| [Front-End] FontAwesome /CSS Gradient/ (0) | 2021.05.04 |
| [Front-End] HTML / CSS / Web APIs (0) | 2021.04.23 |
| [JS] 자바스크립트 필터 함수 (0) | 2021.04.15 |
| [Javascript] 앨리의 드림코딩 총정리 (0) | 2021.04.10 |