# DOMContentLoaded

jinic

document.readyState document.readyState를 이용해 document의 로딩시점에 따라 다른 이벤트를 실행시킬 수 있음 readyState의 값은 loading, interactive, complete 이 있는데, loading : document 로딩중 상태 interactive ( DOMContentLoaded 와 같은 상태 ) : 파싱은 되었지만 리소스(이미지, 스타일 등) 로딩 전, 돔트리에는 접근 가능 complete ( window.load 와 같으 상태 ) : 완료 document, window event https://ko.javascript.info/onload-ondomcontentloaded The popstate event https://gomakethings.com/how-to-detect-when-the-browser-url-changes-with-vanilla-js/ 기타 window.glo

mintzzz1009

스크립트 해석과정과 DOMContentLoaded의 상관관계 자바스크립트 공부를 할 때 다른 언어보다 더욱 매력을 느끼게 해주는 요소는 개인적으로 DOM(문서 객체 조작하기)을 활용할 때인 것 같다. 문서 객체 조작하기를 통해서 웹 문서의 다양한 태그들을 내 마음대로 이렇게 저렇게 다뤄보다보면 공부가 좀 더 재밌는 공부가 된다. 그런데 DOM을 사용하기 위해서는 DOMContentLoaded라는 이벤트를 사용해야 한다. 이것이 무엇이고 왜 사용해야 하는 것인지 정리해보고자 한다. DOMContentLoaded 문서 객체를 조작할 때의 코드는 보통 이렇게 사용이 된다. 위와 같이 코드를 짜는 이유는, 이렇게 짜지 않으면 오류가 나는 경우가 있기 때문이다. 예를 들어서 위 코드를 입력해 놓은 스크립트를 `` 안에 위치해 놓았을 때를 생각해보자. 웹 브라우저는 HTML, CSS, JS 등의 언어로 작성된 웹 문서를 읽을 때 다음과

rlwjd31

🍀 Event event의 사전적인 의미는 사건 이란 의미가 있다. 필요한 물품을 샀을 때 통장에서 돈이 빠져나가는 사건이 일어난다…🥲 돈이 빠져나가서 통장에 잔고가 얼마 없다면 어떻게 할까? 이 때 내가 할 수 있는 행동(처리)는 아래와 같은 옵션들이 있을 것이다. > event occur 돈이 없어지면 > option1 아낀다 > option2 일을 해서 번다 > option3 뻐긴다 > option4 사려고 한 목록 중 몇 개를 없앤다 > … > optionN 이렇게 보면 사건과 처리로 생각할 수 있다. > 사건: 돈이 빠져나감 > 처리: 돈이 생길 때까지 뻐김… 웹에서도 event란 같은 의미이다. 좀 더 구체적으로 말하자면 웹에서의 이벤트는 사용자가 웹 브라우저에서 발생시키는 사건을 뜻한다. 아래는 사용자가 웹에서 이벤트를 발생시키는 예시들이다. 브라우저에서 마우스 움직임 브라우저에서 마우스로 클릭할 때 브라우저 창 사이즈를 줄이거

nalsae

🔶 JavaScript >* 배열과 관련된 식별자 이름은 어떻게 짓는 것이 바람직한가? > > : filters처럼 복수형으로 쓸 수 있는 것은 's' 를 붙여서 짓는 것이 좋음 : filter처럼 콜백 함수의 매개변수를 정하기가 더 쉽기 때문에 >* 모듈로 추출할 가능성이 있는 함수는 코드 상 어디에 배치하는 것이 바람직한가? > > : 가급적 위쪽에 배치하는 것이 바람직함 > * 식별자 이름을 지을 때 어떤 경우에 get이 아니라 create나 generate를 사용하는가? > > : get은 있었던 정보를 취득해오는 경우에 사용, create나 generate는 기존에 없었던 값을 생성할 때 사용 > * DOM 요소의 초기 렌더링 시 사용할 수 있는 이벤트는 무엇인가? > > : window 객체의 DOMContentLoaded를 사용하여 초기 렌더링 시 수행할 로직을 콜백

