# preload
2023. 4. 25~27
Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preloa
[TIL 0425] CRP(Critical Rendering Path)
✔️ 브라우저에서 렌더링을 해주는 과정 > > 화면을 그려주는데 필요한 리소스(html,css,js)를 다운로드 해온다. HTML과 CSS에서 화면에 렌더해야 할 요소들을 구분 후 렌더되어야 할 HTML,CSS 요소를 합쳐 화면에 그려준다. 화면에 그려줄때 해당 요소들
Lazy-load & Pre-load
Lazy-load란 페이지를 불러 올 때의 필요한 이미지를 전부 불러오는 것이 아닌 스크롤이 내려가면서 화면에 하나 하나씩 이미지를 로드하는 방식이다.이미지가 많은 페이지일수록 이미지가 전부 로드될 때까지 기다려야하기 때문에 느리기도하고 불편함이 있다.차라리 처음, 맨
LazyLoad , PreLoad
프리패치, 프리로드, 레이지로드프리패칭은 다음 페이지의 것을 미리 받아오는 것이라고 할 수 있다. 브라우저에서 페이지가 그려지는 과정에서먼저 html코드를 받아오고 위에서부터 받아오는것을 알 수 잇는데, 이때 다운로드는 위에서부터 6개씩 받는 다. 미리 받는다는점에서는
React Suspense와 Image loading
프로젝트를 진행하면서 react-query와 suspense에 대한 만족도가 아주 높았다.그런데 화면에서 아주 거슬리는 것이 있었는데 이미지 로딩 문제였다.이미지 로딩을 처리하는 여러가지 방법이 있었지만 suspense를 이용하여 처리하면 좋겠다라는 생각이 들었다.먼저
Promise all, lazyload, preload, prefetch
현재의 이미지 업로드 방식의 비효율적인 부분은 1\. 이미지 찌꺼기가 남는다2\. 이미지 미리보기가 느리다.그냥 Promise로 함수를 만들어서 실행하게 되면, result1 → result2 → result3이 순차적으로 실ㄹ행되게 되고, 약 6초의 시간이 소요된다.
[HTML] preload, preconnect, prefetch
현재 페이지에서 사용할 리소스(resource)를 우선순위를 높게하여 빠르게 가져오게 한다. 주로 웹 폰트와 같은 빠르게 로드(load)되어야하는 곳에서 사용한다.as 속성을 사용하여 브라우저에게 해당 리소스의 유형을 알려줘야 한다. 올바른 유형이 아닐 경우 브라우저는
프론트엔드 개발자가 되기위한 여정 -33
밸! 하~ 밸로그 여러분 안녕하세요 오늘은 preLoad와 lazyload의 차이와 개념에 대해서 알아볼수있도록 하겠습니다 먼저 preload란 무엇일까요??말 그대로 미리 받아서 온다라는 뜻입니다 즉 다음페이지에서 볼것을 미리 데이터를 받아서 cashing 을 한다는
LazyLoad vs PreLoad
LazyLoading이란 체이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 방법이다. 웹페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것 이라고할 수 있다.이 방식은 웹 성능과 네트워크 비용 절감에 있어서
LazyLoad vs PreLoad
LazyLoad LazyLoad는 웹페이지를 불러올 때, 바로 필요하지 않은, 즉 눈에 보여지지 않는 이미지들의 로딩 시점을 뒤로 미루는 것이다. 사용자가 스크롤 등을 통해 이미지가 보여지는 시점이 되면 그때 로딩을 한다. LazyLoad를 사용해야 하는 이유는 당장 불필요한 이미지들가지 웹페이지를 불러올 때, 한번에 가지고 오면 로딩 시간과 성능 면에...
Day-31 FileReader, Promise.all, LazyLoad & PreLoad
기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않
코드캠프 FE 31일차 - TIL(FileReader,Promise.all,LazyLoad/PreLoad)
📔 학습목표 기존 업로드 방식은 비효율적이야 >> FileReader Async-await for문에서 쓰면 안된다고? >> Promise.all 내가 원할 때 이미지 불러오기 >> LazyLoad/PreLoad 업로드파일 프로세스 브라우저에서 플러스 이미지를
LazyLoad vs PreLoad
페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술이다.하지만 스크롤이 내려가면서 필요한 때가 되면 로드가 되어야 한다.예를 들어 이미지가 10장이 넘는 페이지가 있다고 가정해보자.이미지를 모두 다 로드가 될 때까지 기다리게 된다면, 페이지의 로
31) FileReader ?
Algorithm Self Study, Image Upload Process, Promise & Promise.all, LazyLoad vs PreLoad, Algorithm Class, self Study
[React] LazyLoad vs PreLoad
LazyLoadImage 사용할 준비가 된 여러 효과가가 포함되어 있으며 응용 프로그램에 시각적 캔디를 추가하는데 유용하지만 , 필요하지 않거나 자체 효과를 구현하려는 경우에는 완전히 선택사항입니다.사진을 미리 다운 받아 놓고 기다리다가 버튼을 누르거나 페이지가 변경되
Lazyload vs Preload
LazyLoad는 사이트 사이트를 랜더 해 올 때 필요한 만큼(보이는/지정된범위) 만큼의 이미지만 다운받아오는 것을 말한다.웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading이다LazyLoa
LazyLoad vs PreLoad
웹에서 페이지에 들어갔을 때 페이지에 존재하는 모든 이미지를 불러오면이미지의 양이 많을 수록 혹은 용량이 클 수록 그 속도가 느려지게 된다.그래서 사용자가 현재 보고있는 화면에 해당하는 이미지만 그 때 그 때불러와서 보여주면 속도를 향상시킬 수 있는데 이 기술이 Laz
LazyLoad/PreLoad
LazyLoad : 특정 페이지에 접속했을 때 페이지에 있는 모든 사진을 랜더링하지 않고 스크롤을 내리게되면 랜더링해준다. 만약 모든 사진을 랜더링해야할 경우 유저가 이미지가 다 다운받아질때까지 기다려야하는 번거로움을 줄 일 수 있다.PreLoad : 이미지가 큰 경우