사용한 것 (환경)

cordova

visualStudioCode

windows10

Android

튜토리얼을 번역하면서 시도

튜토리얼의 페이지는 아래와 같다.

Module 11: Using Hardware Acceleration

마지막 튜토리얼.

Cordova 튜토리얼을 시도해보십시오.

환경 구축에 대해서는 별도 정리하고 있으므로 아래 참조.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

Module 11: Using Hardware Acceleration

In this module, you add hardware accelerated page transitions when the user navigates between the list and details views.
이 모듈은 사용자가 목록 보기와 상세 보기 사이를 탐색할 때 하드웨어 가속으로 인한 페이지 전환을 추가합니다.

index.html에 다음과 같이 변경합니다.

1. head 태그 안에 pageslider.css 추가.

<link href="assets/css/pageslider.css" rel="stylesheet">

2. jquery.js 뒤에 pageslider.js를 로드하도록 script 태그를 추가합니다.

<script src="lib/pageslider.js"></script>

PageSlider는 여기의 작은 라이브러리입니다.

app.js를 아래와 같이 변경합니다.

1. Local Variables 섹션에서 PageSlider 객체를 생성합니다.

var slider = new PageSlider($('body'));

2. 이러한 route에서는 $('body').html() 호출을 바꾸고 동일한 인수를 함수에 전달합니다.

slider.slidePage(new HomeView(service).render().$el);

다른 하나는

slider.slidePage(new EmployeeView(employee).render().$el);

조금 일본어 번역이 잘되지 않습니다만, 요컨대 $('body').html()로 화면 표시를 변경하고 있던 처리를 slider.slidePage로 래퍼 했을 뿐입니다.

자습서 페이지에서 애플리케이션을 테스트해 봅시다. 라고는 쓰고 있지 않습니다만, 먼저 동작을 확인해 보겠습니다.


모바일처럼 슬라이드하고있는 것을 알 수 있습니다.

자, 하드웨어 가속이란 무엇입니까?

웹 사이트의 성능 향상을 위해 GPU 처리를 도입했습니다.

요컨대 브라우저도 애니메이션으로 움직이면 GPU로 일부 처리해 버리자! 라는 것 같습니다.
이 튜토리얼에서는 라이브러리를 사용했을 뿐이므로 정직 거의 관계없습니다.
(튜토리얼 제목에 문제가있는 것 같습니다 ...)

참고 URL

Module 11: Using Hardware Acceleration

Cordova 튜토리얼을 시도해보십시오.

cordova&VSCode로 환경을 구축할 때까지의 우왕좌왕 메모.

웹 사이트의 성능 향상을 위해 GPU 처리를 도입했습니다.