인프런 커뮤니티 질문&답변
작성한 질문수
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
해결된 질문
작성
·
392
1
Q. FOUC에 대한 보완으로 autoAlpha를 사용하면 효율적인 이유가 뭘까요?
FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다.
그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다.
이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
답변 1
0
안녕하세요 taylous 님 :)
웹에 그림을 그릴때는 브라우저가 html 코드와 css 코드를 인식하고 그려주는 시간인 repaint 와 reflow 의 단계를 가집니다.
여기서 단순히 투명도를 줄여주는건 요소를 랜더링 한 이후 투명도를 조절하는 방법이기 때문에 인터넷 속도가 느린 사용자 입장에서는 잠깐의 플래시 효과가 발생을 하게됩니다.
하지만 애초에 랜더링을 하지 않은 visibility:hidden 상태로 두게되면 인터넷 속도가 다른 사용자 입장에서도 랜더링은 안된 상태이기 때문에 플래시 효과가 발생하지 않고 이후 autoAlpha의 기능으로 랜더링을 주는 css코드를 입력함으로 동일한 결과를 나오게 만들어주는 역할을 합니다.
repaint와 reflow의 시각적 도움을 드리기 위해 유튜브 링크를 첨부드립니다.
https://www.youtube.com/watch?v=ZTnIxIA5KGw
단순히 투명도를 조절해 나오는 애니메이션과 랜더링 여부를 고려해 나오는 애니메이션은 차이가 있음을 알려드립니다.
감사합니다 :)