Jaddong's Lab

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

폰트 확장자 opentype : IE6-IE8 woff2 : woff보다 더 나은 압축 (IE를 제외한 모든 브라우저에서 사용) woff : W3C 권장 사항 (IE 에서 가능) ttf/otf: 모두에서 가장 일반적인 글꼴 형식 폰트 적용 방법 cdn보단 local에서 폰트 파일을 사용하는 것이 렌더 속도를 빠르다. ✔ 초기화 css 파일에 적용 @font-face { font-family: 'SpoqaHanSansNeo'; font-style: normal; font-weight: 300; src: url("../src/fonts/SpoqaHanSansNeo-Light.woff2") format('woff2'), url("../src/fonts/SpoqaHanSansNeo-Light.woff") for..

그냥 얼마전에 링크드인 둘러보다가 알게 된 :is 선택자! CSS4에 추가된 사항으로 코드를 상당 부분 줄일 수 있고 가독성에도 큰 효과를 보지 않을까 싶다....! 와웅,,,, CSS는 무궁무진 계속 성장중! 물론 익스플로어에서는 안된다ㅋ 밑에 codesandbox를 간단히 확인해볼 수 있게 만들었다 :) CSS4 에 추가된 내용이고 아래에 자세한 설명은 볼 수 있다. :where 선택자도 비슷한데, 우선순위에 있어서 차이가 있는 것 같다. https://www.w3.org/TR/selectors-4/#matches-pseudo Selectors Level 4 www.w3.org