<div id="readability-page-1" class="page"><div>
 
 <div id="SE-778c307e-0704-4542-8ea3-ceca22beb324">
 Async 속성​렌더링에 영향을 주지 않기 위해서는 '파싱' 이 끊김없이 계속 진행되어야 한다.이전 포스팅에서 설명했듯이 &lt;script&gt; 태그와 같은 요소들은 파싱에 영향을 준다.​&lt;script&gt; 태그의 async 속성은 파싱과 파일(javascript) 다운로드를 병렬로 진행하도록 도와준다.<ul><li>메인스레드는 계속해서 파싱을 진행한다.</li><li>async 속성을 만나면 브라우저는 해당 script 의 요청을 IO 쓰레드에게 맡긴다.</li></ul>
 </div> <div id="SE-ab465387-9797-4ea7-8c1b-12cbc927b39c">
 &lt;html&gt;
&lt;head&gt;
 &lt;title&gt;script async&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;script src="script-big.js" async&gt;&lt;/script&gt;
 &lt;script src="script-small.js" async&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
 </div> <div id="SE-1abdfb08-702f-4f33-92e1-b1fdbfa27f31">
 위 코드를 보면 script 에 async 속성이 있는걸 볼 수 있다.이 코드를 실행해보면 아래와 같은 순서로 진행된다.​<ul><li>DOMContentLoaded (메인스레드에 의해 멈춤 없이 진행)</li><li>script-small.js (IO 쓰레드에 의해 다운로드되고 메인 쓰레드에 의해 실행됨)</li><li>script-big.js (IO 쓰레드에 의해 다운로드 되고 메인 쓰레드에 의해 실행됨)</li></ul>​
 </div> <div id="SE-0613f694-aac7-482d-a861-73eaba8189e7">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-0613f694-aac7-482d-a861-73eaba8189e7&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDVfMjEx/MDAxNzU5NTkxOTY3NjU4.DvICSiYLbTcXt-G75Ykgr2XYUcerSpktGIy1A4LucTsg.40QE_KJVhfkSVTKBlX5i_3wF6BB6hSV1_1vPjauVQ68g.PNG/image.png&quot;, &quot;originalWidth&quot; : &quot;1920&quot;, &quot;originalHeight&quot; : &quot;1080&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot; }">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTEwMDVfMjEx/MDAxNzU5NTkxOTY3NjU4.DvICSiYLbTcXt-G75Ykgr2XYUcerSpktGIy1A4LucTsg.40QE_KJVhfkSVTKBlX5i_3wF6BB6hSV1_1vPjauVQ68g.PNG/image.png?type=w800" data-width="693" data-height="389" alt="">
 </a>
 
 </div>
 <div id="SE-9f003d2e-de63-4778-b5c6-8e522f37ea2c">
 ​여기서 주의깊게 봐야할 부분들은 아래와 같다.<ol><li>async 속성이 선언된 script 들은 동시에 요청이 시작된다. (IO 쓰레드)</li><li>먼저 다운로드가 완료된 script 가 먼저 실행된다. (메인 쓰레드)</li><li>먼저 다운로드된 script 가 먼저 실행되기 때문에 script 간에 의존성이 있으면 안된다.</li></ol> - 실행 순서에 상관이 없는 script 에 사용하기 적합 - 광고나 분석 트래커 등​​​​#async #HTTP완벽가이드 #scriptasync 
 </div> </div></div>

나만의공간。

KIM JUNGHWAN

Async 속성 렌더링에 영향을 주지 않기 위해서는 '파싱' 이 끊김없이 계속 진행되어야 한다. 이전 포스팅에서 설명했듯이  태그와 같은 요소들은 파싱에 영향을 준다.  태그의 async 속성은 파싱과 파일(javascript) 다운로드를 병렬로 진행하도록 도와준다. 메인스레드는 계속해서 파싱을 진행한다. async 속성을 만나면 브라우저는 해당 script 의 요청을 IO 쓰레드에게 맡긴다. 위 코드를 보면 script 에 async 속성이 있는걸 볼 수 있다. 이 코드를 실행해보면 아래와 같은 순서로 진행된다. DOMContentLoaded (메인스레드에 의해 멈춤 없이 진행) script-small.js (IO 쓰레드에 의해 다운로드되고 메.......

[HTTP] script 태그의 Async 속성

댓글