Web Landing

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2022 Jul 28 15:29
Editor
Edited
Edited
2022 Aug 17 5:22
Refs
Refs
 
 
 
 
 
 
웹 페이지 로드 과정
2021-01-24 프론트앤드 관련 강의를 듣다가 웹 페이지 로드 과정에 대해서 설명해주셨는데 한번 정리하고 싶어서! 플랫폼이 어떤 순서로 페이지를 로드하는지, 어떤 이벤트들이 발생하는지 궁금해서! Navigation Timing API에서 제공하는 property가 어떤걸 의미하는지 알고 싶어서! 성능 이슈는 웹 브라우저의 동작과 관련이 있기때문에 미리 정리하고 싶어서!
웹 페이지 로드 과정
Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"
Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh
Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"
Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"
Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh
Shu on Twitter: "Fade-in animation that is not so boring:{ 0% { opacity: 0; filter: brightness(1) blur(20px) } 10% { opacity: 1; filter: brightness(2) blur(10px) } 100% { opacity: 1; filter: brightness(1) blur(0) }} pic.twitter.com/NP7JghSOBh / Twitter"
 
 

Recommendations