# Defer

75개의 포스트
post-thumbnail

[2023.11.03] 개발자 교육 30일 차 : 강의-html, css, JavaScript [구디 아카데미]

defer는 왜 사용하나? 자바와 달리 html은 순차적으로 진행된다. 임포트된 javascript가 DOM Tree가 완성된 후 진행될 수 있도록 지연시켜주기 위해 사용한다.

2023년 11월 3일
·
0개의 댓글
·

[JS] async과 defer

불리언 타입, 선언하면 true로 설정html 파싱 중, async가 나타나면 해당 js 파일을 병렬로 다운만 받다가 다운이 완료되면 파일을 실행하고 파싱을 이어서 진행스크립트가 여러개일 경우, 먼저 다운 완료된 스크립트를 먼저 실행시키기 때문에 자바스크립트 순서가

2023년 10월 20일
·
0개의 댓글
·

JS - file fetching

브라우저는 html 파일을 받으면 한 줄 한 줄 해석하여 DOM 요소로 변환(parsing)하며 script tag를 만나면 해당 js file을 불러오게 된다.script tag를 head에 포함하는 경우 js file을 모두 불러온 후 화면이 보여지게 되는데 fil

2023년 10월 1일
·
0개의 댓글
·
post-thumbnail

[JavaScript] <script> 태그 속성 async, defer

html을 불러올 시 자바스크립트가 포할(...)되어 있다면 스크립트를 먼저 실행한다.스크립트를 실행할때에는 위애서 아래로 한줄씩 읽다가 멈춘 뒤 태그의 내용을 다운로드 한 뒤 나머지 내용들이 처리된다.

2023년 9월 23일
·
0개의 댓글
·
post-thumbnail

script 로딩방법-async와 defer의 특징과 장단점

html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재함 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자

2023년 9월 15일
·
0개의 댓글
·
post-thumbnail

[HTML] script, script async, script defer

🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다. Summary | | ` | | ` | | :--------: | :--------: | :--------: | :--------: | | 카테고리 | ` 태그와 속성 |...

2023년 9월 11일
·
0개의 댓글
·

자바스크립트 defer, async

defer는 DOM 로드가 완료될 경우 실행 async는 외부 플러그인이라던가 연관성이 없는 경우 다운 받자마자 실행.

2023년 8월 2일
·
0개의 댓글
·

파싱

&lt;script> html을 파싱(읽어 내려감)하는 과정에서 이 태그를 만나면 파싱이 중단되고 스크립트를 실행한다. 스크립트가 다 실행이 되면 파싱을 재개한다.&lt;script async> html 파싱과 병렬적으로 로드된다. (같이진행)단, 스크립트가 실행 될때

2023년 4월 21일
·
0개의 댓글
·

[Javascript] script async와 defer의 차이점

js파일의 크기가 크면 html 파싱하는데 시간이 오래 걸리기 때문에 좋은 방법이 아니다.js파일이 fetching하고 executing하기 전에 page contents를 볼 수 있다.하지만 웹이 js파일에 의존도가 높으면 의미있는 page를 볼 수가 없다.fetch

2023년 2월 11일
·
0개의 댓글
·

script defer, async

브라우저가 Html 파싱하는 순서는 위에서 아래로 진행한다.예를 들어 body전에 script 태그가 있다고 가정하면,html 파싱시작script 태그를 만나면 html 파싱 잠시 멈춤.스크립트 파일 다운(script fetch)스크립트 파일 실행멈춘 지점부터 파싱 시

2023년 2월 7일
·
0개의 댓글
·
post-thumbnail

Defer / Async 효율적으로 사용하기

그 분야와 연관성이 있는 defer와 async에 대해서 알아보겠습니다.

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

Exception Part. 01

개체 지향을 얘기하면 꼭 나오는 단어인 예외에 대해서 알아본다.

2023년 1월 26일
·
0개의 댓글
·
post-thumbnail

(FrontEnd) html에서 js를 불러올 때의 옵션(async / defer)

사전 지식1\. parsing html : html 분석하기2\. fetching js : js 가져오기3\. executing js : js 실행하기순서 : parsing html -> fetching js -> executing js -> parsing htmlb

2023년 1월 9일
·
0개의 댓글
·

defer와 async 차이 (51강)

defer, async

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

[최적화] 최적화 기법

화면을 렌더링할 때는 HTML 파일과 CSS 파일이 필요HTML 파일은 DOM 트리를, CSS 파일은 CSSOM 트리를 만들고 두 트리를 결합(렌더 트리)하여 렌더링할 때 사용이 두 트리 중에서 하나라도 변경되면 리렌더링을 유발하는데, 이때 트리의 크기가 크고 복잡할수

2022년 12월 4일
·
0개의 댓글
·
post-thumbnail

HTML에서 JavaScript를 링크하는 방법 비교

head + defer 방식

2022년 11월 24일
·
0개의 댓글
·

[HTML] script태그 defer, async

script 태그의 defer, async 속성에 대해 정리해보고자 한다.브라우저의 렌더링은 싱글 쓰레드(Single Thread)로 작동하고, 쓰레드는 렌더링과 스크립트 태그 실행 두가지 일을 모두 수행한다. 그래서 HTML문서를 렌더링하는 과정 중, 스크립트 태그를

2022년 11월 11일
·
0개의 댓글
·
post-thumbnail

[Swift] defer 구문: 후처리

- defer 구문을 쓰면, 그 내부의 코드들이 나중에 실행되게 만들 수 있다. 그 나중은, defer 구문을 감싸고 있는 가장 가까운 코드 블록을 벗어나는 시점이다. 코드를 읽어내려가면서 defer 구문을 훑기만 했다면 어떤 이유로 defer 구문의 최대 근접 코드

2022년 11월 10일
·
2개의 댓글
·