개발자 도담씨

오늘 또 새로운 정보를 알았다! (흥분) 회사의 다른 부서에서 사용중인 페이지가 너무 기니까 랙을 먹어 불편하다고 말이 나와 고민중에 옆 선배한테 물으니 CSS 가속화 작업을 한번 해보라고 하셨다! CSS 가속화요...?😬 문제된 페이지는 sortable을 많이 사용한 페이지였다. 그렇다 보니 Reflow와 Repaint 작업이 많이 발생 할 수 밖에 없었다😫 Reflow와 Repaint를 모르고 계시다면 CSS랜더링에 관한 정보를 참고하시면 된다 :) 나는 위치가 이동될 수 있다고 미리 알려주는 css속성인 will-change를 걸어주었다. will-change:top, left; 다른 필요 지식이 더 있지만 아래의 참고 블로그에 너무 잘 정리해주셔서 기타 필요한 상세 내용은 적지 않겠다. 꼭 참고 ..

1편 - [Web Programming/Frontand Challenge] - 웹 페이지의 랜더링 과정 1편참고 블로그 : http://12bme.tistory.com/140 1편에서 웹 페이지의 랜더링 순서를 1단계부터 5단계 까지 알아보았다. 이번 2편에서는 리플로와 리페인트에 대해 알아보겠다...레더링이 모두 완료된 상태에서 ( 페인트까지 끝낸 상태 ) 스타일이 바뀌거나새로 나타나는 노드가 있다면...? 또는 데이터 변경으로인해 ( ex. AJAX ) 다시 표시해 주어야하는 일이 생긴다면?아마 다시 스타일을 적용하고 ( 랜더 트리 작업 ) 페인트 해주어야 할 것이다.이럴 경우에 발생하는 것이 리플로와 리페인트이다. 리플로 ( Reflow )란?변경이 생긴 랜더 트리에 대해 유효성 확인을 하고 노드의..

참고 블로그 : http://12bme.tistory.com/140 참고 블로그에 워낙 잘 설명되어 있어서 따라 포스팅을 쓰지 말까 하다가 그래도 내가 정리한 글이 더 기억에 남기에 글로 써본다. 🙏 우선 렌더링이란, 사전에서는 아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도 라고 설명하고, 블로그에서는 "논리적인 문서의 표현식을 그래픽 표현식으로 변형 시키는 과정" 이라고 되어있다. 뭔가 딱딱한 문장에 처음엔 음..? 하다가 그냥 내가 생각해서 쉽게 풀어서 설명하자면html, css등 글로 ( 코드로 ) 적어 논 것이 웹 사이트에 나타나게 되는 과정이다. 렌더링은 총 5단계 로 이루어 진다.( + html을 ..