asyn 1
[asyn vs defer] HTML์—์„œ JavaScript ํŒŒ์ผ ํฌํ•จํ•˜๊ธฐ

๐Ÿคท๐Ÿป‍โ™€๏ธ JavaScript ํŒŒ์ผ์„ ์–ด๋–ป๊ฒŒ ํฌํ•จํ•˜๋Š” ๊ฒƒ์ด ๋” ํšจ์œจ์ ์ผ๊นŒ? HTML ๋ฌธ์„œ์˜ head ์•ˆ์—์„œ js ํŒŒ์ผ์„ ํฌํ•จ์‹œํ‚ฌ ๋•Œ asyn ๋˜๋Š” defer ํ‚ค์›Œ๋“œ์™€ ํ•จ๊ป˜ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. asyn์™€ defer ๊ฐ ์˜๋ฏธ์™€ ์ด ๋‘˜์˜ ์ฐจ์ด์ ์„ ์•Œ์•„๋ณด๊ณ , ์–ด๋Š ๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ํšจ์œจ์ ์ผ์ง€ ์•Œ์•„ ๋ด…์‹œ๋‹ค. ๐Ÿ’ก asyn ๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑ(parsing: ํ•œ ์ค„์”ฉ ๋ถ„์„ํ•˜๋Š” ๊ฒƒ)ํ•˜๋‹ค๊ฐ€ asyn ํ‚ค์›Œ๋“œ๋ฅผ ๋งŒ๋‚˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ(fetch)ํ•˜๋„๋ก ๋ช…๋ นํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  HTML ๋ฌธ์„œ๋ฅผ ์ด์–ด์„œ ํŒŒ์‹ฑํ•˜๋‹ค๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ด ๋‹ค์šด๋กœ๋“œ๋˜๋ฉด HTML ๋ฌธ์„œ ํŒŒ์‹ฑ์„ ๋ฉˆ์ถ”๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ์‹คํ–‰ํ•œ ๋’ค, ๋‹ค์‹œ HTML ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•ฉ๋‹ˆ๋‹ค. asyn ํ‚ค์›Œ๋“œ๋Š” HTML ๋ฌธ์„œ์˜ ํŒŒ์‹ฑ์ด ์™„๋ฃŒ๋˜๊ธฐ ์ „์— ์ž๋ฐ”์Šคํฌ..
JavaScript 2021.03.05
1
๋”๋ณด๊ธฐ
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”