2022/09/22 2

리플로우 & 리페인트

개념정리 리플로우 어떤 웹 인터렉션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것. 즉, 렌더링을 다시 하는 것. 배치를 위한 연산을 해야해서 실제로 cpu를 많이 차지. 리페인트 페인트 과정을 반복해 수행하는 것. 즉, 페인트를 다시 하는 것. 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지. =>프레임 드랍현상과 연관 예) DOM 조작 최적화 불필요한 레이아웃은 줄이기 레이아웃 과정에서 불필요하게 계산해야 할 것이 많아지면 엔진도 결국 컴퓨팅 파워에 기대기 때문에 과부하가 불가피하게 생기게 때문에 이런 레이아웃을 발생시키는 속성을 피하면 해당 과정이 발생하는 횟수를 줄일 수 있다. CSS에서 레이아웃, 페인트를 발생시키는 속성들 리플로우시 리페인트는 필연적으로 일어..

개발공부/UX UI 2022.09.22

Graph

여러개의 점들이 서로 복잡하게 연결되어 있는 관계 구조 - 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있다. -간접적인 관계라면 몇 개의 점과 선에 걸쳐 이어진다. -하나의 점을 그래프에서는 정점이라고 표현하고, 하나의 선은 간선이라고 한다. Graph의 표현 방식 인접행렬 서로 다른 정점들이 인접한 상태인지를 표시한 행렬로 2차원 배열의 형태로 나타낸다. ex) A와 B가 이어져 있다면 1(true), 이어져 있지않다면 0(false) if) 가중치 그래프라면 1대신 관계에 서 의미 있는 값을 저장한다. 가장 빠른 경로를 찾고자 할 때 주로 사용된다. 인접리스트 각 정점마다 하나의 리스트를 가지고 있으며, 이 리스트는 자신과 인접한 다른 정점을 담고 있다. 메모리를 효율적으로 사용하고 싶을..