속도3 lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력 Github / aFarkas / lazysizes / README.md 'lazy load'는 웹페이지의 리소스를 전송 즉시 모두 화면에 출력하기보다는 필요할 때까지 페이지 출력을 기다리는 접근 방법입니다. 페이지를 스크롤하면 대기했던 이미지가 로딩되는 웹페이지가 대표적인 적용 사례입니다. 하나의 페이지가 담고 있는 리소스를 한 번에 모두 출력하지 않고 필요한 만큼만 나누어 출력하기 때문에 페이지 로딩 속도와 성능을 개선할 수 있습니다. 다운로드한 이미지 파일들은 캐시 메모리에 저장되어 있습니다. 이것을 로딩 시간은 잠깐 늦추어 뷰포트에 보이지 않다가 나중에 필요할 때 불러내므로 "offscreen images"라는 용어를 사용합니다. 이미지 파일, 특히 고해상도에 용량이 큰 사진을 많이 제공하는.. 2021. 6. 20. 댓글 웹 브라우저의 추가 연산을 요구하지 않는 CSS 코드 개인 블로그 관리하면서 실행 코드를 정리하고 있습니다. 자그마한 코드 수정으로 인하여 2회 정도 블로그의 웹페이지 로딩 속도가 눈에 띄게 좋아지는 경험을 하였습니다. 정확한 전문적인 정보에 의한 수정 작업이 아니기 때문에 조금씩 공부하고 있는 입문자의 경험담이라 생각하시면 됩니다. 웹페이지 로딩 속도는 구글의 측정 사이트에 MS 엣지 혹은 구글 크롬 웹 브라우저로 접속하여 측정한 것입니다. 인터넷을 거쳐서 블로그에 접속하면 블로그 서버에서는 페이지 코드를 담은 데이터를 일정한 과정을 거쳐서 전송하고 웹 브라우저가 이 코드를 받아 CPU, GPU, 메모리 등의 연산 작업을 거쳐 스크린에 렌더링 하는 것이기 때문에 측정 수치는 웹 브라우저 및 PC(기타 기기)와 전적으로 관련이 있습니다. 구글.. 2021. 3. 4. 댓글 티스토리 script.js GNB 오류 수정 ※ 2020.11.27: 블로그 반영 ※ 2024.03.26: 아래 링크한 알릭2님의 블로그에 원본 소스를 수정하는 자세한 이유와 설명이 기재되어 있습니다. 북클럽 스킨 - GNB 메뉴 현위치 버그 (tistory.com) 원본 (오류) $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb... 2020. 11. 18. 댓글
