브라우저 렌더링 과정

렌더링 엔진 처리과정

1. 웹 브라우저로 웹페이지를 열면 가장 먼저 Window객체가 생성됩니다. Window 객체는 웹 페이지의 전역 객체로 웹 페이지와 탭마다 생성됩니다.
2. Document 객체가 Window 객체의 프로퍼티로 생성되며 웹 페이지를 해석해서 DOM 트리의 구축을 시도합니다. Document 객체는 readyState 프로퍼티를 가지고 있으며, 이 프로퍼티에는 HTML 문서의 해석 상태를 뜻하는 문자열이 저장됩니다. readyState 프로퍼티의 초깃값은 “loading” 이라는 문자열입니다.
3. HTML 문서는 HTML 구문을 작성 순서에 따라 분석하며 Document객체 요소와 텍스트 노드를 추가해 나갑니다.
4. HTML 문서 안에 script 요소가 있으면 script 요소 안의 코드 또는 외부 파일에 저장된 코드의 구문을 분석합니다. 그 결과 오류가 발생하지 않으면 그 시점에 코드를 실행합니다. 이때 script 요소는 동기적으로 실행됩니다. 즉, script 요소의 구문을 분석해서 실행할 때는 HTML 문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료할 후에는 일시적으로 막혀 있었던 HTML 문서의 구문 분석을 재개합니다.
5. HTML 문서의 모든 내용을 읽은 후에 DOM 트리 구축을 완료하면 document.readyState 프로퍼티 값이 “interactive” 로 바뀝니다.
6. 웹브라우저는 Document객체에 DOM트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킵니다.
7. 이미지 파일 등의 외부 리소스를 읽어 들여야 한다면 이 시점에 읽어 들입니다.
8. 모든 리소스를 읽어 들인 후에는 document.readyState 프로퍼티 값이 “complete”로 바뀝니다.
9. 이 시점부터 다양한 이벤트(사용자 정의 이벤트, 네트워크 이벤트)를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출됩니다.

CSS와 렌더링

1. style요소 안에 작성된 CSS 코드와 link요소로 읽어들인 CSS코드를 CSS파서가 분석합니다. 구문 분석이 끝난 CSS코드는 스타일 규칙으로 만들어 집니다. 여기에서 파서란 구문을 분석하느 소프트웨어를 말합니다.
2. HTML 코드로 만들어진 DOM트리와 스타일 규칙을 바탕으로 렌더 트리라는 또 다른 트리를 만듭니다. 렌더 트리에는 표시해야 하는 요소만 저장되며, 렌더 트리에 저장된 요소에는 스타일 정보를 추가합니다.
3. 렌더 트리가 만들어진 후에는 DOM의 각 노드 위치와 크기를 결정합니다.
4. 마지막으로 DOM의 각 노드를 렌더 트리의 스타일 정보를 바탕으로 그립니다. 앞의 과정은 HTML문서를 다 읽어 들인 후에 실행되지 않고 HTML문서를 읽어 들이는 과정에서 단계적으로 실행됩니다.

async와 defer 속성

HTML5부터 추가된 속성. 이 속성을 사용하면 자바스크립트 코드를 실행할 때 HTML 구문 분석을 막지 않음. <script async src=""></script> <script defer src=""></script>

• async : javascript를 비동기적으로 실행하며, 최대한 빨리 실행함. 여러개의 script 요소에 async를 사용하면, 빨리 읽어들인 코드부터 비동기적으로 실행. 읽어들이는 순서에 의존하는 코드에는 사용X.
• defer : DOM 트리 구축이 끝난 후에 실행. DOMContentLoaded 이벤트의 대안으로 활용.

Strict 모드를 설정하면 바뀌는 점(주요 제약사항)

1. 변수는 모두 선언해야만 한다. 선언되지 않은 변수, 함수, 함수의 인자에 값을 대입하면 ReferenceError가 발생한다.
2. 함수를 직접 호출할때, 함수 안의 this 값이 undefined가 된다. 비 Strict 모드에서는 함수 안의 this 값이 전역 객체의 참조가 된다.
3. with 문은 사용할 수 없다.
4. 함수 정의문에 같은 이름의 인수가 있으면 문법 오류가 발생한다.
5. 객체에 같은 이름의 프로퍼티가 있으면 문법 오류가 발생한다.
6. NaN, Infinity, undefined를 표기하면 TypeError가 발생한다.
7. arguments[i]는 호출되었을 때의 인수 값을 유지한다. 비 Strict 모드에서는 arguments[i]가 인자의 별명이다. 따라서 한쪽을수정하면 다른 쪽도 바뀐다.
8. arguments.callee를 읽을 수 없다. 읽기를 시도하면 TypeError가 발생한다.
9. eval로 실행한 코드는 호출자의 유효 범위 안에 새로운 변수나 함수를 선언할 수 없다.

console 디버깅

• console.log : 변수 값을 표시
• console.dir : 객체의 프로퍼티 목록을 표시
• console.trace() : 실행 중인 함수의 호출 스택을 볼 수 있음.

스타일 가이드

• Google JavaScript Style Guide
  • https://google.github.io/styleguide/jsguide.html
• 프로그램의 스타일을 확인하는 도구
  • https://developers.google.com/closure/utilities/docs/linter_howto
• JavaScript Style Guide - MDN Docs
  • https://developer.mozilla.org/en-US/docs/JavaScript_Tips
• jQuery JavaScript Style Guide
  • https://contribute.jquery.org/style-guide/js/
• Airbnb JavaScript Style Guide
  • https://github.com/tipjs/javascript-style-guide(한국어)
  • https://github.com/airbnb/javascript