생각없이 개발을 하다보면 지역변수를 선언하지 않고 객체에 직접접근하여 사용하는 경우가 있다. 특히 반복문을 작성할 때 많이들 실수하는 부분인데 이런 부분은 작은 사이트일 때는 큰 변화가 없지만 큰 사이트일 수록 속도에 비약적으로 차이가 난다. 간단한 예제를 보자 div의 개수를 가져와서 반복문을 돌리는 간단한 예제이다. 위의 반복문은 직접접근, 아래의 반복문은 지역번수에 캐시해서 돌아간다. 개수가 작을 때는 크게 상관이 없겠지만 개수가 늘어나면 늘어날 수록 시간차이는 분명 존재한다. 대략 0.6초 가 차이나는데 브라우저가 느린환경이라면 더 느릴수도 있다는 이야기이다.
자바스크립트에서는 데이터를 저장하고 읽는 위치에 따라 코드의 전반적인 성능에 분명한 차이가 있다. 1) 리러털 값과 지역변수는 매우 빨리 접근이 가능하고, 배열과 객체는 이보다는 느리다. 2) 스코프 밖의 변수는 스코프 체인의 첫 번째 변수 객체에 있으서 지역변수보다 느리다. 변수 스코프가 체인이 깊을 수록 접근하는데 시간이 많이 걸리고 전역변수는 스코프 체인 검색에 가장 마지막에 검색이 되어 시간이 많이 걸린다. 3) with 문은 그냥 쓰지 말아라 4) 중첩된 객체멤버는 성능에 많이 느려진다. 피하라. 사용해야 한다면 최소한으로 접근을 하고 지역변수에 캐시해서 사용하자 5) 속성(프로퍼티) 메서드(함수)가 프로토타입 체인 깊이 있을 수록 느리다. 위와 같은 방식을 피해서 코드를 작성하면 분명이 빨라질..
자바스크립트의 성능을 높이기 위해 가장 기본적으로 스코프체인이라는 것을 알아야한다. 스코프체인이란 함수안에서 선언된 변수를 함수가 찾아가는 과정을 말한다. 스코프체인에서 가장 먼저 검색을 하게 되는 것은 지역변수이며 가장 마자막에 검색을 하는 것은 전역변수 이다. 함수를 실행하게 되면 실행문맥이라는 내부객체가 생성이 되며, 실행문맥은 함수가 실행되는 환경을 정의한다. 함수를 여러번 호출 하면 실행문맥도 여러 개 만들어 지고 함수가 완전히 실행되면 실행문맥은 파괴된다. 여기서 스코프 체인이 일어나는데 활성화 객체(Activation object)와 전역객체(Global object)가 실행이 되어 우선 적으로 활성화 되어 있는 객체를 검색해서 할당된 변수를 찾습니다. 지역변수를 먼저 검색한다고 생각하시면 ..
자바스크립트를 로드할 때 async, defer 속성을 보았을 것이다. 위의 두개의 속성은 자바스크립트 로드와 실행차이를 보여준다. 먼저 기본적인 자바스크립트의 로드에 대해 알아보자 실행 순서는 1 -> 2 -> 3 순으로 실행이 됩니다. 1번은 HTML 구문, 2번은 자바스크립트 구문, 3번은 HTML구문 순 입니다. 렌더링 : HTML구문을 브라우저 화면에 해석하여 보여지기까지의 과정 여기서 2번 자바스크립트 파일 file.js 가 용량이 큰 파일이어서 로드되는데 2초가 걸리고 실행시간이 1초가 걸린다고 가정해보자 이렇게 되면 1번 HTML구문을 렌더링 2번 자바스크립트 로드시 총 3초가 걸리고 3번 HTML나머지 구문을 렌더링 이렇게 된다면 웹 페이지를 이용하는 사용자들은 홈페이지가 느리다고 판단을..