출처 : https://hahahoho5915.tistory.com/28

$().ready(function(){})
DOM이 완전하게 로드가 끝났을 때 실행할 함수 정의

cf. ready vs onload

$(document).ready(function(){
  alert('hi - ready');
})

$(window).onload(function(){
  alert('hi - load');
})

호출 시점의 차이 : 한 페이지에 두 함수가 다 있다면 실행 우선순위 ready -> onload순으로 실행

.ready() 호출 시점 : DOM Tree 생성 완료 후
.onload() 호출 시점 : 모든 페이지 구성요소 페인팅 완료 후 (모든 과정이 완료되어 웹 페이지가 다 구성된 후 호출)

cf. 웹브라우저의 html 문서 렌더링 과정

1. 불러오기
   http 모듈 또는 파일 시스템으로 전달받은 리소스 스트림을 읽는 과정
   로더가 이 역할을 한다

• 단순히 읽는 것이 아니라
• 이미 데이터를 읽었는지도 확인
• 팝업창을 열지말지
• 파일을 다운로드 받을지 결정

2. 파싱

• DOM 트리를 만드는 과정
• 웹 엔진이 가지고 있는 html/xml 파서가 문서를 파싱해서 DOM Tree를 만든다
• DOM Tree: 내용을 저장하는 트리로 js에서 접근하는 DOM 객체를 쓸 때 이용

3. 렌더링 트리 만들기

• DOM Tree와는 별도로 그리기 위한 트리
• 그릴 때 필요 없는 head, title, body 태그 등이 없음

• display:none 처럼 DOM에는 있지만 화면에서는 걸러내야할 것들이 걸러내진 트리

4. CSS 결정
   CSS는 선택자에 따라 적용되는 태그가 다르다
   모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다

5. 레이아웃
   객체들에게 위치와 크기를 정해주는 과정

6. 그리기
   렌더링 트리를 탐색하면서 페이지를 그려나간다

var $container = $('#container')
var $title, $containerTitle, $articles;

HLS

HTTP Live Streaming

• 가장 널리 사용되는 비디오 스트리밍 프로토콜

• HTTP 라이브 스트리밍이라고 불리지만 주문형 스트리밍이자 동시에 라이브 스트리밍

• 비디오 파일을 다운로드할 수 있는 http 파일 조각으로 나누고 http 프로토콜을 이용해 전송

• 클라이언트 장치는 이러한 http 파일을 로드한 후 비디오로 재생

• 장점
  1) 모든 인터넷 연결 장치가 HTTP를 지원하기 때문에 전용 서버가 필요한 스트리밍 프로토콜보다 간단하게 실행할 수 있다.
  2) HLS 스트리밍은 재생에 지장을 주지 않고 네트워크 상태에 따라 비디오 품질을 높이거나 낮출 수 있다

• 단점
  : 사용자가 비디오를 보는 중에 품질이 나빠지거나 좋아질 수 있다