본문 바로가기

자바스크립트13

HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유 먼저!! 브라우저 렌더링과정 서버로부터 HTML과 CSS 자원을 받아와서 DOM Tree와 SSOM Tree를 생성한다. DOM Tree와 SSOM Tree로 브라우저에 레이아웃을 잡아줄 렌더트리를 생성한다. 렌더트리 노드 있는 속성이나 스타일을 기반으로 브라우저에 크기, 위치, 크기에 맞게 레이아웃을 잡는다. 브라우저에 페인트 한다. 이유 #1 브라우저 렌더링 과정 중에 태그를 만나게 되면 진행중인 HTML파싱을 중지하고 js엔진으로 제어 권한을 넘긴다. JS파싱과 실행이 종료되면 렌더링 엔진으로 다시 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작한다. 그렇기에 사용자는 속도가 느려진 것 처럼 느껴지고 효율성이 떨어진다. 이러한 원리 때문에 스크립트 소스는 body 태그 끝에 두는 것을 권장한다. 자.. 2023. 1. 9.

[JS]이벤트 버블링과 캡처링(Bubbling & Capturing) 👉🏻JavaScript에는 click , keypress , focus , submit , scroll , change 와 같은 다양한 이벤트들이 있다. 만약 부모 요소와 자식 요소에 둘 다 같은 종류의 이벤트가 할당 되어있을 때, 이벤트를 동작시키면 어떤 이벤트가 먼저 실행될까? 이벤트 버블링 ( Event Bubbling ) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 위와 같이 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시키는 특성을 가지고 있다. 이와 같은 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링(Event Bubbling)이라고 한다... 2022. 11. 27.

[JavaScript] 스코프 체인이란? 스코프란? 변수(식별자)의 유효 범위를 뜻한다. 스코프(Scope)는 변수가 어디서, 어떻게 선언되었는지에 따라 그 변수의 유효한 범위가 결정되는 규칙이기도 하며, 자바스크립트에서는 이 규칙에 따라 참조의 대상이 되는 변수를 탐색해나간다. (→ 그것을 Scope Chain) 🔗스코프체인? 자바스 크립트 ES2015기준으로 확바뀜 예전엔 함수가 기준이였는데 요즘엔 블록이 기준이다( 함수도 다행히 블록을 가지고 있다 ) 스코프 체인(Scope Chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것 을 말한다. 유효 범위를 나타내는 스코프가 scope 프로퍼티로 각 함수 객체 내에서 연결리스트.. 2022. 11. 9.

[JavaScript] Scope란? 👁‍🗨자바스크립트는 함수 레벨 스코프(function-level scope)를 따른다. 함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다. 👉🏻단, ECMAScript 6에서 도입된 let keyword를 사용하면 블록 레벨 스코프를 사용할 수 있다. 👨🏻‍💻 Scope란? Scope는 직역하면 "범위"라는 뜻이다. JavaScript 에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다. 식별자(변수)를 찾기위한 규칙이라고도 한다. 식별자의 유효 범위 ⇒ 모든 식별자는 자신이 선언된 위치에 의하여 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨. var x = 'global'; f.. 2022. 11. 5.

이전 1 2 3 4 다음

티스토리툴바