성능 (11) 리스트형 [자바스크립트] 브라우저 렌더링 브라우저에서 렌더링 성능은 중요한 요소 가운데 하나입니다. 렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있습니다. 자바스크립트로 동적인 작업을 실행할 때의 렌더링 문제를 최소화하여 성능을 높일 수 있습니다. 렌더링 과정렌더링이란 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정입니다. 이 과정은 다음과 같이 크게 2단계를 거쳐 이뤄집니다. 1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산2) 계산된 요소의 화면 표현 일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그립니다. 렌더링이 진행되는 과정다음은 HTTP 요청 후 응답을 통해 구현되는 전체적인 브라우저의 처리 과정입니다. 1) DOM 트리 생성 .. [자바스크립트] 성능을 높이는 코드 스타일 자바스크립트의 기본 요소인 반복문과 조건문, 문자열 연산과 함께 배열과 객체의 생성과 초기화, 문자열 연산, 정규 표현식, 변수 탐색 등을 어떻게 작성하느냐에 따라 자바스크립트의 실행 성능을 높일 수가 있습니다. 같은 기능을 실행하는 다양한 코드의 성능을 비교해 어떻게 작성할 때 성능이 더 좋은지 확인하는 것도 개발자에게 필요한 습관입니다. 아주 기초적인 코드이더라도, 키초적인 코드를 어떻게 작성하느냐에 따라서 자바스크립트의 실행 성능에 큰 차이가 날 수도 있습니다. 이후 개발을 하면서 성능 향상 문제를 해결하려 성능 개선 요소를 보며 하나하나 적용하기 보다는 제시된 최적화된 코드의 형태로 코딩하는 습관을 몸에 익혀 놓는 것이 성능 개선에 좀 더 효과적인 방법입니다. 물론 경우에 따라 직접 성능을 측정하.. [자바성능] 클래스 정보와 reflection Reflection 관련 클래스들 자바 API에는 reflection이라는 패키지가 있습니다. 이 패키지에 있는 클래스들을 써서 JVM에 로딩되어 있는 있는 클래스와 메소드 정보를 읽어 올 수 있습니다. 주요 클래스로 어떤 것들이 있으며, 각 클래스에서 제공되는 메소드들은 아래와 같습니다. Class 클래스 Class 클래스는 클래스에 대한 정보를 얻기에 좋은 클래스입니다. Class 클래스는 생성자가 따로 없습니다. ClassLoader 클래스의 defineClass() 메소드를 이용해서 클래스 객체를 만들 수도 있지만, 좋은 방법은 아닙니다. Object 클래스에 있는 getClass() 메소드를 이용하는 것이 일반적입니다. String getName(): 클래스의 이름을 리턴한다. Package g.. [자바스크립트] 기본적인 웹 사이트 최적화 방법 HTTP 요청 최소화 HTTP 요청 최소화는 최적화에서 가장 기본적이면서도 중요한 부분입니다. 웹 사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성됩니다. 각 구성 요소는 모두 웹서버에 있습니다. 이 구성 요소를 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 듭니다. 네트워크 비용은 곧 응답 시간으로 이어집니다. 그러므로 다운로드해야 하는 구성 요소의 개수를 줄이는 것은 가장 효과가 크고 중요한 최적화 방법입니다. 웹페이지에서 다운로드하는 구성요소의 개수는 HttpWatch나 YSlow로 알아볼 수 있습니다. 캐시가 없는 상태에서는 총 121개의 구성 요소를 다운로드 하고, 캐시가 있는 상태에서는 43개의 구성 요소를 다운로드합니다. 어떻게 121개의 구성요소만으로 구현해 HTTP .. [자바스크립트] 웹 사이트 최적화 웹사이트 성능과 최적화 사용자 경험(UX, User Experience) 전문가 제이콥 닐슨은 웹페이지의 반응 시간(Response Time)이 되도록 1초 이내여야 사용자 경험에 긍정적인 영향을 미친다고 분석하였습니다. 그 이상 시간이 걸리면 컴퓨터의 동작에 이상이 생겼다고 생각해 결국 웹페이지를 떠나고 사용자 경험에 부정적인 영향을 미치게 됩니다. 이처럼 웹페이지의 반응 시간, 즉 응답 속도는 웹서비스의 경쟁력 가운데 하나 입니다. 웹서비스는 모두 브라우저에서 표현됩니다. 그렇기 때문에 브라우저가 어떻게 동작하는지 이해하는 것은 웹사이트 최적화에 꼭 필요한 일입니다. 브라우저가 웹페이지를 처리하는 방식은 1. 서비스 이동 단계 → 2. 리다이렉트 단계 → 3. 애플리케이션 캐시 확인 단계 → 4. 네.. 이전 1 2 3 다음
