본문 바로가기

브라우저5

Browser B/F cache 💰 B/F cache는 Back/Forward Cache라는 뜻을 가지고 있습니다. 브라우저에서 뒤,앞으로 이동할때 로드를 빠르게 하기위한 동작입니다. 브라우저에서는 이전 페이지를 snap shot을 찍어서 메모리에 올려놓습니다. 사용자가 뒤로 가기를 하면 메모리에서 가져와 그대로 보여주는 것입니다. 이렇게 하면 이전 페이지에서 리소스들의 요청을 보내지 않을 수 있고, 스크립트의 재실행 또한 하지 않습니다. 따라서 사용자에게 빠르게 보여줄 수 있습니다. 브라우저 호환성 safari, firefox에서는 전부 지원되어 왔었고 chrome에서는 버전 86부터 점진적으로 적용해왔다가 버전 96부터는 모든 chrome 유저가 사용할 수 있도록 지원되고 있다고 합니다. bfcache 기본 사항 bfcache는 페이지.. 2022. 4. 22.
브라우저 구성, CRP, reflow, repaint, DOM, layout thrashing, requestAnimationFrame 🌱 reflow는 레이아웃 -> 페인트 -> 합성 이 이루어지는 것을 말하고 repaint는 페인트 -> 합성이 이루어지는 것을 말합니다. 레이아웃 단계에서 노드 들이 ViewPort(뷰포트) 내에 위치하는 위치를 계산하게 되는데 이 과정이 상대적으로 비용이 비싸서 reflow를 불필요하게 유발하지 않아야 합니다. ViewPort(뷰포트)란 그래픽이 표시되는 브라우저의 영역, 크기를 말합니다. reflow, repaint에 대해 알기 위해서는 먼저 브라우저의 구성을 알고 웹 페이지가 브라우저에 나오는 과정을 이해하여야 합니다. 브라우저 구성 브라우저는 아래와 같이 구성됩니다. UIInterface, 브라우저 엔진, 렌더링 엔진, 네트워크 모듈, js 엔진, UIBackend, Data Storage로 구성되.. 2022. 4. 11.
브라우저 캐싱 ❓ 위아래 사진은 같은 페이지의 요청을 비교한 사진입니다. size를 보시면 아래의 사진은 대부분이 cache로부터 조회된 것을 확인할 수 있습니다 cache는 컴퓨터의 여러분야에서 쓰이고 있습니다. 대표적인 곳이 cpu의 l1,l2,l3 캐시 입니다. 캐시를 사용하여 같은 요청이 반복해서 들어왔을시 메모리로의 접근없이 빠르게 데이터를 조회하여 사용할 수 있습니다. 이러한 기능을 하는 캐시가 브라우저에서도 사용될 수 있습니다. 이를 브라우저 캐싱이라 합니다. 일반적으로 정적인 리소스 들을 캐싱합니다. 1. 이미지 - 로고, 사진 등 2. HTML 3. CSS 4. Javascript client와 서버간의 응답속도를 높이기 위해 웹 페이지의 구성요소들을 사용자 pc에 저장을 해둘수 있습니다.(브라우저 캐싱).. 2022. 4. 6.
JWT/JWK jwt 필요한 모든 정보를 지니고 있습니다. 토큰에 대한 기본정보, 전달 할 정보, 토큰이 검증됐다는것을 증명해주는 signature 형태 : head + "." + payload + "." +signature head -> 토큰의 타입 / 암호화 알고리즘 / Key id { "typ": "JWT", "kid": "OEqNw5/eh+ga7bhB4C6XTX8ON0/8BqCJ26Q0htJ63WA=", "alg": "RS256" } payload -> data 정보의 조각을 클레임이라 호칭 등록된 클레임 + 공개 클레임 + 비공개 클레임 등록된 클레임 -> 토큰에 대한 정보들을 담기 위하여 이미 정해진 클레임들 입니다. 공개 클레임 -> 보통 URI형식으로 짓습니다. 비공개 클레임 -> 클라이언트 서버 합의하.. 2021. 12. 6.
localStorage, sessionStorage 비회원 예약 과정 진행을 위해 localStorage를 써야하는 경우가 있었다. 그 기록을 남기려 한다. 예전에 비회원의 장바구니를 구현할 때 매 접속시마다 임시 유저를 생성해서 넘겨 줬었다. 이 유저가 로그인을 하면 임시 유저는 그냥 쓰레기 값이 된다. 나중에 디비를 정리할때 몇천의 임시 유저를 삭제했었던 경험이 있었다. (왜 이렇게 했을까???) localStorage와 sessionStorage, cookie의 옵션이 있었는데 localStorage를 썼다. 쿠키는 사용경험이 있었다. 팝업의 일주일간 닫기 기능을 사용했을때 일주일 유효기간을 담아서 넣어주었었다. 패키징 파일에서 버전에 대한 정보를 웹뷰쪽의 쿠키에 넣어주었었다. 그리고 웹뷰에서는 쿠키값에 따라 다른 뷰를 보여줬었다. 안 써본걸 사용해.. 2021. 11. 14.

티스토리툴바