반응형 Javascript11 🏸 브라우저 렌더링 과정 🏈 브라우저 렌더링 순서 모든 브라우저는 화면에 보여주는 과정(렌더링)의 순서가 존재한다. 렌더링을 얼마나 빠르게 하느냐에 따라 사용자의 화면 머무는 시간이 길어질 수 있다. 그리하여 "모던 자바스크립트 deep dive" 기반으로 스스로 순서를 정리해보았다. 브라우저 순서를 정리하면 아래와 같다 서버로부터 html,css,js,image 등 자원을 요청한다. 렌더링 엔진이 HTML,CSS 를 각각 DOM,CSSOM을 생성한다. DOM,CSSOM을 결합하여 렌더트리를 생성하고, 레이아웃 => 페인팅을 거쳐 화면에 보여진다. 3-1. 리레이아웃과 리페인트가 이루어지는 경우 성능에 좋지 않을 수 있다. : 자바스크립트에 의한 노드 추가/삭제 : 브라우저 창의 리사이징에 의한 뷰포트 변경 : HTML 요소의 .. 2023. 4. 12. 👏 렉시컬 스코프 & 클로저 🤲 렉시컬 스코프 자바스크립트 엔지는 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라서 상위스코프가 정해진다. 이것을 렉시컬 스코프라고 한다 => 이것을 말만 하면 이해가 할 수 없다. 예제를 통해서 알아보자 const x = 1; function foo() { const x = 10; console.log(x); bar(); //1 } function bar() { console.log(x); } foo(); // 10 bar(); // 1 foo 함수 안에서 bar 함수를 호출하였지만, 결과는 1이 나온다. 왜냐하면 bar함수가 정의되는 곳이 foo함수 안이 아니기 때문에 foo함수의 상위 스코프는 전역함수이고 전역함수의 x=1이다. const x = 1; function outer.. 2023. 3. 7. 감시자(Observer) 패턴 🤠 감시자(Observer) 패턴을 갑자기 적는이유? Angular를 하다보면 Rxjs를 사용하는 방법이 아주 많다. 그런데 Rxjs를 알아보다보면 Observer패턴을 이용했다고 하여 이번에 새롭게 공부해 보았다. 💈감시자(Observer) 패턴이란? "A" 라는 객체가 "B"라는 객체의 메소드를 직접 호출하는 것이 아닌, "B"객체의 메소드를 감시하는 패턴이다. 🤐 필요한 객체들 publish 객체 : 발행자의 기능을 가지고 있는 객체 paper 객체 : 발행자의 기능을 상속(?)받는 객체 maxGun객체 : paper객체의 구독자 🤩 publish 객체 var publisher = { //구독자를 관리하는 배열 subscribers: { any: []// '이벤트 타입 : 구독자의 배열' }, //.. 2022. 1. 23. 이전 1 2 3 다음 반응형
