π HTML
π₯ <script>
, <script async>
, <script defer>
μ¬μ΄μ μ°¨μ΄μ β
<script>
λ HTML νμ±μ΄ μ€λ¨λκ³ , μ€ν¬λ¦½νΈλ₯Ό μ¦μ κ°μ Έμ€κ³ μ€νλλ©°, μ€ν¬λ¦½νΈ μ€ν ν HTML νμ±μ΄ λ€μ μμλ©λλ€.
<script async>
λ HTML νμ±κ³Ό λ³λ ¬μ μΌλ‘ κ°μ Έμ€λ©°, μ¬μ© κ°λ₯ν λ μ¦μ μ€νλ©λλ€.(μλ§ HTML νμ±μ΄ λλκΈ° μ ) μ€ν¬λ¦½νΈκ° νμ΄μ§μ λ€λ₯Έ μ€ν¬λ¦½νΈλ€κ³Ό λ
립μ μΈ κ²½μ° async
λ₯Ό μ¬μ©ν©λλ€. (ex. analytics)
<script defer>
λ HTML νμ±κ³Ό λ³λ ¬μ μΌλ‘ κ°μ Έμ€μ§λ§, νμ΄μ§ νμ±μ΄ λλλ©΄ μ€νλ©λλ€. μ΄κ²μ΄ μ¬λ¬κ° μλ κ²½μ°, κ° μ€ν¬λ¦½νΈλ νμ΄μ§μ λ±μ₯ν μμλλ‘ μ€νλ©λλ€. μ€ν¬λ¦½νΈκ° μμ ν νμ±λ DOMμ μμ‘΄λλ κ²½μ° defer
μμ±μ μ€ν¬λ¦½νΈλ₯Ό μ€ννκΈ° μ μ HTMLμ΄ μμ ν νμ±λλλ‘ νλλ° μ μ©ν©λλ€. <body>
μ λλΆλΆμ μΌλ° <script>
λ₯Ό λλ κ²κ³Ό λ³ μ°¨μ΄κ° μμ΅λλ€. defer
μ€ν¬λ¦½νΈλ document.write
λ₯Ό ν¬ν¨νλ©΄ μλ©λλ€.
μ£Όμν μ¬νμ src
μμ±μ΄ μλ μ€ν¬λ¦½νΈ νκ·Έλ async
μ defer
μμ±μ΄ 무μλ©λλ€.
π₯ μ μΌλ°μ μΌλ‘ CSS <link>
νκ·Έλ₯Ό <head></head>
νκ·Έ μ¬μ΄μ μμΉμν€κ³ , JS <script>
νκ·Έλ₯Ό </body>
μ§μ μ μμΉμν€λ κ²μ΄ μ’μ λ°©λ²μΈκ°μ? λ€λ₯Έ μμΈμ μΈ μν©μ μκ³ μλμ?β
<head>
μμ <link>
λ₯Ό λ£λ μ΄μ β
λΈλΌμ°μ λ λλ§μ λν λΆλΆμΈλ° νμ΄μ§κ° μ²μ λ‘λλλ©΄ HTMLκ³Ό CSSκ° λμμ νμ±λ©λλ€. HTMLμ DOMμ λ§λ€κ³ CSSλ CSSOMμ λ§λλλ€. λ κ°μ§ λͺ¨λ μΉμ¬μ΄νΈμμ μκ°μ μΈ λΆλΆμ λ§λλλ° νμνλ―λ‘ λΉ λ₯Έ first meaning paintλ₯Ό κ°λ₯νκ² ν©λλ€. μ΄ μ μ§μ λ λλ§μ μ¬μ΄νΈμ μ±λ₯ μ μμμ μΈ‘μ λλ μ¬μ΄νΈ μ΅μ νμ λ²μ£Όμ λλ€. κ·Έλμ λ¬Έμ μ΅νλ¨μ μ€νμΌμνΈλ₯Ό λλ κ²μ λ§μ λΈλΌμ°μ μμ μ μ§μ λ λλ§μ κΈμ§νκ² λλ κ²μ λλ€. λͺλͺ λΈλΌμ°μ λ μ€νμΌμ΄ λ³κ²½λλ©΄ νμ΄μ§μ μμλ₯Ό λ€μ 그리λ κ²μ νΌνκΈ° μν΄ λ λλ§μ μ°¨λ¨ν©λλ€. κ·Έλ κ²λλ©΄ μ¬μ©μλ λΉ νμ νμ΄μ§λ₯Ό 보κ²λ©λλ€.
</body>
μ§μ μ <script>
λ₯Ό λ£λ μ΄μ β
<script>
λ λ€μ΄λ‘λλκ³ μ€νλλ λμ HTML νμ±μ μ°¨λ¨ν©λλ€. μ€ν¬λ¦½νΈλ₯Ό 맨 μλμ λλ©΄ HTMLμ λ¨Όμ νμ±νλ©΄μ μ¬μ©μμκ² νμν μ μμ΅λλ€. <script>
λ₯Ό μ λμͺ½μ λλ©΄, λΈλΌμ°μ μ 체 λ¬Έμκ° νμ±λ λκΉμ§ μ€ν¬λ¦½νΈ λ€μ΄λ‘λλ₯Ό μμν μ μλ€λ κ²μ μλ―Έν©λλ€. μ΄λ κ²νλ©΄ DOM μμλ₯Ό μ‘°μν΄μΌνλ μ½λκ° μ€λ₯λ₯Ό λ°μμν€μ§ μκ³ μ 체 μ€ν¬λ¦½νΈλ₯Ό μ€μ§μν€μ§ μν‘λλ€. <head>
μ <script>
λ₯Ό λ£μ΄μΌνλ κ²½μ°, defer
μμ±μ μ¬μ©νλ©΄λ©λλ€. HTMLμ νμ±ν νμ μ€ν¬λ¦½νΈλ₯Ό λ€μ΄λ‘λνκ³ μ€ννλ κ²κ³Ό κ°μ ν¨κ³Όκ° μμ΅λλ€.
π₯ μ μ§μ λ λλ§(Progressive Rendering)μ΄ λ¬΄μμΈκ°μ?β
μ½ν μΈ λ₯Ό κ°λ₯νν λΉ λ₯΄κ² νμνκΈ° μν΄ μΉ νμ΄μ§μ μ±λ₯μ ν₯μμν€λ λ° μ¬μ©λλ κΈ°μ μ λλ€.
- μ΄λ―Έμ§ μ§μ°λ‘λ©
- 보μ΄λ μ½ν
μΈ μ°μ μμ μ€μ νμ¬ κ°λ₯ν ν 빨리 νμνκΈ° μν΄ μ¬μ©μ λΈλΌμ°μ μμ λ λλ§λ νμ΄μ§μ νμν μ΅μνμ CSS/μ½ν
μΈ /μ€ν¬λ¦½νΈλ§ ν¬ν¨νλ©΄
deferred
μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νκ±°λDOMContentLoaded
/load
μ΄λ²€νΈλ₯Ό μ¬μ©νμ¬ λ€λ₯Έ 리μμ€μ λ΄μ©μ λ‘λν μ μμ΅λλ€.
μ°Έκ³ : https://zereight.tistory.com/773
π₯ μ΄λ―Έμ§ νκ·Έμ srcset μμ±μ μ¬μ©νλ μ΄μ λ 무μμΈκ°μ? μ΄ μμ±μ 컨ν μΈ λ₯Ό μ€νν λ λΈλΌμ°μ μ νλ‘μΈμ€λ₯Ό μ€λͺ νμΈμ.β
κΈ°κΈ°μ λμ€νλ μ΄ λλΉμ λ°λΌ λ€λ₯Έ μ΄λ―Έμ§λ₯Ό μ¬μ©μμκ² μ 곡νλ €λ κ²½μ° srcset
μμ±μ μ¬μ©ν©λλ€. ν΄λΌμ΄μΈνΈμ ν΄μλμ λ°λΌ λΈλΌμ°μ μ small
, medium
, large
κ·Έλν½μ νμνλλ‘ μ§μν©λλ€.
srcset
λ νλ©΄μ΄ μμ κΈ°κΈ°μμ λ°μ€ν¬ν λμ€νλ μ΄μ²λΌ ν° μ΄λ―Έμ§κ° νμνμ§ μκΈ° λλ¬Έμ μμ μ΄λ―Έμ§ νμΌμ μ 곡νλ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€.