스크립트를 head에서 선언해도 좋지만 자바스크립트를 필요에 따라 로드시키는 것도 좋은 방법 중 하나이다. 해당 스크립트를 전체 DOM에서 사용되는 거면 처음에 로드시키는게 좋지만 필요에 따라 특정 기능에만 필요한 스크립트라면 따로 로드시켜서 작업을 하는 것이 좋다.

자바스크립트를 로드할 때 async, defer 속성을 보았을 것이다. 위의 두개의 속성은 자바스크립트 로드와 실행차이를 보여준다. 먼저 기본적인 자바스크립트의 로드에 대해 알아보자 실행 순서는 1 -> 2 -> 3 순으로 실행이 됩니다. 1번은 HTML 구문, 2번은 자바스크립트 구문, 3번은 HTML구문 순 입니다. 렌더링 : HTML구문을 브라우저 화면에 해석하여 보여지기까지의 과정 여기서 2번 자바스크립트 파일 file.js 가 용량이 큰 파일이어서 로드되는데 2초가 걸리고 실행시간이 1초가 걸린다고 가정해보자 이렇게 되면 1번 HTML구문을 렌더링 2번 자바스크립트 로드시 총 3초가 걸리고 3번 HTML나머지 구문을 렌더링 이렇게 된다면 웹 페이지를 이용하는 사용자들은 홈페이지가 느리다고 판단을..

자바스크립트는 위에서 아래로 순서대로 실행되는 인터프리터 언어이다. 컴파일을 하지 않으며 한줄 한줄 읽어나가며 실행을 한다. 요새 IT기술들이 메모리도 좋아지고, 서버도 빨라지고 워낙에 좋아져서 소스코드를 완전 더럽게 짜지 않는이상 웬만큼 속도는 비슷하다. 하지만 인터넷속도가 빠르다는 것은 우리나라 이야기이지 해외에서는 아직도 많이 느리다고들 한다. 화면을 띄우기 위해서 HTML, Javascript, CSS, 웹 언어(php, jsp, asp) 등을 많이 쓴다. 그 중 자바스크립트는 클라이언트에서 실행되는 언어이며 화면을 띄우는데 실행속도를 높이는 알아보자 HTML과 Javascript, CSS 는 위에서 말했듯이 한줄 한줄 읽는 언어이다. HTML : 웹 페이지의 화면을 구성 Javascript : ..

감시자 패턴의 주요 목적은 중재자 패턴과 비슷하게 결합도를 낮추는 것이다. 주로 클라이언트 측 프로그래밍에서 사용되는 패턴이고, 이벤트 핸들러가 대표적인 감시자 패턴의 예이다. 감시자 패턴은 주 객체가 있고 감시자 객체가 있는 상황에서 특정 이벤트가 발생하게 되면 감시자가 이벤트를 감지하고 주 객체에게 알려주는 행위를 의미한다. 안드로이드로 비유하자면 노티피케이션과 같이 manifest.xml 에 리스너를 등록해 두고 특정 이벤트가 있을 시 푸쉬 알람이 가능 형태를 의미한다고 보면 된다

중재자 패턴 이놈도 간단하다. 객체는 서로 다른 독립형 모듈로 구성 되어 있어야 한다. 또한 객체간의 통신은 유지보수가 쉽고 다른 객체를 건드리지 않는 구조안에서 수정할 수 있는 방식이 이루어져야 한다. 서로다른 객체간의 연관도가 높을 수록 결합도가 강하다고 말하는데 중재자 패턴은 객체간의 결합도를 낮추고 독립된 객체들끼리는 서로 통신하지 않고 중재자 객체를 통해 서로가 통신한다. 책에 예제가 잘 나와있다. 두 명의 플레이어가 게임을 하는데 점수를 더 많이 얻는 사람이 승리하는 게임이다. 여기서 필요한 객체는 크게 1) 플레이어1 2) 플레이어2 3) 점수판 4) 중재자 여기서 중재자의 역할은 게임을 초기화하고 게임의 끝을 알려주고 플레이어들 간의 순서를 알려주고 점수판에 점수를 알려주는 역할을 하게 된..

프록시 패턴 이놈도 간단하다. ajax, 이벤트 핸들러 등 특정 이벤트에 대해서 다루어 봤다면 쉽게 이해가 가능할 것이다. 프록시패턴이란 한 번에 여러개의 객체를 생성해서 로드시키는 것이 아니라 필요에 따라 적재적소 하게끔 로드를 시키는 것이다. 웹에서 예를 들자면 video 태그 인데 특정 페이지에 여러개의 video 태그를 재생시켜야 하는 페이지가 있는데 한 번에 비디오를 재생시키는 것이 아닌 특정 이벤트가 주어졌을 때 비디오 객체를 생성하여 재생시켜 준다. 이것이 게으른 초기화 라는 방법이다. 즉 객체 생성을 최대한 없앰으로써 브라우저의 실행속도를 빠르게 높일 수 있다.