안녕하세요! reflow부분에 대해서 궁금한게 있습니다 ㅠㅠ

Question

안녕하세요! 매번 강의 잘듣고있습니당!! 이런 강의 만들어주셔서 항상 감사해요 ㅠㅠ 이 강의와 직접적인 연관은 아닌데 ㅠㅠcss최적화 부분 공부하다가 reflow 를 최소화하는게 좋다는 걸 알았고.. height, padding 등이 reflow을 일으키는 요소들이라고 해요..근데 보다가 몇가지 궁금해져서요 ㅠ 찾아보곤 있는데 마땅히 명확한건 못찾겠어서 ㅠ혹시 선생님은 아실까 하여 여쭤봅니다 ㅠ 답변주심 정말 ㅠㅠ 좋겠어요 ㅠ 1. reflow는 height, padding 등이 변하면 계속 일어나는 거지요? 2. 그렇다면 px이 아닌, %, vw, vh, rem 등 브라우저 크기에 따라서 가변적으로 변화를 일으키는 단위들은 브라우저 화면이 리사이징 될때마다 리플로우가 일어나게 할까요??  3. 그럼 반응형페이지 퍼블리싱할 때 저 위에 요소들을 많이 쓸텐데.. 그럼 항상 리플로우가 일어나게하는건지..ㅠㅠ 이건 어쩔 수 없고 최대한 리플로우를 최소화 하는 방안을 찾아서 해야하는지(left, top 대신 translate 쓰기 등..)  선생님의 생각이 궁금합니다!! 여쭤볼데가 없어서 흡.. 답변해주시면 정말정말 ㅠㅠ 감사합니다!!

studiomeal · Answer

1. 네, 요소들의 크기나 위치가 바뀌어야 하는 경우 계산이 필요하기 때문에 reflow가 일어납니다. 2. 요소들간에 변화가 일어난다면 reflow도 일어나겠지요~ (rem은 창사이즈를 바꾼다고 크기가 바뀌지는 않습니다) 3. 브라우저 리사이즈에 대응해서 reflow를 너무 민감하게 고려하지는 않으셔도 됩니다. 왜냐하면 우리가 웹페이지를 사용할때 브라우저 귀퉁이를 잡고 계속 흔들면서 리사이즈를 유발하며 쓰는게 아니니까요~ㅎㅎ 잠깐 창 크기가 바뀌는 순간이기때문에, 웬만한 레이아웃 계산은 빠르게 수행이 됩니다. 브라우저 리사이즈보다는, 연속적인 연산이 일어나는 "애니메이션"을 처리할 때 신경써주시는게 좋습니다.

Jeong Hye Ji · Answer

와 빠른 답변 정말 감사합니다 ㅠㅠ!! 많은 도움이 되었어요!! 정말 감사합니당!