IT/CS

[CS] 인터넷은 어떻게 작동하는가

인터넷은 네트워크(서로 연결된 컴퓨터 또는 기타 장치 그룹)의 네트워크이다. 인터넷 작동 방식: 개요 표준화된 프로토콜을 사용하여 장치와 컴퓨터 시스템을 함께 연결하여 작동한다. 이러한 프로토콜은 장치 간에 정보를 교환하는 방법을 정의하고 데이터가 안정적이고 안전하게 전송되도록 한다. 인터넷의 핵심은 상호 연결된 라우터의 글로벌 네트워크로, 서로 다른 장치와 시스템 간의 트래픽 전달을 담당한다. 인터넷을 통해 데이터를 보낼 때 장치에서 라우터로 전송되는 작은 패킷으로 나뉜다. 라우터는 패킷을 검사하고 대상을 향한 경로의 다음 라우터로 전달한다. 이 프로세스는 패킷이 최종 목적지에 도달할 때까지 계속된다. 패킷이 올바르게 송수신 되도록 하기 위해 인터넷은 인터넷 프로토콜(IP) 및 전송 제어 프로토콜(TC..

[CS] 브라우저 렌더링 과정 :: CSS 최적화

📢CSS 성능 최적화 CSS는 렌더링을 막는다. CSS 존재만으로도 CSS가 파싱되기 전까지 브라우저는 렌더링이 지연된다. CSS는 HTML 파싱도 막을 수 있다. 브라우저가 CSS가 파싱되기 전까지 콘텐츠를 보여주지 않아도 HTML의 로딩된 부분만을 먼저 보여줄 수 있다. 그러나 스크립트의 경우 aync defer 이 없다면 파싱을 막게 된다. 브라우저가 CSS관련 작업을 진행중이라면, 이 작업이 완료될 때 까지 기다렸다가 스크립트를 실행한다. 스크립트가 실행되기 전까지 문서 파싱을 할 수 없기 때문에, CSS는 더이상 렌더링은 차단하는 요소로 작용되지 않는다(하단 그림 참조) 문서의 외부 스타일시트 및 스크립트 순서에 따라서 때로는 HTML 파싱도 중지할 수 있다. 👉 파싱을 차단하는 상황을 피하기 ..

[CS] 성능 향상을 위한 최적화

🎨브라우저 로딩 과정🎨 파싱 스타일 레이아웃 페인트 합성 & 렌더 📃웹 페이지 로딩 최적화 브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있으며, CSS와 자바스크립트가 이에 해당한다. 최적화의 첫번째 단계는 이 블록 리소스를 최적화하는 것이다. CSS 최적화 CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있다. 렌더링이 차단되지 않도록 CSS는 항상 HTML 문서 최상단( 아래)에 배치한다. 특정 조건에서만 필요한 CSS가 있을 때 미디어 쿼리를 사용한다. 외부 스타일시트를 가져올 때 사용하는 @import 사용은 피한다. 상황에 따라 내부 스타일시트를 사용한다. 자바스크립트 최적화 자바스크립트는 DOM트리와 CSSOM트리를 동적으로 변경할 수 있기 때문에 HTML 파싱을 차단하는 블록..