![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bN9seP/btrQsDU6qHK/rjhry4SPRQqkmdKrpCMoMK/img.png)
IOS에서 페이지가 오픈되었을 때, PageShow event가 실행되는데 이때 bfcache로 페이지가 열렸는지 아니면 아예 처음 새롭게 열린건치 체크할 수 있는 방법이 있다. 바로 다음과 같은 속성을 이용하면 된다. https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent/persisted PageTransitionEvent.persisted - Web APIs | MDN The persisted read-only property indicates if a webpage is loading from a cache. developer.mozilla.org addEventListener('pageshow', (event) => { if (..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/8hFAa/btrKGoXayHT/tdwpzaXVJl15rJyNLzmnY0/img.png)
bfcache란 js heap까지 포함하여 페이지 전체를 다 캐시로 저장한다. 고로 전체 페이지의 정보가 메모리에 저장되어 있기 때문에 사용자가 이전 페이지로 복귀했을 때, 메모리에 저장된 정보를 노출하여주고, 결론적으로 빠른 페이지 로드가 가능하다. bfcache 동작 방식 페이지 전체(heap 포함)를 스냅샷을 떠 메모리에 올린다. ( 이와 반대로 HTTP 캐시는 단순 이전 요청에서 이루어진 응답만 캐싱하기 때문에 둘의 동작 방식은 조금 다르다) 모든 페이지를 스냅샷 뜨기 때문에 bfcache는 항상 빠르다. 만약 setTimeout 등의 함수가 동작하는 경우에는 어떻게 될까? task queue에 있는 모든 작업을 일시정지하고, 페이지가 복원되었을 때 해당 작업을 재실행한다. (개인적으로 이게 항상..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/9EIzz/btrKAMJxain/JMRQJgCCAleolPwTVb2bx1/img.png)
프론트앤드 개발자라면 아마 높은 확률로 사파리 브라우저를 좋아하지 않을거라 생각이 든다. 혹은 크롬을 좋아하지 않거나. 아무튼 두 개를 동시에 좋아할 수는 없다. 왜냐면 둘은 함께 할 수 없으니까! 개발을 하며, 브라우저 호환성에 대해 고민해보지 않은 개발자는 없을것이다. (만약 고민한 적이 없다면 반성해야 할 일..!) 그 차이 중 하나가 바로 bfcache이다. bfcache란 Back-Forward Cache로 사파리나 파이어폭스에서 이전 페이지를 빠르게 로딩하기 위해 스냅샷을 떠서 기억하고 있는 시스템이라고 생각하면 된다. (크롬에서는 96버전 이후부터 사용이 가능하다.) 이게 어떤 장점이 있는지 명확하게 보여주는 아주 좋은 유튜브를 찾았다. https://youtu.be/cuPsdRckkF0 크..
- Total
- Today
- Yesterday
- gitRebase
- BFCache
- 프론트엔드
- CSS
- 자바스크립트
- 리액트
- 크롬
- 깃
- npm
- TIL
- 리코일
- 모바일사파리
- js테스트
- 김민태
- js
- frontend
- vue
- 센트리모니터링
- javascript
- reacthook
- 센트리
- 깃명령어
- 리액트훅
- 프론트앤드
- sentry
- storybookUI
- 리액트상태관리
- 사파리
- Git
- react
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |