김가연

Event Loops

이벤트 루프란?

• 웹 브라우저는 멀티 프로세스 아키텍처

• 한 개의 페이지(탭) = 한 개의 렌더링 프로세스 = 렌더링 엔진(Blink)

• 렌더링 프로세스의 메인 스레드
• parsing HTML
• executing JavaScript → 자바스크립트 엔진(V8)
• calculating style(CSS)
• building and manipulating DOM, rendering
• handling events & calling async callbacks

프로세싱 모델

console.log('1: start');

setTimeout(() => console.log('2: setTimeout'), 0);

Promise.resolve().then(() => console.log('3: promise'))

const raf = requestAnimationFrame(() => {
    console.log('4: raf')
    cancelAnimationFrame(raf)
})

console.log('5: end');

// 0
// 1: start
// 5: end
// 3. promise
// 4. raf -> 순서는 5와 바뀌기도 함
// 5. setTimeout

1. 태스크 큐에서 태스크 한 개를 디큐하고 실행한다.
= 이벤트 루프가 한 바퀴 돌 때 한 개의 테스크가 실행된다.
• HTML 파싱과 DOM 생성
• JavaScript 스크립트 실행
• Event Handlers 실행
• Async Callbacks 실행

2. 마이크로태스크 큐가 빌 때까지 모든 마이크로태스크를 한 개씩 디큐하고 실행한다.
• Promise Handlers 실행
• Mutation Observer Callbacks 실행

3. 렌더링 업데이트할 시간이 되면(예를 들어 60fps면 16.7ms마다) 렌더링 업데이트를 한다.
• Request Animation Callbacks 실행
• Intersection Observers 업데이트
• 렌더링 업데이트(CPR, Critical Rendering Path: Style - Layout - Composite - Paint)

window.addEventListener('DOMContentLoaded', () => console.log('DOMLoaded'));

HTTPS

HTTPS(Hypertext Transfer Protocol Secure) = HTTP over TLS

• HTTP - HTTP message를 주고 받는 형식과 절차

• HTTPS - 암호화된 HTTP message를 교환 → 보안 절차인 SSL/TLS이 추가
→ HTTPS provides secure connections between clients and servers by using TLS to encrypt HTTP messages.
 

HTTPS의 역할

1. Encryption: 데이터를 암호화해서 제 3자로부터 숨긴다

2. Integrity: 데이터가 중간에 조작되지 않았음을 증명한다 = 원본과 같다

3. Authentication: 데이터를 교환하는 상대의 신원을 확인한다(사용자가 접속하려고 한 사이트가 맞는지 확인)

SSL(Secure Sockets Layer)/TLS(Transport Layer Security)

• Transport Layer Security
• TCP/UDP 연결 과정에서 HTTP message 암호화에 필요한 키를 공유하기 위한 형식과 절차
→ 클라이언트와 서버가 안전하게 같은 키를 공유하려면?

• Netscape가 개발한 SSL에서 IETF(Internet Engineering Task Force)가 표준화한 TLS로 발전
• SSL 1.0(보안 취약점 때문에 릴리즈X)
• SSL 2.0(1995)
• SSL 3.0(1996) → TLS 1.0(1999)
• TLS 1.1(2006)
• TLS 1.2(2008)
• TLS 1.3(2018) → QUIC(2021) / HTTP3(draft)