Jaddong's Lab

reflow와 repaint가 많을수록 성능저하를 유발한다고 알고있는데, 이론으로 말고 실제로 구현과 측정을 통해서 어떤 차이가 있는지 알아보고 싶어서 테스트를 작성해봤다. 1. DevTool에서 성능(performance)탭에서 알아본다. 2. 레이아웃이 다시 되는지 확인한다. -> reflow를 확인한다. relfow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다. repaint reflow 과정이 끝난 후, 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시에는 reflow 과정이 생략 된 repaint ..

인스타 피드에서 만든거 보고 너무 귀여워서 css 안까먹을 겸 만들어서 깃헙에만 넣어놨었는데 오랜만에 깃헙로그인했다가 찾아서 꺼내올린다. (interactive web 공부하고 싶다면서 현생이 그냥 지나갈 것 같다.... 이것도 일이었다면 재미없었겠지....) See the Pen by Jayoung Lee (@Jayoung) on CodePen.

현생이 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 시작이 반이다.... 그래.... 현생에 치여 회사에서 업무 하면서 궁금한 것들을 매번 구글링만 하다 보니 뭔가 내 머릿속에 있던 깊은 것들이 사라지는 느낌이다.... ㅎ ㅏ.... 역시나 반복하지 않으면 뭐든 잊어버리게 되는 듯하다. 웹에 관해 간결하게 핵심만 정리하여 주 1회 공부 겸 포스팅을 해보려 한다. 거의 다른 글 복붙 수준인뎈ㅋㅋㅋ 그래도 곱씹어 읽어보게 되니 그걸로 만족한다. 시작이 반이다.... 그래.... 1. ..