👉 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는 화면이 작은 기기에서 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지 파일을 제공하는 문제를 해결합니다.

🥕 <script>, <script async>, <script defer> 사이의 차이점​

🥕 왜 일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 </body> 직전에 위치시키는 것이 좋은 방법인가요? 다른 예외적인 상황을 알고있나요?​

<head> 안에 <link>를 넣는 이유​

</body> 직전에 <script>를 넣는 이유​

🥕 점진적 렌더링(Progressive Rendering)이 무엇인가요?​