안녕하세요, 오늘은 브라우저의 작동방식에 대해 정리해 보았습니다.
1. URL 입력 및 요청 단계
URL 입력: 사용자가 주소 표시줄에 URL을 입력하고 Enter 키를 누릅니다.
DNS 조회: 브라우저는 URL의 도메인 이름을 IP 주소로 변환하기 위해 DNS(Domain Name System) 서버에 질의합니다.
IP 주소 확인: DNS 서버는 해당 도메인에 대한 IP 주소를 반환합니다.
서버에 요청 전송: 브라우저는 해당 IP 주소로 HTTP(S) 요청을 보냅니다. 이 요청에는 사용자가 입력한 URL과 추가적인 헤더 정보가 포함됩니다.
2. 서버 처리 단계
요청 수신: 웹 서버는 브라우저로부터의 요청을 수신합니다.
요청 처리: 서버는 요청된 자원을 찾고, 동적 페이지의 경우 백엔드 서버(예: 데이터베이스)와 상호작용하여 콘텐츠를 생성합니다.
응답 생성: 서버는 요청에 대한 HTTP 응답을 생성합니다. 이 응답에는 HTML, CSS, JavaScript, 이미지 등의 데이터가 포함될 수 있습니다.
응답 전송: 서버는 생성된 응답을 브라우저로 전송합니다.
3. 응답 처리 및 렌더링 단계
응답 수신: 브라우저는 서버로부터 응답을 수신합니다.
HTML 파싱: 브라우저는 응답의 HTML을 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
CSS 파싱: 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
JavaScript 실행: 브라우저는 HTML과 CSS를 파싱하면서 JavaScript 파일을 다운로드하고 실행합니다. JavaScript는 DOM과 CSSOM을 수정할 수 있습니다.
렌더 트리 생성: 브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 각 요소의 스타일과 레이아웃 정보를 포함합니다.
레이아웃 계산: 브라우저는 렌더 트리의 각 요소의 크기와 위치를 계산합니다. 이를 레이아웃 단계라고 합니다.
페인트(Paint): 브라우저는 렌더 트리의 각 요소를 화면에 그립니다. 이를 페인팅 단계라고 합니다.
컴포지팅(Compositing): 브라우저는 페인팅된 요소들을 최종적으로 화면에 렌더링합니다.
4. 상호작용 처리 단계
이벤트 처리: 사용자가 페이지와 상호작용(예: 클릭, 스크롤)하면 브라우저는 해당 이벤트를 처리합니다.
JavaScript 이벤트 핸들러 실행: 이벤트가 발생하면 브라우저는 해당 이벤트에 연결된 JavaScript 코드를 실행합니다.
DOM 업데이트: JavaScript가 DOM을 수정하면 브라우저는 DOM과 CSSOM을 업데이트하고, 필요한 경우 레이아웃과 페인팅 단계를 다시 수행합니다.
5. 최적화 단계
브라우저 캐시: 브라우저는 자주 사용하는 리소스를 캐시에 저장하여 로딩 속도를 개선합니다.
프리페치(Prefetch) 및 프리렌더(Prerender): 브라우저는 사용자가 방문할 가능성이 높은 페이지를 미리 로드하여 사용자 경험을 개선합니다.
오늘의 코드카타
import java.util.Arrays;
class Solution {
public int[] solution(int[] emergency) {
int[] asc = emergency.clone();
int[] answer = new int[emergency.length];
Arrays.sort(asc);
for (int i = 0; i < asc.length; i++) {
for (int j = 0; j < emergency.length; j++) {
if (asc[i] == emergency[j]) {
answer[j] = emergency.length - i;
}
}
}
return answer;
}
}import java.util.Arrays;
public class Main {
public static void main(String[] args) {
Solution solution = new Solution();
int[] e1 = {3, 76, 24};
int[] e2 = {1, 2, 3, 4, 5, 6, 7};
int[] e3 = {30, 10, 23, 6, 100};
System.out.println(Arrays.toString(solution.solution(e1)));
System.out.println(Arrays.toString(solution.solution(e2)));
System.out.println(Arrays.toString(solution.solution(e3)));
}
}진료 순서 정하기
