클라이언트가 서버로부터 웹페이지를 받아와서, 브라우저에 표기되기 까지 어떤 렌더링 순서를 가지는지 알아본다. 이는 성능을 보장을 위해 필수적이다. Rendering path 우선 클라이언트가 서버로부터 데이터를 받아와서 브라우저에 표기하는 전체적인 순서는 다음과 같다. request...
Continue reading...IT
Render Tree (DOM + CSSOM)
브라우저에서 html 요소를 변환하여 Document Object Model을 만들게 되면, 우리가 정의한 CSS를 병합해서 CSSOM(CSS Object Model)을 만들게 된다. 즉, DOM이 만들어진 이후, html 파일안에 들어있는 스타일 (임베디드형, 인라인형, 브라우저상에서 기본적으로 가지고...
Continue reading...Google Style Overflow Scrolling Carousel
g-scrolling-carousel is a jQuery plugin that displays a large group of items in a horizontal scrolling carousel/swiper 특히, 내부 컨텐츠 개수를 알 수 없을 경우 유용하게 사용할 수 있다. Features: Automatically...
Continue reading...DOM Tree(Document Object Model)
DOM (Document Object Model) 간단한 웹페이지를 만들면, 브라우저에서는 body태그, section 태그 등 각각의 태그들을 분석해서 이것을 노드로 변환한다.즉, 브라우저가 가지고 있는 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환 시킨다. 당연히 오브젝트...
Continue reading...Window load 분석
브라우저는 웹페이지를 읽어올때 html파일을 먼저 읽은 다음에, 그에 관련된 이미지나 폰트, 필요한 리소스를 함께 다운로드 한다. 그리고 자바스크립트 파일이 있다면 그 자바스크립트 파일도 다운로드 받는데, 이 부분은 블로그 자바스크립트 defer async...
Continue reading...Browser 구조 분석 (Window Global Object)
브라우저에서 웹 페이지를 열게 되면, ‘Window’라는 전체적인 오브젝트가 존재하고, Window는 페이지 뿐만 아니라 브라우저에서 현재 열려있는 전체적인 창을 의미한다. Window 안에 페이지가 표기되는 부분이 바로 Document 오브젝트이다. 즉, Document는 HTML에 작성한...
Continue reading...비동기 처리를 위한 Promise & async & await
async와 await는 promise를 조금 더 간결하고 간편하게, 동기적으로 실행되는 것 처럼 보이게 만들어줌 즉, promise 에서 사용하는 then을 무수히 남발할 필요가 없음 새로운 것이 추가된 것이 아닌, 기존에 존재하던 promise위에 조금 더...
Continue reading...비동기 프로그래밍 Callback 지옥 / Promise로 변환
Callback 함수란? 함수를 하나의 파라미터 인자로 전달하는데, 바로 실행되는게 아닌, 특정한 시점에 호출되는 함수를 말한다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출한다. synchronous vs Asynchronous 자바스크립트는 synchronous (동기적)이다....
Continue reading...