2020/023 Css 선택자. 어떤 걸 써야 더 성능이 좋을까? 많은 사람들이 CSS가 성능이 높고 성능이 떨어질 수 있다는 사실을 잊거나 단순히 깨닫지 못합니다. 그러나 성능이 좋지 않은 CSS를 얼마나 적게, 실수하고, 실현할 수 있는지 알면 쉽게 용서받을 수 있습니다. 이 규칙은 실제로 속도가 특징 인 고성능 웹 사이트에만 적용되며 특정 페이지에 1000 개의 DOM 요소가 나타날 수 있습니다. 그러나 모범 사례는 모범 사례이며, 다음 Facebook 또는 로컬 데코레이터를위한 사이트를 구축하든 상관없이 항상 알아 두는 것이 좋습니다. Steve Souders 의 책 Even Faster Websites에서 인용하는 css 선택자 스피드의 순위는 다음과 같습니다. ID, e.g. #header Class, e.g. .promo Type, e.g. div Adja.. 2020. 2. 15. [이미지] User-Agent가 사라진다고? 이미지 Client Hints 사용하기 이미지에 대한 Client Hints를 사용하기 위해 head 태그 내에 삽입해야되는 메타태그 Accept-CH: DPR, Viewport-Width Accept-CH: Width Accept-CH-Lifetime: 86400 Vary: DPR, Viewport-Width, Width Accept-CH를 통해서 위와 같은 속성들을 사용할 수 있으며, 저는 이번에 DPR, Viewport-Width, width를 사용해 봅니다. DPR의 범위를 제한함과 동시에 medaqueries 사이즈를 통해 각각 노출할 수 있습니다. 2020. 2. 15. [이미지] Lazy Loading에 대한 고찰 이 글은 하단 출처에서 발췌하여 필요한 부분만 따로 정리한 글입니다. 이미 지연 로딩이 실행되는 것을 본 적이 있을 것입니다. 지연 로딩은 다음과 같이 진행됩니다. 페이지에 도달하여 콘텐츠를 읽으면서 스크롤을 시작합니다. 특정 지점에서 자리표시자 이미지를 표시 영역으로 스크롤합니다. 자리표시자 이미지가 순간 최종 이미지로 교체됩니다. 현대의 브라우저는 Intersection observer API를 통해 요소 확인 작업을 수행하는 더욱 우수하고 효율적인 방식을 제공합니다. document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); i.. 2020. 2. 15. 이전 1 다음
