반응형 자바스크립트3 [JavaScript/ React] 브라우저의 동작원리 브라우저의 랜더링 과정 1. 브라우저의 랜더 엔진이 HTML을 파싱을 통해 DOM TREE를 생성한다. 2. CSS파일과 inline로 작성된 스타일을 파싱해서 CSS DOM을 구성한다. CSS는 우선 순위가 존재한다. 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 3. 위에서 만들어진 DOM TREE와 CSS DOM을 결합하여 하나의 RENDER TREE가 만들어진다. 여기서 RENDER TREE는 문서의 시각적인 구조를 나타내고 있다. 4. 뷰 포트 내에서 생성된 RENDER TREE의 각 NODE가 어느 위치에 있어야 할지 결정이 된다... 2023. 7. 6. [JS/JavaScript] 자바스크립트 콜백큐 (Callback Queue)란? 지난번 자바스크립트의 동작원리를 설명할때 "CallBack Queue"를 잠시 설명했습니다. 간단하게 설명하면 WebAPIs에 있는 비동기처리를 Stack에 보내기전 머무르는 영역입니다. 우리가 알고있는 큐는 FIFO구조로 First in First out으로 먼저들어간게 먼저 나오는 구조입니다. 일상 생활에서 일차선 터널이라고 생각하면 쉽게 생각할수 있습니다. 하지만, 지난번 설명한 CallBack Queue는 FIFO구조가 아닙니다. 사실 CallBack Queue는 3가지로 나누어 관리 되고 있습니다. 1. Task Queue(Event Queue) 2. Micro Task Queue(Job Queue) 3. Animation Frame 여기에도 우선순위가 있는데, 크롬 기준 다음과 같은 우선 순위.. 2023. 5. 8. [JS/JavaScript] 자바스크립트(js) 동작원리 들어가기 앞서 흔히 JS, 자바스크립트라고 불리는 것은 동기일까요? 비동기일까요? 자바스크립트는 인터프리터언어입니다. 즉, 한줄씩 읽어가며 실행하는 프로그램이라고 생각하시면됩니다. 비동기라고 생각되시는 분들은 위에 2줄을 천천히 다시 읽어봐주세요 그럼에도 "비동기도 되는데?" 라고 생각 되시는분들은 아래글에서 같이 확인해보시죠! 가장 많이 사용하는 하나의 예제를 사용하도록 하겠습니다. function A(){ B() printf("A 출력") } function B(){ C() printf("B 출력") } function C(){ printf("C 출력") } A(); 위 코드를 실행하면 다음과 같은 출력이 나타납니다. C 출력 B 출력 A 출력 분명 함수는 반대로 작성되어있는데 실행은 그 반대로 작동.. 2023. 5. 8. 이전 1 다음 반응형