① 기본/웹브라우저의 이해 (4) 썸네일형 리스트형 성능 최적화를 위해 고려해야 할 점(feat. 스크립트 태그의 위치는?) 사용하지 않는 CSS를 제거하고, 미디어쿼리를 사용해 CSS를 간단하게 유지하자. 브라우저는 CSSOM이 생성될 때까지 렌더링을 차단합니다. CSS가 없는 페이지는 상대적으로 사용성이 떨어지므로, DOM과 CSSOM이 모두 만들어질 때까지 렌더링을 차단하는 것입니다. 미디어 쿼리나 미디어 유형을 사용해 사용자가 필요한 CSS만 렌더링 되도록하면 성능을 향상시킬 수 있습니다. 불필요한 자바스크립트를 제거하고, 스크립트 태그를 바디를 닫는 태그 앞에 적자. 자바스크립트는 DOM과 CSSOM을 수정할 수 있습니다. 따라서 브라우저는 스크립트가 무엇을 수정할지 모르기 때문에 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어권한을 넘깁니다. 자바스크립트 엔진의 실행이 완료된 후 브라.. 웹브라우저 렌더링 원리 브라우저는 어떻게 렌더링할까? 웹사이트가 어떻게 우리 눈앞에 오는지는 지지난번 포스팅에서 살펴보았습니다. 이번에는 웹브라우저가 서버에서 받은 자원을 어떻게 렌더링해서 우리에게 보여주는지 살펴보겠습니다. 브라우저의 구성 요소 User Interface : 사용자의 눈에 보이고, 사용자가 브라우저를 컨트롤 할 수 있는 인터페이스. 예를 들면, 새로고침 버튼, 주소입력창, 뒤로가기 버튼 등이 있습니다. Browser engine : 사용자 인터페이스와 렌더링엔진 사이의 동작을 컨트롤합니다. 예를 들어, 사용자가 주소창에 URL을 입력하고 엔터를 누르면, 해당 요청을 Redering engine에 전달합니다. Rendering engine : 요청받은 내용을 Networking을 이용해 server에 요청하고,.. 자바스크립트와 브라우저의 관계 동적인 웹사이트를 위한 언어의 탄생 넷스케이프 브라우저는 모자이크 브라우저에 비하면 이미지가 들어가 조금 더 사용자들에게 fancy한 느낌을 주었지만, 여전히 갈증을 느낀 Marc Andereeson은 웹사이트를 더욱 동적으로 만들고자 했다. 이에 프로그래밍 언어를 브라우저에 추가하고자, Brendan Eich를 영입해 sheme script를 변형해 새로운 언어를 만들었다. 짧은 시간안에 Mocha(1994년)라는 언어를 개발하고 추후 LiveScript로 이름을 바꾼다. 넷스케이프 브라우저 안에 LiveSctipt Interpreter 엔진을 탑재해 내놓게 되고, 이로서 개발자들이 LiveScript를 배워 코드를 작성하면 넷스케이프 브라우저가 해석해 DOM을 조작하는 등의 동적 브라우저를 만들 수 .. 웹브라우저란? 웹브라우저란 웹페이지를 보여주는 창문이다. 이 한 문장으로 비개발자에게는 웹브라우저를 간단 명료하게 설명해 줄 수 있을 것 같다. 모든 웹페이지는 브라우저라는 창을 통해서만 볼 수 있고, 크롬·파이어폭스·오페라 등등 은 각기 다른 기능을 가진 창틀에 해당한다. 웹브라우저는 웹페이지를 다운 받아 렌더링해 사용자에게 보여주는 역할을 한다. 프론트엔드 개발자라면, 다양한 회사들이 만들어낸 웹브라우저가 각기 다른 기능을 가진 창틀이라는 점에 주목해야 한다. 현재는 브라우저들이 웹표준을 지키고자 하여 호환성이 많이 좋아졌지만, 왜 저마다 브라우저가 다르게 보이는 지 알고, 클라이언트를 개발해야만 서로 다른 창틀을 이용하는 사람들에게 내 제품을 완성도 있게 보여줄 수 있다. 브라우저가 작동하는 깊은 원리를 배우기에.. 이전 1 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
