Defer [Javascript] script async 와 defer의 차이점 사용자가 HTML파일을 다운로드 받았을 때 브라우저는 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환한다. HTML을 파싱하다가 <script>...</script> 태그를 만나면 HTML 파싱을 잠시 멈추고 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. <script src="..."></script>를 만났을 때 외부에서 스크립트를 다운받고 실행한 후에 남은 페이지... asyncDeferJavaScriptscriptDefer [WEB] 스크립트를 비동기로 불러오는 두 가지 방법 - async / defer 요즘 프론트엔드 환경에서는 하나의 entry point만 두고 나머지 모듈은 전부 import/export한 다음 번들링하는 것이 익숙해진지 오래다. 심지어 entry point 파일 하나 조차도 create-react-app 같은 툴들이 대신 생성해주거나 초기 세팅 때만 심어두면 더이상 건드릴 일이 잘 없기 때문에 <script>를 어느 위치에 넣어야하는지에 대한 고민을 할 일이 거의 없는... DeferfrontendhtmljsasyncwebDefer TIL.02 async, defer HTML파일에 <script>태그를 이용해 JavaScript를 하는 방법은 4가지가 있다. body태그 안에 script 태그 삽입 async 속성 사용 defer 속성 사용 1.일반적인 script tag 삽입 브라우저가 HTML을 parsing 하다가 script 태그를 만나면 JS파일을 로드하고 실행한다. 그 과정에서 HTML은 parsing을 멈추고 JS파일이 실행된 후 나머지 HT... DeferWeCodeasyncJavaScriptDefer [TIL]script의 defer , async 속성 HTML파일에 script를 포함시킬 때 <script>를 이용하는데, inline으로 스크립트를 작성하거나, src 속성에 자바스크립트의 위치를 지정해서 외부 스크립트를 불러올 수 있다. 이 포스트에서는 HTML파일에 외부 스크립트를 불러온 경우 HTML에서 일어나는 일을 순차적으로 이해하고, <script>의 속성인 async, defer 를 비교,정리해보았다. 먼저 HTML은 <scri... DeferparsingasyncJavaScriptDefer 스크립트의 실행 시점을 조절하는 법 (async vs defer) 위 코드처럼 head 안에 script를 포함하게 될 경우, 브라우저가 한줄씩 html을 parsing한다. 그러다가 script src = "main.js"를 만나게 되면 잠시 parsing을 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행후 다시 html parsing을 시작한다. 🤨 만약 인터넷이 엄청나게 느리거나, JavaScript 코드가 길어서 다운이 오래걸릴 경우 사용자... DeferJavaScriptasync자바스크립트Defer
[Javascript] script async 와 defer의 차이점 사용자가 HTML파일을 다운로드 받았을 때 브라우저는 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환한다. HTML을 파싱하다가 <script>...</script> 태그를 만나면 HTML 파싱을 잠시 멈추고 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. <script src="..."></script>를 만났을 때 외부에서 스크립트를 다운받고 실행한 후에 남은 페이지... asyncDeferJavaScriptscriptDefer [WEB] 스크립트를 비동기로 불러오는 두 가지 방법 - async / defer 요즘 프론트엔드 환경에서는 하나의 entry point만 두고 나머지 모듈은 전부 import/export한 다음 번들링하는 것이 익숙해진지 오래다. 심지어 entry point 파일 하나 조차도 create-react-app 같은 툴들이 대신 생성해주거나 초기 세팅 때만 심어두면 더이상 건드릴 일이 잘 없기 때문에 <script>를 어느 위치에 넣어야하는지에 대한 고민을 할 일이 거의 없는... DeferfrontendhtmljsasyncwebDefer TIL.02 async, defer HTML파일에 <script>태그를 이용해 JavaScript를 하는 방법은 4가지가 있다. body태그 안에 script 태그 삽입 async 속성 사용 defer 속성 사용 1.일반적인 script tag 삽입 브라우저가 HTML을 parsing 하다가 script 태그를 만나면 JS파일을 로드하고 실행한다. 그 과정에서 HTML은 parsing을 멈추고 JS파일이 실행된 후 나머지 HT... DeferWeCodeasyncJavaScriptDefer [TIL]script의 defer , async 속성 HTML파일에 script를 포함시킬 때 <script>를 이용하는데, inline으로 스크립트를 작성하거나, src 속성에 자바스크립트의 위치를 지정해서 외부 스크립트를 불러올 수 있다. 이 포스트에서는 HTML파일에 외부 스크립트를 불러온 경우 HTML에서 일어나는 일을 순차적으로 이해하고, <script>의 속성인 async, defer 를 비교,정리해보았다. 먼저 HTML은 <scri... DeferparsingasyncJavaScriptDefer 스크립트의 실행 시점을 조절하는 법 (async vs defer) 위 코드처럼 head 안에 script를 포함하게 될 경우, 브라우저가 한줄씩 html을 parsing한다. 그러다가 script src = "main.js"를 만나게 되면 잠시 parsing을 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행후 다시 html parsing을 시작한다. 🤨 만약 인터넷이 엄청나게 느리거나, JavaScript 코드가 길어서 다운이 오래걸릴 경우 사용자... DeferJavaScriptasync자바스크립트Defer