브라우저에 어떤 일이 일어나서 나에게 웹 사이트가 보이는지
1 사용자 인터페이스 = 변하지 않는 것들 , 뒤로가기,앞으로 가기 새로고침 등등 웹페이지 상단바
2 브라우저 엔진 = 사용자 인터페이스와 렌더링 엔진 사이에 가교 역할
가교 뜻 = 다리를 놓다 , 알려준다
3 렌더링 엔진 = 웹사이트를 그리는 엔진 , 웹사이틀 보여주는것
렌더 뜻 = 그리다
4.1 통신 = 웹 브라우저의 네트워크를 담당하는 부분
4.2 자바스크립트 해석기 = 자바스크립트를 이해하게 해줌
크롬에서는 V8엔진을 씁니다
4.3 UI 백엔드 = 사용자랑 소통하는 부분 , 사용자 입력 , 마우스 움직임
5 자료 저장소 = 브라우저도 정보를 저장할 수 있음
로컬스토리지 , 세션스토리지 등등 여기 속함
- 하나의 작은 OS 같은 느낌
OS ( Operatong System ) 컴퓨터 시스템의 각종 하드웨어적인 자원과 소프트웨어적인 자원을 효율적으로 운영 관리 함으로써 사용자가 시스템을 이용하는데 편리함을 제공하는 시스템
예시 ) 브라우저가 이해하는건 IP 주소입니다
1. naver.com 에 IP주소를 찾아야함
1-2 naver.com을 가지고 DNS 에게 찾아갑니다
Domain Name System
- 인터넷 전화번호부입니다.
거기서 IP 주소를 찾습니다.
2.서버님 나 html 줄래요
0101010 바이트 스트림으로 줌
바이트 스트림 은 1 byte 를 입출력 할 수 있는 스트림입니다.
자바에서 입력, 출력 스트림을 통해 흘러가는 데이터의 기본단위입니다
일반적으로 바이트로 구성된 파일 즉 동영상 파일 이미지 파일 음악파일을 처리하기에 적합한 스트림입니다.
2-1 0101010 스트림형태를 우리가 이해할수 있는 html 언어로 인코딩을 하게된다
- 인코딩 방법 = UTF-8 Encoding 을 많이 쓴다
Bytes - > Characters - > Tokens - > Nodes - > Dom
Tokens - > 한글자 한글자 읽게 된다
토큰을 의미있는 단위로 재 해석을 해야함
object 객체의 형태로 만듬
Nodes - > 의미잇는 태그가 뭐가 있는지 / 의미있는 노드 구조화시킴
html 은 수직관계인데 그 안에서 자식과 부모의 관계를 주어야함
관계를 주는 것을 Model 이라고 함
DOM
Document Object Model
문서 객체 모델은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
DOM tree
tree 자료의 구조 중 하나
CSSOM 만들게 된다 css
자바스크립트를 실행해야 한다
자바스크립트가 실행되는 동안에는 DOM 파싱을 멈춤
자바스크립트가 실행되는 동안 DOM을 멈추게 하는이유
- html 안쓰고도 자바스크립트 만으로도 노드를 만들수 있음
자바스크립트가 바꾸고 싶어하는게 있는지 먼저 듣고 한꺼번에 모아서 한번에 처리하자 이렇게 생각을 햇다고함
자바스크립트가 DOM 파싱을 막는걸 싫어하는 개발자가 많았음
- DOM 생성을 맞기 않게 하는 옵션 defer 붙여주면 위에잇어도 DOM생성을 막지 않음
defer / async - 자바스크립가 Dom생성을 막지 않음
1.async 는 스크립트를 다운로드 했을때 곧바로 평가 실행하고
2.defer은 문서HTML 을 완전히 다 읽은 후에 실행한다
3.async 옵션으로 다수의 script 파일들을 다운로드 받게 되면
정의된 script 순서에 상관없이 다운로드 된 파일을 우선적으로 실행하기 때문에 JS파일이 순서에 의존적이라면 문제가 될 수 있다
4.defer 같은 경우는 모든 script 파일들이 다운로드 된 이후에
실행되기 때문에 훨씬 안전하다.
CSS 는 DOM 의 생성을 막지 않는다
DOM 은 항상 CSSOM 을 기다립니다
The Render Tree
Reflow 될때
1. 페이지 초기 렌더링 시 (최초 Layout 과정)
2. 윈도우 리사이징 시 (Viewport 크기 변경 시 )
3. 노드 추가 또는 제거
4. 요소의 위치. 크기변경
5. 폰트 변경 (텍스트 내용)과 이미지 크기 변경
웹사이트 성능을 좋게 하는 방법
- 소스의 사이즈 줄이기 (바이트 수 줄이기)
- 외부에서 가져오는 리소스양 줄이기 ( media쿼리 .불필요한 파일 나중에)
- 외부에서 가져오는 횟수 줄이기 (인라인)
- Reflow , Repaint 줄이기 ( left,right 보단 transition 을 1px씩 보단 3px 씩 등 )
나만의 해석
1 웹 페이지 요청
= IP 주소를 요청하고 DMS 에 찾아달라고 보냅니다
2 웹 페이지 수신
서버는 요청한 웹 페이지를 브라우저에게 전송합니다
바이트스트림 01010 로 서버를 주는데 우리가 이해할수 있는
인코딩 방법 = UTF-8 Encoding 을 많이 쓴다 방법으로 바꾼다
3 렌더링
브라우저는 HTML, CSS를 이용하여 웹 페이지의 구조와 레이아웃을 구 성하고, JavaScript를 실행하여 웹 페이지의 동작을 구현합니다.
4 자바스크립트 해석기
웹페이지의 JavaScript 코드를 해석하고 실행하여 동적인 요소를 생성 하거나 상호작용을 가능하게 합니다. 자바스크립트가 작동할때 DOM 파싱
을 막는데 이것을 보완하기 위해 defer/async 사용합니다 .
안정적으로 하는 것은 defer
defer 같은 경우는 모든 script 파일들이 다운로드 된 이후에
실행되기 때문에 훨씬 안전하다.
