마크업 구조의 기본개념 및 초기세팅

meta태그

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no">
<meta name="Description" content="내용" />
<meta name="Keywords" content="카워드1, 키워드2, 키워드3" />
<meta name="author" content="이름" />

Script 위치

원활한 js 실행과 렌더링 시간 단축을 위해 js스크립트의 위치는 중요하다.

head안에 삽입

Html파싱 하던 중 js를 가져오고 실행까지 하게 된다. 그래서 화면을 보기까지 시간이 많이 소요됨

body끝에 삽입

Html 먼저 파싱 후 문서가 준비되면 js를 페칭 및 실행. 화면은 빨리 렌더링되지만 자바스크립트로 렌더링하는 요소가 많다면 js의 실행을 기다리는 시간이 길어진다.

head + asyns

Html 파싱 중에 js를 가져오고 실행하게 된다. Js파일 다운로드 시간을 절약할 수 있으나, Js가 html보다 먼저 정의되기 때문에 그 부분에서 문제가 일어날 수 있다.

head + defer

Html 파싱하는 동안 js를 준비하고, html 파싱이 완료되면 js를 실행한다.
Js파일이 순차적으로 실행된다.

회사에서는 head에 삽입하는 방식을 사용중인데, 그래서 화면 로드가 느리다.
Defer방식으로 바꿔야겠다.