WJ

1. HTTP 요청 줄이기 브라우저가 웹페이지를 그리는 첫번째 과정으로 주소창에 URL을 입력하고 엔터키를 누르면 서버는 요청을 받고 웹 페이지를 구성하고 있는 HTML, CSS, JavaScript, 이미지 등의 구성 요소들을 보내며 응답합니다. 이러한 구성 요소들을 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 발생되고, 이 비용이 곧 응답 시간으로 이어집니다. 그러므로 구성요소의 개수를 줄이는 것이 가장 기본적이면서도 중요한 부분중에 하나 입니다. 아래 그림은 쉐보레 메인 페이지와 스파크 세이프티 페이지를 분석한 결과 입니다. 왼쪽은 캐시가 없는 상태일때의 분석 결과이고, 오른쪽은 캐시가 있는 상태일 때 분석한 결과 입니다. 각각의 페이지 마다 구성요소들의 수만큼 HTTP 요청 횟수도 달라지며 이..

실행 컨텍스트 (EXECUTION CONTEXT) 실행 컨텍스트(Execution Context)는 코드들의 덩어리로 scope, hoisting, this 바인딩 등의 동작원리가 이루어 지는 자바스크립트의 핵심 원리중의 하나 입니다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의 합니다.실행 컨텍스트는 실행 가능한 코드가 실행되는 환경 이라고도 말할 수 있습8니다. 여기서 실행 가능한 코드는 전역 코드 : 전역 영역에 존재하는 코드Eval 코드 : Eval 함수로 실행되는 코드함수 코드 : 함수 내에 존재하는 코드 일반적으로 실행 가능한 코드는 전역 코드와 함수 코드 입니다. 실행 컨텍스트에는 1. 변수객체(Variable Object..

요즘 일반적인 스크린에서는 1초에 60번(60fps)의 그림을 그린다고 합니다. 이 때문에 브라우저가 60fps 을 유지해야 웹페이지가 버벅임 없이 매끄럽게 보일 수 있고, 60fps 을 유지하기 위해선 최적화(Optimization)가 필요합니다. 이러한 최적화를 하기 위해 먼저 브라우저가 어떤 과정을 거쳐 화면에 나타나는지 부터 알아보려고 합니다. 브라우저가 하나의 화면을 나타내는 과정을 중요 렌더링 경로(Critical Rendering Path)라고 부릅니다. 우리가 일상적으로 주소창에 url을 입력하고, 엔터키를 누르면 브라우저는 해당 서버에 요청을 보내게 됩니다. 서버에서는 요청을 받고 응답으로 HTML 데이터를 보냅니다. 이 HTML 데이터를 실제 우리가 보는 화면으로 그리기까지의 과정이 바..