웹 성능 최적화

을참고 자료 및 강의

메모.

- DOM 생성시 script태그를 만나면 멈추고 스크립트 실행

- script에서 스타일을 수정해야하는데 CSSOM이 만들어지지 않았다면 스크립트는 DOM생성하던 것을 block한 상태에서 CSSOM이 만들어지기까지 기다린다.(js는 parser blocking)

- css는 parser blocking resource

CRP 최적화 하기

1. CSS 파일 링크시킬 때 CSS media types와 media queries 사용하여 blocking을 막는다

2. Javascript의 위치 중요, DOM이나 CSSOM을 조회하고 수정하는 스크립트 내용도 중요.

3. script태그에 async 속성을 사용하면, 브라우저는 script태그를 만나더라도 DOM blocking을 하지 않는다.

async 에 대해..

서로 연관이 있는 js파일들을 나열할 때 async를 사용하면 나중에 이게 어떤 순서로 로드될지 모름.

jquery의 .ready 메서드는? ( $(document).ready(functioin() {}); )

어차피 DOM생성 끝나고 스크립트를 실행시키는데

async는 DOM생성을 block하지 않고 넘어간 후 DOM, CSSOM이 끝나면 스크립트 실행?

.ready()는 DOM이 준비되자마자 실행?

차이를 잘 모르겠다. 아예 쓰임새가 다른 건가?

ready는 DOM 계층 생성 되자마자.

$(function() {}); 와 같은거임

window.onload는 window에서 load이벤트가 발생할 때 불림.

load이벤트는 document loading process가 끝나는 시점에 불린다.

images, script files, cssfiles 등등이 로드 된 후에 불림..

제이쿼리 load와 같은 기능일까.

$(window).load(function() {}) 은 DOM뿐만 아니라 이미지, iframes같이 전체 페이지가 준비되어야 실행된다.

udacity

dom 최적화 (HTML파일을)

1. 최소화 (쓸데없는 코드나 주석 제거)

2. 압축(GZIP사용)

위의 1,2,3은 HTML, CSS, JS모두

css 최적화

1. 미디어 쿼리 사용 -> 각각의 CSS파일로 분리하여 link에 media속성 사용

2. 간단한건 inline css

javascript

1. async 속성 사용

2. 간단한건 inline js

Allie Loves Noah