본문 바로가기

📋Technical interview(Front)10

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

Get과 Post의 차이 GET GET method는 클라이언트에서 서버로 어떠한 정보를 요청하기 위해 사용되는 메서드입니다. 데이터를 읽거나, 검색할 때에 사용되는 method라고 할 수 있다. GET은 요청을 전송할 때 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링(QueryString)이라고 부릅니다. GET 방식은 데이터를 요청할 때 이 요청하는 데이터가 HTTP Request Message의 Header 부분의 url에 담겨서 전송된다. 그래서 요청시 url 상에 ? 뒤에 데이터가 붙어서 request를 보내는 것이다. 요청 파라미터가 여러 개인 경우 &로 연결한다. https://localhost:3000/category?postId=3&page=3 그리고 GET 요청은 오로지 데이터를 읽을 .. 2022. 12. 16.

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

브라우저 저장소 차이점 ( Localstorage, SessionStorage, Cookie ) 🔔 브라우저 저장소로 Cookie와 Web Storage가 있다 HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. ( Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. ) 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. WebStorage의 특징 - 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 된다. - WebStorage는 용량의 제한이 없다. - 만료기간의 설정이 없다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것이다. -.. 2022. 11. 16.

이전 1 2 3 다음

티스토리툴바