TIL - 1일차

박춘화·2022년 1월 10일
0

Today I Learn

목록 보기
1/5

DOCTYPE

Document Type
문서의 타입(DTD, Document Type Definition)을 정의할 때 사용한다. 브라우저는 DOCTYPE이 정의되어 있으면 표준(standard) 모드로, 정의되어 있지 않다면 호환(quirks) 모드로 문서를 렌더링한다. 호환 모드는 크로스 브라우징 이슈(브라우저마다 문서를 다르게 렌더링)가 발생할 수 있어 오늘날에는 HTML5 문서임을 명시하여 표준 모드로 문서를 렌더링할 수 있도록 해야한다.

<!DOCTYPE html>
속성CookieLocalStorageSessionStorage
생성 주체클라이언트 및 서버클라이언트클라이언트
만료 시기수동 설정영구적브라우저 탭 종료시
브라우저 세션 전체에서 지속 여부설정 여부에 따라OX
HTTP 요청 전송 여부OXX
용량(도메인 당)4KB5MB5MB
접근성모든 윈도우모든 윈도우같은 탭

script async && defer

  • script: HTML 파싱이 중단되고 스크립트를 불러온다. 스크립트를 불러오면 스크립트가 실행되고, 실행이 끝난 후에 HTML 파싱을 재개한다.
  • script async: HTML 파싱과 병렬적으로 스크립트를 불러온다. 스크립트를 불러오면 HTML 파싱을 잠시 중단시키고 스크립트를 실행한 뒤, HTML 파싱을 재개한다. 다른 페이지의 스크립트들과 독립적인 스크립트에 사용한다.
  • script defer: HTML 파싱과 병렬적으로 스크립트를 불러온다. 단, 스크립트는 HTML 파싱이 끝난 후에 실행된다. <body>의 끝부분에 <script>를 두는 것과 같다. defer 속성을 갖는 스크립트는 document.write를 포함해서는 안된다.

최적화된 웹사이트를 구축할 때 적절한 명세의 일부로, 페이지가 처음 로드되면 HTML과 CSS 파싱이 동시에 일어난다. HTML은 DOM을, CSS는 CSSOM을 만드는데, 이 둘 모두 웹사이트에서 시각적인 부분을 만드는데 필요하므로 first meaningful paint를 가능하게 한다. 문서 최하단에 스타일시트를 불러오는 것은 점진적 렌더링을 방해하므로 일부 브라우저들은 요소의 리플로우/리페인트를 막기 위해 문서 최하단의 스타일시트에 의한 렌더링을 차단한다.

JS <script> 태그를 </body> 태그 직전에 위치시키는 이유

<script>는 다운로드 및 실행되는 동안 HTML 파싱을 차단한다. 그러므로 스크립트를 문서 최하단에 두면 HTML의 파싱이 끝난 후에 스크립트를 불러오므로 사용자에게 먼저 웹페이지를 보여줄 수 있다. 또한, DOM 요소를 조작하는 코드가 오류를 발생시키지 않는다.

스크립트에 document.write를 사용하지 않을 것을 권장하며, <head><script>를 넣어야할 경우 defer 속성을 사용하면 된다.

CSR(Client-Side Rendering) vs SSR(Server-Side Rendering)

Client-Side Rendering

브라우저가 HTML과 JS 파일을 요청하고, 로드가 완료되면 JS의 코드가 사용자와 상호작용에 따라 페이지를 동적으로 렌더링하는 방식이다.

주로 SPA(Single Page Application)에서 사용하는 방식으로 페이지가 JS에 의해 빠르게 렌더링되어 사용자 경험(UX)에 좋으며, 서버에 요청하는 횟수가 적어 서버의 부담이 덜하다.

처음에 JS 파일을 모두 로드해야하기 때문에 첫 로딩이 오래 걸리며, 검색 엔진 최적화(Search Engine Optimization)가 잘 안된다는 단점이 있다. (SSR에 비해 SEO가 안좋다는 얘기지 SEO가 안된다는 얘기가 아니다! CSR도 SEO가 된다! 또한, 일부 검색 엔진들은 JS 크롤링을 지원하기도 한다.)

Server-Side Rendering

브라우저가 페이지를 요청할 때마다 해당 페이지와 관련된 정적 파일들(HTML, CSS, JS) 및 데이터를 함께 요청하여 페이지를 렌더링하는 방식이다.

주로 MPA(Multi Page Application)에서 사용하는 방식으로 요청한 페이지에 필요한 자원들만 불러오므로 초기 로딩 속도가 빠르고, JS에 의한 렌더링이 아니기 때문에 SEO에 좋다.

하지만 페이지를 이동할 때마다 화면이 새로고침 되기 때문에 사용자 경험 측면에서 좋지 않으며, CSR에 비해 서버에 요청을 자주 보내야 한다.

프로그레시브 렌더링

CSR의 장점과 SSR의 장점을 동시에!

프로그레시브 렌더링이란 중요한 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술이다.

  • 이미지 지연 로딩: 이미지를 한꺼번에 불러오지 않고, Javascript를 사용하여 이미지가 보일 때까지 스크롤이 움직인 뒤에 이미지를 불러온다.
  • 보이는 콘텐츠의 우선순위 설정: 브라우저에서 렌더링될 때 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트만 포함하면 deferred 스크립트를 사용하거나 DOMContentLoaded/load 이벤트를 사용하여 다른 리소스와 내용을 로드할 수 있다.

출처

profile
함께 성장하는 개발자

0개의 댓글