1. 브라우저 렌더링 과정
1-1. 브라우저란?
: 웹 페이지 이미지 비디오 등의 콘텐츠를 수신 전송 및 표현하는 소프트웨어.
-
구글 크롬 / 사파리 / 마이크로소프트 엣지 / 모질라 파이어 폭스 등
-
HTTP에 따라 웹서버는 특정 정보를 브라우저에 전송하고 브라우저는 전송받은 정보를 화면에 출력.
-
사용자는 브라우저를 통해 서버에 엑세스 가능.
-
브라우저는 웹서버에서 HTML 등으로 작성된 코드를 불러온 후 해석하여 사용자(사람)에게 웹페이지로 보여줌.
-
개발자는 브라우저 간 지속성 유지를 위해 웹 표준을 고려해야 함
1-2. 렌더링이란?
: HTML CSS JAVASCRIPT 등의 코드가 브라우저에 의해 일반 사용자가 이해할 수 있도록 출력되는 과정.
- 각 브라우저는 렌더링 엔진을 통해 렌더링 수행
ex) 크롬-블링크 / 사파리-웹킷 / 파이어폭스-게코
1-3. 렌더링 과정
1. 사용자가 브라우저에 접속
2. 브라우저는 URL을 통해 일치하는 웹서버를 찾고 해당 서버에서 HTML CSS
JAVASCRIPT 등 웹 사이트에 필요한 리소스를 전달받음.
3. 브라우저는 페이지 렌더링을 위해 HTML-DOM / CSS-CSSOM 트리 생성
- DOM 트리 : Bytes => Characters => Tokens => Nodes => DOM
L 변환 : 브라우저가 바이트를 HTML에 정의된 인코딩(ex utf8)에 따라
개별 문자로 변환
L 토큰화 : 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환
L 렉싱 : 토큰을 특정 속성이나 규칙이 정의된 객체로 변환됨
- HTML Parser와 CSS Parser를 이용.
ex) body-> html에서 실질적으로 내용을 보여주는 부분/
br -> 한 줄 뛰우는 기능
L DOM생성 : 각각의 태그 간 관계를 해석해서 트리구조로 연결
4. 렌더링 트리 생성
: 생성된 DOM트리와 CSSOM트리를 결합해서 렌더링 트리 생성
- 렌더링 트리에서 페이지를 렌더링하는데 필요한 노드만 포함하게 됨
5. 레이아웃
: 뷰포트 내에서 각 요소의 크기와 위치를 정확하게 측정, 상대적 측정값은 화면에서
절대적 픽셀로 변환.
6. 페인팅(레스터화)
: 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환
* 리플로우(Reflow)
: 최초 렌더링 이후 사용자의 액션에 의해 영향을 받는 노드에 대해
렌더링 트리 생성과 레이아웃 과정을 재수행하는 것.
* 리페인트(Repaint)
: 리플로우에 의해 변화된 렌더링 트리와 레이아웃 과정에 대해 다시
화면에 그리기 위해 다시 페인팅 단계를 수행하는 것.
- 반드시 리플로우 후에 리페인트 되는 것은 아님
//단순한 변경사항은 리플로우 과정없이 리페인트만 재수행
- 리플로우가 발생한 것은 반드시 리페인트 수행됨.
1-4. 렌더링 최적화 방안
-
Reflow 최소화 (즉 가능하다면 Reflow없이 Repaint만 발생하는 속성 사용)
> Reflow가 발생하는 속성
position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height,overflow, text-align, vertical-align, white-space...
> Repaint가 발생하는 속성
background, background-image, background-position, background-repeat, background-size,
border-radius, border-style, box-shadow, color, line-style, outline, outline-color,
outline-style, outline-width, text-decoration, visibilty... -
영향을 주는 노드 최소화
L position,absolut,fixed 등을 통해 애니메이션이나 레이아웃 변화가 많은 경우 노드간 영향 최소화 가능
ex) fixed --> 영향을 받는 노드가 아예 존재하지 않음
// reflow없이 repaint만 발생 -> 렌더링 시간 단축 -
프레임 줄이기
HTTP (=hyper-text transfer protocol)
L 데이터 처리에 관한 표준 규약
URL (=Uniform Resource Locator)
: protocol + host + port + resource path + query
ex) http://localhost:3000/path?a=2
- protocol -> http
- host -> localhost
- port -> 3000
- resource path -> path
- query -> ?a=2
W3C : World Wide Web : 웹 기술의 표준을 정의하는 공식 기관
크로스브라우징(=cross browsing issue)
: 표준 웹 기술을 채용하여 어떠한 플랫폼에서도 동등하게 화면이 구현되고
기능이 가능하도록 하는 것.
- 크로스브라우징에 대한 논의는 각 브라우저가 다른 렌더링 엔진을 가지기 때문.
크로스브라우징이슈
: 각기 다른 렌더링 엔진에 의해 사용자의 화면에 동일하게 구현되지 않는 것. 참고블로그
브라우저의 렌더링 과정
렌더링최적화방안
2.http,https통신방식 차이
2-1. http (=Hypertext Transfer Protocol)
: HTML 문서와 같은 리소스들을 가져올 수 있도록 하는 프로토콜(표준규약)
- 클라이언트 - 서버 프로토콜
- 애플리케이션 계층의 프로토콜
- 사용이 쉬운 확장 가능한 프로토콜
- 헤더를 쉽게 추가하는 능력을 지닌 클라이언트-서버 구조
- HTTP 프로토콜의 기본 포트는 80번
- TCP 혹은 암호화된 TCP 연결인 TLS를 통해 전송
- http 메시지는 요청(req)과 응답(res) 두 가지 타입 존재.
- 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않음 -> 보안상문제 존재
요청(request) 구성
: Method / Path / Version of Protocol / Headers
응답(response) 구성
: Version of Protoclo / Status code / Status Message / Headers - HTTP API
-- XMLHttpRequest API
-- Fetch API
-- 서버-전송 이벤트
- http 상태코드
-- 200번대 : 성공
-- 300번대 : 리다이렉션
-- 400번대 : client error
-- 500번대 : server error
---- 501 : 요청한 동작에 대해 서버가 수행할 수 없는 경우
---- 502 : 서버가 과부하 또는 유지 보수로 내려간 경우
🌞 http 통신 과정
1. tcp 연결을 함 // tcp연결은 요청 or 응답을 받기 위해 사용됨. // 클라이언트는 새 연결을 열기 or 기존 연결 재사용 or 서버에 대한 여러 tcp 연결가능 2. HTTP메시지 전송 3. 서버에 의해 전송된 응답을 읽어들임
2-2. https (=Hypertext Transfer Protocol Secure)
: 보안의 문제가 있는 http의 문제 극복을 위해 SSL(보안소켓계층)을 사용한 통신 프로토콜의 일종
- SSL 인증서 존재
: 전송되는 정보 즉 데이터를 암호화 - https 검색엔진최적화(SEO)에 http보다 더욱 유리
- 기본적으로 443번 포트 이용
TCP (=Transmission Control Protocol)
: IP 네트워크의 두 컴퓨터 간의 연결 지향 통신을 위한 전송 계층 호스트 간 프로토콜
- TCP는 HTTP 및 SMTP (email)과 같은 상위 레벨 프로토콜 데이터를 캡슐화
TLS
UDP
PROXY(=프록시)참고블로그
HTTP란?
