본문 바로가기

Web 프로그래밍/Javascript59

[Javascript HighPerformance] 자바스크립트 실행 속도 높이기(2) 자바스크립트에서는 데이터를 저장하고 읽는 위치에 따라 코드의 전반적인 성능에 분명한 차이가 있다. 1) 리러털 값과 지역변수는 매우 빨리 접근이 가능하고, 배열과 객체는 이보다는 느리다. 2) 스코프 밖의 변수는 스코프 체인의 첫 번째 변수 객체에 있으서 지역변수보다 느리다. 변수 스코프가 체인이 깊을 수록 접근하는데 시간이 많이 걸리고 전역변수는 스코프 체인 검색에 가장 마지막에 검색이 되어 시간이 많이 걸린다. 3) with 문은 그냥 쓰지 말아라 4) 중첩된 객체멤버는 성능에 많이 느려진다. 피하라. 사용해야 한다면 최소한으로 접근을 하고 지역변수에 캐시해서 사용하자 5) 속성(프로퍼티) 메서드(함수)가 프로토타입 체인 깊이 있을 수록 느리다. 위와 같은 방식을 피해서 코드를 작성하면 분명이 빨라질.. 2016. 6. 8.
[Javascript HighPerformance] 스코프체인(지역변수 vs 전역변수) 자바스크립트의 성능을 높이기 위해 가장 기본적으로 스코프체인이라는 것을 알아야한다. 스코프체인이란 함수안에서 선언된 변수를 함수가 찾아가는 과정을 말한다. 스코프체인에서 가장 먼저 검색을 하게 되는 것은 지역변수이며 가장 마자막에 검색을 하는 것은 전역변수 이다. 함수를 실행하게 되면 실행문맥이라는 내부객체가 생성이 되며, 실행문맥은 함수가 실행되는 환경을 정의한다. 함수를 여러번 호출 하면 실행문맥도 여러 개 만들어 지고 함수가 완전히 실행되면 실행문맥은 파괴된다. 여기서 스코프 체인이 일어나는데 활성화 객체(Activation object)와 전역객체(Global object)가 실행이 되어 우선 적으로 활성화 되어 있는 객체를 검색해서 할당된 변수를 찾습니다. 지역변수를 먼저 검색한다고 생각하시면 .. 2016. 6. 8.
[Javascript HighPerformance] 스크립트 동적 로드하기 스크립트를 head에서 선언해도 좋지만 자바스크립트를 필요에 따라 로드시키는 것도 좋은 방법 중 하나이다. 해당 스크립트를 전체 DOM에서 사용되는 거면 처음에 로드시키는게 좋지만 필요에 따라 특정 기능에만 필요한 스크립트라면 따로 로드시켜서 작업을 하는 것이 좋다. 2016. 6. 8.
[Javascript] async , defer 알아보기 자바스크립트를 로드할 때 async, defer 속성을 보았을 것이다. 위의 두개의 속성은 자바스크립트 로드와 실행차이를 보여준다. 먼저 기본적인 자바스크립트의 로드에 대해 알아보자 실행 순서는 1 -> 2 -> 3 순으로 실행이 됩니다. 1번은 HTML 구문, 2번은 자바스크립트 구문, 3번은 HTML구문 순 입니다. 렌더링 : HTML구문을 브라우저 화면에 해석하여 보여지기까지의 과정 여기서 2번 자바스크립트 파일 file.js 가 용량이 큰 파일이어서 로드되는데 2초가 걸리고 실행시간이 1초가 걸린다고 가정해보자 이렇게 되면 1번 HTML구문을 렌더링 2번 자바스크립트 로드시 총 3초가 걸리고 3번 HTML나머지 구문을 렌더링 이렇게 된다면 웹 페이지를 이용하는 사용자들은 홈페이지가 느리다고 판단을.. 2016. 6. 8.
[Javascript HighPerformance] 스크립트 실행 속도 높이기 자바스크립트는 위에서 아래로 순서대로 실행되는 인터프리터 언어이다. 컴파일을 하지 않으며 한줄 한줄 읽어나가며 실행을 한다. 요새 IT기술들이 메모리도 좋아지고, 서버도 빨라지고 워낙에 좋아져서 소스코드를 완전 더럽게 짜지 않는이상 웬만큼 속도는 비슷하다. 하지만 인터넷속도가 빠르다는 것은 우리나라 이야기이지 해외에서는 아직도 많이 느리다고들 한다. 화면을 띄우기 위해서 HTML, Javascript, CSS, 웹 언어(php, jsp, asp) 등을 많이 쓴다. 그 중 자바스크립트는 클라이언트에서 실행되는 언어이며 화면을 띄우는데 실행속도를 높이는 알아보자 HTML과 Javascript, CSS 는 위에서 말했듯이 한줄 한줄 읽는 언어이다. HTML : 웹 페이지의 화면을 구성 Javascript : .. 2016. 6. 8.
[Javascript] 감시자 패턴 감시자 패턴의 주요 목적은 중재자 패턴과 비슷하게 결합도를 낮추는 것이다. 주로 클라이언트 측 프로그래밍에서 사용되는 패턴이고, 이벤트 핸들러가 대표적인 감시자 패턴의 예이다. 감시자 패턴은 주 객체가 있고 감시자 객체가 있는 상황에서 특정 이벤트가 발생하게 되면 감시자가 이벤트를 감지하고 주 객체에게 알려주는 행위를 의미한다. 안드로이드로 비유하자면 노티피케이션과 같이 manifest.xml 에 리스너를 등록해 두고 특정 이벤트가 있을 시 푸쉬 알람이 가능 형태를 의미한다고 보면 된다 2016. 6. 7.

티스토리툴바