반응형 브라우저3 브라우저 성능 최적화 앞 글에서 웹 최적화를 위해 reflow와 repaint에 대한 정리를 하면서 paint과정 외에도 composite라는 과정이 더 있는 점을 알게 되었다. composite는 브라우저가 각각의 레이어를 스타일 방식에 따라서 병렬적으로 레이어로 분류되고 paint을 한 후에 모든 레이어를 합치는 과정이다. 애니메이션을 처리하기 위해서 GPU도 사용하게 된다. GPU에서 애니메이션을 처리하므로 메인 스레드는 렌더링 레이아웃에 포커스를 둘 수 있게 된다. * 브라우저가 별도의 Layer 생성할 때 조건 * - video, canvas 태그 사용 - animation 이나 transition 사용 - will-change가 opacity, left, top, bottom, right, transform - i.. 2024. 3. 30. 브라우저 아키텍쳐 이해하기_프로세스 스레드 GOAL - 프로세스 안에 스레드란? - 스레드와 하드웨어와의 연관성? - 멀티 프로세스 내부의 구조? 멀티 프로세스를 이해하기 위해서는 하드웨어와 소프트웨어의 연관성에 대해서 알아야 할 필요성이 있다. 프로세스도 추상적인 개념이다. [브라우저에서 화면이 그려지는 큰 과정] 1. 브러우저에 URL을 입력했을 때, 브라우저가 화면을 그리기 위해서 파일을 가져옴 2. 렌더링 프로세스: 가져온 파일을 브라우저가 렌더링 하는 과정 먼저 브라우저가 화면을 그리기 위해서 어떠한 일들이 일어나는지에 대해서 간단하게 살펴보려고 한다. 브라우저가 실행이 됐을 때 데이터는 메모리에 보관이 된다. 그런데 하드웨어인 메모리와 브라우저에는 어떤 연관이 있을까? 라는 질문이 꼬리를 물고 물어 드디어 CS 공부의 필요성이나 브라우.. 2023. 5. 26. 브라우저 저장소 브라우저 저장소 쿠키, 웹 스토리지, 로컬 스토리지, 세션 스토리지 HTTP통신을 통해서 클라이언트가 서버에게 requeset를 보내고 서버는 클라이언트에게 requeset에 대한 response를 보내고 접속을 종료한다. 통신이 끝나면 상태 인증에 쓰이는 상태 정보를 유지하지 않는다는 특징이 있다. 서버측에선 자원 낭비를 하지 않는 장점이 있지만, 통신을 할 때마다 새로 연결해줘야 하기 때문에 클라이언트는 그 때마다 인증을 해줘야하는 단점을 갖고있다. 이러한 문제에 사용하는 것이 브라우저의 스토리지이다. 브라우저의 저장공간인데, 쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지)가 있다. 웹 스토리지는 html5부터 제공되는 저장소이다. 쿠키와 웹 스토리지는 모두 해당 도메인에 대한 데이터를 브라우저에.. 2022. 12. 25. 이전 1 다음 728x90 반응형