jungcolor

JavaScript의 문서 로드 시점 > 1. 웹브라우저 시작 (사용자가 페이지를 방문) 웹문서 읽기 (브라우저가 웹문서를 읽기 시작) DOM 생성 (DOM이 생성되면 DOMContentLoaded 메서드 실행) 1. DOMContentLoaded > - HTML과 script가 로드 된 시점에 이벤트 발생 onLoad 이벤트 보다 먼저 실행 빠른 실행 속도가 필요할 때 적합 IE8 이하의 브라우저 지원하지 않음 (상관X) 코드예시 2. onload (load) > - 문서의 모든 리소스(images, js, css, etc)가 로드 된 후 이벤트 문서의 포함된 모든 컨텐츠가 로드된 후 실행되기때문에 불필요한 로딩시간이 발생됨 동일한 문서에 onload는 하나만 존재 해야 한다 중복 된 경우 가장 마지막 선언이 실행 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요 외부의 자원(iframe

nninnnin7

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The load (onload) event can be used to detect a fully-loaded page.

hikoand

브라우저가 웹페이지를 읽을 때 과정은 아래와 같다. >1. HTML파일을 읽는다. 이미지,폰트,CSS파일과 같은 리소스를 읽는다. JS를 다운받는다. 위처럼` 의 가장 마지막에 스크립트를 넣는 경우, 브라우저가 DOM요소를 모두 읽어 나가는 중 스크립트를 만나면 window에 eventListner`를 등록하고 리소스가 로딩되면 등록한 콜백함수가 출력된다. 위와 같은 HTML 문서의 생명주기엔 DOMContentLoaded, load 와 같은 이벤트가 관여하는데 이벤트 발생 순서에 따라 그 역할을 달리한다. DOMContentLoaded 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일이나 CSS 등의 리소스를 기다리지 않으므로 페이지에 리소스가 많은 경우 더 빨리 호출된다. DOMContentLoaded는 DOM이 준비된 것을 확인한 후 원하는 **DOM 노드를 찾아 핸들러를 등

longroadhome

Intro 본 포스팅은 여기에 올라온 게시글을 바탕으로 작성되었습니다. 파트와 카테고리 동일한 순서로 모든 내용을 소개하는 것이 아닌, 몰랐거나 새로운 내용 위주로 다시 정리하여 개인공부 목적으로 작성합니다. 중간중간 개인 판단 하에 필요하다고 생각될 시, 기존 내용에 추가로 보충되는 내용이 있을 수 있습니다. DOMContentLoaded, load, beforeunload, unload 이벤트 HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다. DOMContentLoaded : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이때 이미지 태그 img의 파일(리소스)이나 스타일시트 등의 기타 자원은 기다리지 않는다. load : HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는

maliethy

1. window.onload 빠른 로딩속도를 위해 자바스크립트 구문을 나중에 따로 로드할 수 있는 함수이다. HTML의 모든 태그를 불러온 이후 onload가 실행된다. HTML 태그에 이미지, 영상과 같은 고용량 파일이 있을 때 성능상 문제가 발생할 수 있다. 2. JQuery의 document.ready DOM트리 (DOM Tree) 의 로드만을 감지한다. window.onload와 다르게 태그의 로드만을 감지하므로 이미지, 영상이 로드되기 전에 자바스크립트 구문이 실행된다. 제이쿼리 cdn을 불러오지 않으면 사용할 수 없다. 3. window.addEventListener의 'DOMContentLoaded' 제이쿼리의 document.ready와 크게 다를 바 없는 성능을 구현할 수 있다. ie8이하에서는 지원하지 않는다. 출처: https://itun.tistory.com/510 https://velog.io/@leyuri/javaScript-