웹 어플리케이션 구동 과정

URL Entered

• 사용자가 웹 브라우저에서 사이트 주소를 입력

DNS Lookup

• DNS를 이용하여 사이트 주소에 해당되는 Server IP 접근

Socket Connection

• Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결

HTTP Request

• Client 에서 HTTP Header 와 데이터가 서버로 전송

Content Download

• 해당 요청이 Server 에 도달하면 사용자가 원하는 문서를 다시 웹 브라우저에 전송

Browser Rendering

• 웹 브라우저의 렌더링엔진에서 해당 문서를 다음과 같은 순서로 파싱

브라우저 기본 구조

사용자 인터페이스

• 요청한 페이지를 보여주는 창 이의외 모든 부분
• 주소 표시줄, 이전 버튼, 다음 버튼, 새로고침, 정지 버튼, 홈 버튼

브라우저 엔진

• 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

렌더링 엔진

• 요청한 콘텐츠를 표시 : HTML을 요청하면 HTML과 CSS를 파싱하여 표시

통신

• HTTP 요청과 같은 네트워크 호출에 사용됨
• 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨

자바스크립트 해석기

• 자바스크립트 코드를 해석하고 실행
• HTML을 파싱하는 도중 <script> 태그를 만나게 되면 그 코드를 실행하기 위해 Javascript 엔진으로 제어 권한을 넘기고 기계어 컴파일까지 완료가 된 후 다시 마저 진행됨
• DOM 트리를 생성 하는 도중 이러한 상황이 발생하게 되면 레이아웃 단계와 그리기 단계에 늦게 도달하게 되면서 화면 출력 시간도 지연됨

UI 백엔드

• 콤보 박스와 창 같은 기본적인 장치를 그림
• 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

자료 저장소

• 자료를 저장하는 계층
• 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장
• HTML5 명세에 브라우저가 지원하는 클라이언트 스토리지가 사용되도록 정의되어 있음

  • 사용자가 오프라인 상태여도 웹이 작동하도록 한 뒤, 네트워크가 다시 연결되면 데이터를 다시 동기화 할 수 있음
  • 성능 향상을 위해, 동일한 자원에 대한 중복 요청을 줄일 수 있음
  • 서버 인프라가 필요하지 않은 보다 쉬운 모델로 구성되어 있어 사용 효율성이 좋지만 데이터가 취향하고 여러 클라이언트가 엑세스 할 수 없으므로 중요하지 않은 데이터 위주로 사용을 권장

Continue reading