검색결과 리스트
글
HTML 파일을 브라우저 렌더링 할때 다음과 같은 순서로 렌더링한다.
<head> 태그 -> <head> 태그 내 script, link (stylesheet)
-><body> 태그 -><body>태그 내 이미지, 문서요소
그런데.....
만약에 <head>태그 구조가 다음과 같다고 해보자>
<head>
<script src="file1.js"></script>
<script src=" file2.js"></script>
<script src=" file3.js"></script>
<script src=" file4.js"></script>
<script src=" file5.js"></script>
</head>
웹 페이지를 들어오는 사용자들은 5개의 js파일을 보기 전에는 웹페이지의 어떤 구조도,이미지도
볼 수 없다는 말이 된다.
일반적으로 사이트의 외관 구성은
css(link 태그) + body 태그로 구성하게 되는데, 저뒤에 숨어있는 자바스크립트 파일들이
맨 위에 위치하는 바람에 사이트가 어떻게 생겼는지를 보여주기도 전에 한참을 기다려야 하는것이다.
이에 대한 해결책으로
yahoo에 근무하며, 'High Perfomance Web Site' 를 저술한 Steve Souder는
'put script to bottom!'(스크립트는 바닥에 넣으세요.) 라고 말했다.
즉, </body>바로 위에 스크립트 태그를 몰아넣으면,
<head>와 <body>의 내용을 전부다 불러온 후에, 스크립트 파일을 로드하기 시작하기 때문에,
위와 같은 문제를 해결 할 수 있다.
또 한가지 방식으로는 'defer'속성인데, script에 defer 속성을 주는것이다.
<script src="file1.js" defer="defer"></script>
위와 같이 말이다. 그러면 모든 파일이 로드 된 후에 스크립트를 로드하기 시작한다.(window.onload 이벤트와 거의 동시 시작)
게다가 HTML 4.01에 포함된 표준이다! 근데 왜 </body> 위에 스크립트를 놓는 방법을 소개했는지 궁금하지 않은가?
....표준이지만.............IE에서..........만 지원된다.
인터넷 익스플로러의 장점도 찾게되고, 살다보니 별일이다.
--------------------------------------------------
‘Put Scripts at the Bottom‘ 에서 속도 차이를 직접 확인해보시라.
(여담이지만 script 태그를 불러오는 순서는 직렬 방식으로, 위의 예로 보면
file1.js ->file2.js -> file3.js ... 순으로 처리하지만, link 태그같은 경우는 병렬식으로 link 태그의
스타일 시트를 불러옴과 거의 동시에 body태그를 렌더링 하기시작하므로 크게 문제가 되지 않는다.)
'html 이야기' 카테고리의 다른 글
| 익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
|---|---|
| 내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
| inline-block 요소에 관한 고찰 (0) | 2012.12.09 |
| 블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
| HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
자바스크립트에서 조건문을 쓸 때
일반적으로 if 문 안에 true,또는 false가 올 만한
값을 넣고 사용을 한다.
하지만 자바스크립트가 허용해주는 예외가 있다.
그것은 바로 0, undefined, NaN, null , ''(빈문자열), [](빈 배열) 등 무언가 공백이나 오류를 의미하는 값은 false로 인식,
값이 있는 상수, 값이 있는 변수 등은 true로 인식한다.
예컨대
if (3)
{
}
는 항상 실행되는 문장이다.
이 사실을 어떻게 활용할수 있을까?
첫번째로는 값의 존재 유무를 체크하는 것이다.
예컨대
if (document.getElementById('test'))
{
}
라 하면, "document 상에 test라는 아이디를 가진 엘리먼트가 존재하면 중괄호내 문장을 실행"이
라는 의미가 되는것이다.
또한가지는, 우리가 흔히 사용하는
return;, 또는 return 0;
이라는 문장. 보통은 이 문장을 기점으로 이벤트를 중지시키려고 사용하지만,
return false; 가 좀더 명시적이고 올바른 표현이다.
return 0, return이 분명 자바스크립트 상에서 return false와 비슷한 효과를 주긴 하지만,
진정한 프로그래머라면 코드의 가독성을 높이는 명시적인 코딩을 해야하지 않을까?
'JavaScript 이야기' 카테고리의 다른 글
| null과 undefined의 차이 (3) | 2013.01.13 |
|---|---|
| 자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
| 자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
| 자바스크립트 키코드 (0) | 2012.12.14 |
| 자바스크립트에서 변수 타입에 관한 몇가지 알짜상식 (0) | 2012.11.17 |
설정
트랙백
댓글
글
자바스크립트는 변수 타입에 대한 설정이 상당히 관대한 언어이다.
어떤 변수 타입에 관한 잘못을 저질렀을때 자바스크립트는 오류를 내보내는 것 대신에
숫자는 문자로, 문자는 또 숫자, 기타 등등 으로 상황에 따라 적절(?)하게 변화시켜준다.
필자가 코딩을 하며 경험한 자바스크립트 변수 타입 오토캐스팅에 관한 몇가지 사실들을 공유하고자 한다.
법칙 1) 문자열 + 숫자 ->숫자가 더해진 문자열
예컨대
var x='abc';
var y=3;
alert(x+y); // 'abc3' 출력
가장 기본적인 사실로, 대부분의 웹개발자가 할고있는 사실이다.
법칙 2) 비교연산자를 사용할 때 숫자vs문자를비교하면 문자열을 자동으로 숫자로 변환하여 비교해준다.
3>'4'를 비교하면 false라는 결과가 출력될 것이다.
법칙 3) 비교연산자를 사용할 때 문자열인 숫자 둘을 비교할 때,
자릿수가 같으면 올바로 연산을 해주나, 자릿수가 다르면 문자열로 인식하여 비교한다.
예컨대 '3000'>'2500'의 결과는 true이나, '3000'>'500'은 false이다.
----> 자바스크립트에서 문자열을 비교할 때는 문자열의 유니코드 값을 비교한다.
'3000'>'500'인 이유는 3보다 5가 유니코드 값이 더 크기때문이다.
법칙 4) 두 식중 하나가 NaN이면 항상 false를 반환한다.
물론 이경우는 숫자와 문자열을 비교했을때 자바스크립트가 믄자열인쪽을 숫자로
변환하다 NaN이 등장했을 경우이다.
'JavaScript 이야기' 카테고리의 다른 글
| null과 undefined의 차이 (3) | 2013.01.13 |
|---|---|
| 자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
| 자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
| 자바스크립트 키코드 (0) | 2012.12.14 |
| 자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2012.11.17 |
RECENT COMMENT