[CSS] 리플로우와 리페인트(Reflow, Repaint)

[CSS] 리플로우와 리페인트(Reflow, Repaint)

브라우저 렌더링 과정(완전 간단 설명)자세한 설명은 아래 있습니다~!https://heedonguri.tistory.com/1131. DOM 트리와 CSSOM 트리 생성2. DOM 트리와 CSSOM을 가지고 렌더 트리 생성3. 생성된 렌더트리를 이용해서 레이아웃 계산4. 계산된 값들을 기반으로 화면에 요소들을 그림 3번 과정을 다시 수행하는 것이 reflow이고 4번 과정을 다시 수행하는 것이 repaint이다.Reflow와 Repaint만약 스타일이나 DOM을 변경하는 경우에 리플로우가 발생하여 렌더트리를 재생성하고,생성된 렌더트리를 기반으로 리페인트가 발생한다. - Reflow요소의 위치나 크기를 다시 계산하는 것🤔 언제 발생하는데?DOM 요소의 기하학적 속성이 변경될 때브라우저의 크기(viewpo..

  • format_list_bulleted HTML,CSS,JS
  • · 2024. 7. 8.
  • textsms
[WEB] 브라우저 렌더링 과정

[WEB] 브라우저 렌더링 과정

먼저 브라우저가 무엇인지부터 알고 가면 좋을 것 같다. 브라우저란?인터넷을 통해 웹 페이지를 탐색하고 사용할 수 있도록 도와주는 소프트웨어이다.HTML, CSS, JS를 이용하여 웹 페이지를 해석하고 렌더링한다. 브라우저는 위의 사진과 같이 구성되어 있다.사용자 인터페이스우리가 사용하는 브라우저의 주소 표시줄, 이전/다음 버튼 등 직접 상호작용하는 부분이다.브라우저 엔진사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.DOM 자료구조를 구현한다.렌더링 엔진HTML 및 CSS를 해석하여 화면에 출력하는 역할을 한다.통신HTTP 요청과 같은 네트워크 호출에 사용된다.자바스크립트 해석기JS는 한 줄씩 읽어가며 파싱하는 언어이기 때문에 해석기가 필요하다.자바스크립트 엔진이라고도 불린다.UI 백엔드렌더링 엔..

  • format_list_bulleted WEB
  • · 2024. 7. 3.
  • textsms
[WEB] XSS

[WEB] XSS

XSS란Cross Site Scripting으로 웹 사이트에 악성 스크립트를 주입하는 행동을 의미함클라이언트 사이드 취약점사용자 뿐만 아니라 서버도 공격 가능함CSRF와의 차이점CSRF- 특정 사이트가 사용자를 신뢰한다는 점을 공격, 악성코드가 서버에서 발생- 권한 도용이 목적 XSS- 사용자가 특정 사이트를 신뢰한다는 점을 공격, 악성코드가 클라이언트에서 발생- 쿠키, 세션 탈취, 웹사이트 변조가 목적 XSS 공격 종류- Stored XSS해커가 악성 스크립트를 DB에 저장시키고 사용자에게 악성 스크립트를 보내는 것이다.DB에 계속 저장되기 때문에 지속적으로 공격을 한다. 예를 들어, 해커는 게시글 작성을 통해 악성 스크립트를 DB에 저장시킨다.(ex 게시글 조회 시 쿠키 내놔)다른 사용자들이 해당 게..

  • format_list_bulleted WEB
  • · 2024. 7. 2.
  • textsms
[WEB] CSRF

[WEB] CSRF

CSRF란Cross Site Request Forgery으로 사이트 간 요청 위조를 의미함사용자가 특정 행위를 웹사이트에 요청하도록 하는 공격(사용자의 의지X)해커의 요청이 사용자의 요청인 것 처럼 속이는 방법CSRF 동작원리CSRF 공격이 성공하기 위해서는 3가지 조건을 만족해야 한다.사용자가 보안이 취약한 사이트에 이미 로그인이 되어 있는 상태쿠키 기반의 서버 세션 정보를 획득할 수 있어야 함해커는 서버를 공격하기 위한 요청 방법에 대해 미리 파악하고 있어야 함위의 3가지 조건을 만족한다면 아래와 같은 절차로 동작한다.사용자가 사이트에 로그인session ID가 사용자의 브라우저 쿠키에 저장해커는 사용자가 악성 스크립트 페이지를 누르도록 유도악성 스크립트가 작성된 페이지에 접근하게 되면 웹 브라우저에..

  • format_list_bulleted WEB
  • · 2024. 7. 2.
  • textsms
[WEB] HTTP/1.0, HTTP/1.1, HTTP/2, QUIC(HTTP/3)

[WEB] HTTP/1.0, HTTP/1.1, HTTP/2, QUIC(HTTP/3)

HTTP 1.0하나의 연결 당 하나의 요청을 처리한다.연결을 맺고 끊음을 반복함으로써 속도가 매우 느리다.HTTP 1.1한 번 연결하고, 다수의 요청들을 처리한 다음에 연결을 끊는다.이 때, keep-alive 옵션을 사용해서 일정 시간동안 연결 상태를 유지한다. TCP 특성 상, 요청 후 응답이 올 때 까지 기다려야하는 문제를 보완하기 위해 파이프라이닝 기법을 도입했다.따라서, 클라이언트는 앞에 보낸 요청의 응답이 올 때까지 기다리지 않고, 순차적으로 여러 개의 요청을 전송할 수 있다.서버는 요청이 들어온 순서대로 응답을 해준다. 하지만 2가지 문제점 존제이 존재한다.1. 파이프라이닝 도입으로 HOL Blocking이 발생하는 문제가 발생한다.HOL Blocking : 앞의 요청에 대한 응답이 늦어지면..

  • format_list_bulleted WEB
  • · 2024. 6. 27.
  • textsms
[WEB] HTTP vs TCP

[WEB] HTTP vs TCP

TCP/IP 4계층먼저 TCP/IP는 하나의 프로토콜이 아니다.IP 주소 체계를 따르고, IP Routing을 이용해 목적지에 도달하며 TCP의 특성을 활용하는 것이다.즉, IP 주소를 사용하여 데이터를 전달하고, 그 데이터가 제대로 전달되었는지를 확인하겠다는 것이다. - Application Layer응용 프로그램에서 사용하는 프로토콜을 정의하는 계층으로, 사용자와 직접적인 상호작용이 이루어진다.HTTP, FTP, SMTP 등의 프로토콜이 이 계층에서 동작한다. - Transport Layer송수신의 논리적 연결을 담당하는 부분으로 신뢰성 있는 연결을 유지할 수 있도록 도와준다.TCP와 UDP가 이 계층에서 동작한다. - Internet Layer데이터의 경로와 목적지를 찾아주는 역할을 한다(Routi..

  • format_list_bulleted WEB
  • · 2024. 6. 24.
  • textsms