JS 스터디 1주차. 자바스크립트란? + 브라우저 동작 원리

자몽·2022년 4월 7일
1

JS-study

목록 보기
1/1

자바스크립트란?

HTML, CSS, JavaScript

html에서는 틀을 만들었다면,
css에서는 해당 element의 class나 id를 기반으로 디자인을 하고,
js에서는 해당 element의 동작을 담당한다.

JavaScript란?

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어

JavaScript의 역사

  1. 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 프로그래밍 언어가 필요해짐.

  2. "모카"라는 이름으로 프로그래밍 언어가 개발됨

  3. "자바스크립트"로 이름을 바꿈.(놀랍게도 자바의 인기에 편승하기 위해 자바스크립트라는 이름으로 바꾼 것이지, 자바스크립트와 자바 사이의 연관성은 크게 없다)

  4. 자바스크립트와 비슷한 시기에 비슷한 기능을 하는 "JScript"가 출시됨

  5. 자바스크립트와 JScript가 각각 다른 기능들을 추가하면서 크로스 브라우징 이슈가 발생

  6. 이를 해결하기 위해 표준화된 자바스크립트(ECMAScript)가 탄생

JavaScript의 특징

자바스크립트는 객체 기반의 스크립트 언어

스크립트 : 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어

자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어

동적 언어: 자료형이 실행 시에 결정됨(ex python, JavaScript)
인터프리터 언어: 소스코드를 한 줄씩 읽어가며 명령을 바로 처리하는 언어(ex python, JavaScript)

자바스크립트는 객체 지향 프로그래밍이자 함수형 프로그래밍 언어.

객체지향 프로그래밍: 객체가 중심이 되어 프로그래밍됨
함수형 프로그래밍: 함수가 중심이 되어 프로그래밍됨

브라우저 동작 원리

1. HTML 문서 파싱 및 DOM 생성

파싱: 번역, 해석

2. CSS 파싱 및 CSSOM 생성

CSS를 파싱할 때는 HTMl 파싱을 중단(위에서부터 아래로 코드가 읽히기 때문)

3. 렌더 트리 생성

4. 렌더 트리를 기반으로 layout, paint 과정을 거쳐 실제 화면에 나타냄


+ JS를 만나면 HTML 파싱을 중단하고 JS를 읽는다.

+ 요소들을 수정할 경우, 리패인트, 리플로우가 발생한다.

리패인트: 패인팅 다시
리플로우: 레이아웃 계산 다시

Q

  1. css, js를 만나면 html 파싱을 중단하는 이유는?
  2. js가 만들어진 이유는?
profile
꾸준하게 공부하기

0개의 댓글