autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
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
단순히 투명도를 조절해 나오는 애니메이션과 랜더링 여부를 고려해 나오는 애니메이션은 차이가 있음을 알려드립니다.
감사합니다 :)
Json 플러그인 사용시 variable collection 없음
0
12
1
배리어블 목록 없음
0
21
3
Token 등록 방법 문의
0
18
1
3강 질문
0
15
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
26
1
2강 nodejs 3단계 설명 질문
0
33
1
6-6 실습 문의
0
23
2
imagesLoaded에 관한 질문
0
19
2
hover pulse animation 관련해서 질문있습니다!
0
66
2
어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!
1
80
2
autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요
1
228
2
gsap으로 흐르는 배너도 제작이 가능할까요?
1
473
2
혹시 부드럽게 진입 이후 루프가 가능할까요?
2
201
1
다중요소 제어시 질문드립니다.
1
252
2
timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?
1
475
1
gsap 상업적 사용여부
1
1027
1
fork 주소가 어떻게 되나요?
1
462
1
강사님 다중요소제어 stagger 질문있습니다
2
453
1
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
1
712
1
기초 트위닝 질문
1
379
1
선생님 Advanced 강의가 절실합니다.
1
465
1
어몽이가 안나와요!! 저만 그럴까요?
1
512
2
추후에 반응형에 관련된 강의 내용도 포함될까욥,,?
1
741
1
❗️긴급❗️ 선생님 실습파일이 잘못된것 같습니다.
1
554
1