자바스크립트 최적화
1. 핵심 영역은
<head> 태그 안쪽
<body>바로 앞부분 스크립트 내용 이다.
즉, 정말 필수 자바스크립트는<head>안쪽에 위치
나머지는 태그의 가장 아래 부분인</body>바로 앞에 위치 시키는것이 정석．
2 이유는 자바스크립트 순차적으로 로드 되기 때문이다.
최초 로딩 때 필요없는 자바스크립트 로드, 파싱하는 시간을 없애고, 필요한 부분을 먼저 로드시키자는 것
문서의 로딩순서는
자바스크립트 -> .html, css 순서이기 때문
결국엔 총 브라우저 로딩시간은 같지만, 순서가 다르기 때문에 빠르게 뜨는 것으로 효과를 볼 수 있다.
=========================================================================
defer를 쓰면 </body> 바로 앞까지 옮겨놓을 필요가 없음
1. IE4에서 MS는defer속성을 만들어 넣음
이후로 쭉 html5까지 유지된다. 즉, 쓸모 있는 속성이라는 반증
Defer를 사용하게 되면
Html, css가 브라우저 렌더링이 다 된 뒤 해당 스크립트 영역이 로드 됨.
defer 시킨 스크립트는 문서의 파셔(parse) 종료 후에 실행되는 스크립트 목록에 들어가게 된다.
한마디로 </body> 바로 앞에 스크립트를 넣었던 효과(동작)이 일어남
단, 실제 스크립트 위치는 상관없어짐.
===========================================================================
Html5부터 async 출현
Async의 의미는 기존 브라우저 로딩과 관계없이 가능한 빨리 실행(로딩)시켜라는 부분 즉 비동기화
단, CPU자원을 많이 쓴다.
종속성이 없는 코드에만 사용한다.
예를 들어, 구글 애드센스 js파일 같은데는 사용 가능
Jquery.min.js도 종속성이 없는 파일?
Async는 막상 쓸 데가 안떠오름.
'기술(MS,Web,Windows,AWS) > Web개발' 카테고리의 다른 글
| 특정 문자열을 사용하는 SP/뷰/트리거/함수 찾기 쿼리 sql검색 (0) | 2016.06.20 |
|---|---|
| [Visual Studio] 비쥬얼 스튜디오 버전 별 지원 Targeting .NET Platforms (0) | 2016.06.15 |
| IE10 부터 맞춤법 교정 기능 (0) | 2016.04.22 |
| FCK 에디터 기본 설정 (0) | 2016.04.05 |
| interface 인터페이스 정리 (0) | 2016.03.27 |