브라우저에서 큰 이미지를 미리 렌더링하는 캐시

거대한 이미지를 순조롭게 표시할 수 있는 최고의 보호 기술을 공유하다.
나는 일반적으로 큰 그림을 미리 불러올 것이라고 생각하지만, 큰 그림의 제작 비용도 당연히 매우 크다.DOM으로 구성하면 타임라인이 조금씩 발생합니다.그림을 빠르게 전환하는 공연이라면 흥이 깨질 것 같다.이럴 때 효과적인 것은 미리 과장하는 것이다.
브라우저에 그런 물건이 있는지 없는지는 아마 없을 것이다.그냥 아무렇게나 부르는 거야. 즉, 그림을 미리 그려서 캐시해야 한다는 거야.

체형이 변하지 않다.

데모

아주 평범하게 미리 싣는 것만 이루어졌기 때문이다.

사전 렌더링 없음

씩씩하게 모델 산책하는 미쿠는?40프레임답게 매끈매끈하다.
참고로 이미지 사이즈는 450입니다.×450이기 때문에 높이 18450px의 이미지입니다.무섭다.
링크의 walk 단추를 누르면 런 애니메이션으로 전환되지만 전환하는 순간 거의 깜빡이는 환경이 있습니다.

미리 설치되어 있어도 이렇게 큰 그림이라면 그리는 데 시간이 걸립니다.
만약 디스플레이를 빠르게 전환해야 하는 동작 게임이라면, 나는 모두가 이것이 매우 치명적인 럭비라는 것을 알게 될 것이라고 생각한다.

사전 렌더링됨

이것은 미리 과장된 팽이 애니메이션이다.

아마도 전환하는 순간 이곳에는 전단지가 없을 것이다.
나는 네가 무엇을 하고 있는지 간단하게 설명해 주겠다.

구조

프리 렌더링 같은 건 좀 오버스럽지만 구조는 간단합니다.
이미지를 DOM에 추가하고 화면에 표시하고 재생하면 됩니다.
이렇게 말하지만 프리렌더링을 완전히 볼 수 있는 경우는 거의 없다.
이걸 숨기려면 의외로 어려워요.
만약 none이라면 원래는 과장되지 않을 것이다.
히든이든 오퍼시티든 안돼.
absolute로 화면 밖으로 날아가는 것도 마찬가지다.
브라우저의 구조를 이해하지 못해 확인할 수 없지만 실제로 화면에 존재하지 않으면 그림을 그릴 수 없겠죠.

z-idex로 숨기기

효과적으로z-idex에 어느 층의 뒷면에 놓인 경우.
좋은 방법으로는 배경의 가장 깊은 뒷면에 숨겨야 한다.

보이지 않는 모습으로 설정하면서 팽이 애니메이션을 잘 보여주고 캐시를 한다.
그렇다면 이 표시가 끝난 상태를 어떻게 알았냐면 아쉽지만 정확한 방법이 없다.
그림 그리기 완료 이벤트는 존재하지 않지만, 어쨌든 검출해야 합니다.
그렇다면 전혀 추천하지 않는 스킬을 소개한다.

그림 그리기 완료 이벤트가 존재하지 않습니다

큰 그림을 그릴 때 FPS는 매우 낮습니다.CPU에 부담이 되겠죠.
CPU 부하가 증가하면 JS의 타이머도 영향을 받는다.
이 타이머의 간격을 시간 스탬프로 비교해 보면 CPU 부하가 떨어졌는지 판단할 수 있다.
아까 거.녀석로그를 엽니다.
출력된 숫자는 타이머 순환 사이의 시간 (ms) 이다.
FPS는 이미지가 뒷면에 재현되는 동안 크게 감소합니다.
이러한 FPS가 안정되면 드로잉이 완료된 것으로 간주됩니다.
초음의 애니메이션
타법이야.
전혀 장담할 수 없는 방법.
하지만 드디어 이 방법으로 벗어났다.
만약 진정한 대체 방법이 있다면, 나는 아예 이 방법을 포기하고 싶다.
그럼 부탁해요.