Document Type
문서의 타입(DTD, Document Type Definition)을 정의할 때 사용한다. 브라우저는 DOCTYPE이 정의되어 있으면 표준(standard) 모드로, 정의되어 있지 않다면 호환(quirks) 모드로 문서를 렌더링한다. 호환 모드는 크로스 브라우징 이슈(브라우저마다 문서를 다르게 렌더링)가 발생할 수 있어 오늘날에는 HTML5 문서임을 명시하여 표준 모드로 문서를 렌더링할 수 있도록 해야한다.
<!DOCTYPE html>
속성 | Cookie | LocalStorage | SessionStorage |
---|---|---|---|
생성 주체 | 클라이언트 및 서버 | 클라이언트 | 클라이언트 |
만료 시기 | 수동 설정 | 영구적 | 브라우저 탭 종료시 |
브라우저 세션 전체에서 지속 여부 | 설정 여부에 따라 | O | X |
HTTP 요청 전송 여부 | O | X | X |
용량(도메인 당) | 4KB | 5MB | 5MB |
접근성 | 모든 윈도우 | 모든 윈도우 | 같은 탭 |
async
&& defer
<body>
의 끝부분에 <script>
를 두는 것과 같다. defer
속성을 갖는 스크립트는 document.write
를 포함해서는 안된다.<link>
태그를 <head></head>
태그 사이에 위치시키는 이유최적화된 웹사이트를 구축할 때 적절한 명세의 일부로, 페이지가 처음 로드되면 HTML과 CSS 파싱이 동시에 일어난다. HTML은 DOM을, CSS는 CSSOM을 만드는데, 이 둘 모두 웹사이트에서 시각적인 부분을 만드는데 필요하므로 first meaningful paint
를 가능하게 한다. 문서 최하단에 스타일시트를 불러오는 것은 점진적 렌더링을 방해하므로 일부 브라우저들은 요소의 리플로우/리페인트를 막기 위해 문서 최하단의 스타일시트에 의한 렌더링을 차단한다.
<script>
태그를 </body>
태그 직전에 위치시키는 이유<script>
는 다운로드 및 실행되는 동안 HTML 파싱을 차단한다. 그러므로 스크립트를 문서 최하단에 두면 HTML의 파싱이 끝난 후에 스크립트를 불러오므로 사용자에게 먼저 웹페이지를 보여줄 수 있다. 또한, DOM 요소를 조작하는 코드가 오류를 발생시키지 않는다.
스크립트에 document.write
를 사용하지 않을 것을 권장하며, <head>
에 <script>
를 넣어야할 경우 defer
속성을 사용하면 된다.
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의 장점을 동시에!
프로그레시브 렌더링이란 중요한 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술이다.
deferred
스크립트를 사용하거나 DOMContentLoaded
/load
이벤트를 사용하여 다른 리소스와 내용을 로드할 수 있다.