미니프로그램의 느린 응답속도 문제를 해결하는 방법

목적:

미니 프로그램의 느린 응답 속도와 열악한 사용자 경험 문제를 해결합니다.

(학습 영상 공유:프로그래밍 영상)

최적화 방법은 다음과 같습니다.

1. 페이지 로딩 속도 향상

작은 프로그램 환경에서 페이지 로딩 속도를 향상시키는 방법은 무엇인가요? 이것은 큰 질문입니다. 사용자가 링크를 클릭한 후 새 페이지를 여는 데 걸리는 시간을 어떻게 단축할 수 있습니까? 핵심 핵심 사항은 다음과 같습니다.

페이지가 사용자의 클릭 동작에 응답하고 새 페이지의 onload 이벤트가 트리거될 때까지 점프하기 시작하는 데 지연이 있습니다. 이 지연은 약 100-300ms입니다(Android 응답은 ios보다 느립니다.)

이 지연 시간은 짧습니다. 이 시간을 사용하여 새 페이지에 필요한 네트워크 요청을 미리 시작할 수 있습니다. 이렇게 하면 100~300ms(또는 네트워크 요청 시간)가 절약됩니다.

이런 공백이 있다는 것을 알고 나면 코드를 어떻게 구현해야 할까요?

직접 말하면 페이지 A에 페이지 B의 데이터를 미리 로드하는 기능을 구현하는 것입니다. 그러나 이러한 종류의 페이지 간 호출은 논리를 쉽게 복잡하게 만들고 서로 다른 페이지의 논리를 함께 결합할 수 있습니다. 따라서 우리는 페이지와 개발 복잡성 간의 결합을 증가시키지 않고 사전 로드 논리를 눈에 보이지 않게 숨길 수 있기를 바랍니다.

다음은 Tencent Video Mini 프로그램을 예로 들어 기술 구현을 설명합니다.

미니 프로그램의 홈 페이지:

사용자가 포스터 이미지를 클릭하면 다음 코드(단 한 줄)가 실행됩니다.

그러면 프로그램이 재생 페이지를 로드합니다.

재생 페이지의 기본 코드:

외부 페이지 호출과 실제 로직 구현이 모두 매우 간단하다는 것을 알 수 있습니다. 두 번째 페이지에서는 페이지 수명 주기 기능을 확장하고 onNavigate 메서드를 추가했습니다. 이 메소드는 페이지가 생성되려고 하지만 아직 시작되지 않았을 때 실행됩니다.

숙련된 운전자라면 여기서 이상한 점을 발견할 수도 있습니다. 홈페이지를 클릭하면 재생 페이지가 전혀 생성되지 않고, 객체도 존재하지 않습니다. 내부 메소드에 어떻게 접근할 수 있나요?

여기서 WeChat의 페이지 메커니즘에 대해 이야기하겠습니다.

미니 프로그램이 시작되면 Page() 메서드를 호출하는 모든 개체가 대기열에 저장됩니다(아래 그림 참조). 페이지에 액세스할 때마다 WeChat은 새 객체 인스턴스(실제로 전체 복사본)를 다시 생성합니다.

즉, 페이지 A가 클릭 응답 이벤트를 실행할 때 페이지 B의 인스턴스가 아직 생성되지 않았습니다. 이때 호출된 onNavigate 메소드는 실제로 페이지 객체(애플릿이 실행될 때 생성된 것)의 프로토타입입니다. 시작했습니다)

곧 생성될 B페이지는 또 다른 개체입니다. 따라서 onNavigate 및 onLoad 메서드에서 this 포인터는 동일한 개체를 참조하지 않으며 임시 데이터를 현재 개체에 저장할 수 없습니다. 따라서 우리는 한 쌍의 전역 캐시 메소드인 $put() 및 $take()를 캡슐화합니다.

다양성을 위해 $route, $put, $take 등 Page에서 사용되는 공개 메서드는 모두 Page 기본 클래스에 정의됩니다. 또한 기본 클래스는 모든 페이지의 목록을 동시에 저장하므로 페이지 이름을 기준으로 특정 페이지의 onNavigate 메소드를 호출할 수 있습니다. 물론 모든 페이지가 onNavigate 메서드를 구현해야 하는 것은 아닙니다. onNavigate 메서드를 정의하지 않은 경우 $route 함수는 사전 로드 단계를 건너뛰고 페이지로 직접 이동합니다. 따라서 개발자는 다른 페이지에서 구현하는 내용에 대해 신경 쓸 필요가 없으며 외부 세계에 완전히 투명합니다.

2. 사용자 행동 예측

위 예시에서는 사용자가 적극적으로 페이지를 클릭하고 다음 페이지의 데이터를 미리 로드하는 방식을 구현했습니다. 일부 시나리오에서는 사용자의 행동을 예측할 수 있으며 사용자가 클릭하기 전에 다음 페이지에 대한 데이터를 미리 로드할 수 있습니다. 다음 페이지가 즉시 열리도록 하여 경험의 부드러움을 더욱 향상시킵니다.

계속해서 Tencent Video 미니 프로그램을 예로 들어보겠습니다. 메인 인터페이스는 3개의 페이지 카드로 나누어져 있습니다. (대부분의 미니 프로그램은 이런 식으로 설계됩니다.) 간단한 데이터 분석을 통해 50%의 사용자가 홈페이지는 두 번째 페이지 카드를 방문합니다. 따라서 두 번째 페이지 카드의 데이터를 미리 로드하면 사용자의 다음 클릭 페이지 열기 속도를 크게 향상시킬 수 있습니다.

마찬가지로 먼저 코드 구현을 살펴보겠습니다. 홈페이지에 채널 페이지를 미리 로드하는 방법:

채널 페이지 구현 방법:

첫 번째 예와 유사하게 $preLoad() 메서드가 여기에 정의되고 onPreload 이벤트가 페이지로 확장됩니다. 페이지가 $preLoad()를 호출한 후 기본 클래스는 페이지에 해당하는 onPreload 함수를 자동으로 찾아 페이지에 미리 로드 작업을 수행하도록 알립니다. 첫 번째 예와 달리 여기에 미리 로드된 데이터는 사용자가 페이지에 즉시 액세스할 수 없기 때문에 스토리지에 저장되며, 전역 변수에 데이터를 저장하면 미니 프로그램이 차지하는 메모리가 늘어납니다. WeChat은 메모리를 너무 많이 차지하는 작은 프로그램을 주저 없이 제거합니다.

앱 개발 경험이 있는 대부분의 학생들에게 더 일반적인 접근 방식은 먼저 페이지에 마지막으로 캐시된 데이터를 표시한 다음 실시간으로 새 데이터를 가져온 다음 페이지를 새로 고치는 것입니다. 이 방법은 미니 프로그램의 성능과 페이지 렌더링 속도가 기본 앱만큼 좋지 않기 때문에 미니 프로그램에서는 좋은 경험이 아닐 수 있습니다. 많은 양의 데이터를 UI 레이어로 전송하는 것은 부담스러운 작업입니다. 따라서 이 방법은 권장되지 않습니다.

3. 기본 데이터 크기 줄이기

방금 언급한 것처럼 WeChat은 새 페이지가 열릴 때 페이지 개체를 심층 복사하므로 기본 데이터 크기도 최대한 줄여야 합니다. 객체의 사용자 정의 속성으로. 그림이 있고 진실이 있습니다:

100개의 속성이 있는 데이터 개체를 테스트 사례로 사용하면 iPhone 6에서 페이지 생성 시간이 150ms만큼 늘어납니다.

4. 컴포넌트화 솔루션

WeChat은 미니 프로그램에 대한 컴포넌트화 솔루션을 제공하지 않습니다(구현되어야 한다고 생각합니다). 하지만 컴포넌트화에 대해 이야기하지 않는다면, 아무리 많은 코드를 작성해도 헛수고가 될 것입니다. 다음은 간단한 구성 요소 구현입니다.

Tencent 비디오 재생 페이지를 예로 들어 보겠습니다. 페이지 정의는 다음과 같습니다.

그 중 P() 함수는 사용자 정의 기본 클래스입니다. 이는 매우 유용한 것입니다. PV 통계, 소스 통계, 확장된 수명 주기 기능, 구성 요소화 등을 포함하여 모든 일반적인 논리를 기본 클래스에 작성할 수 있습니다.

함수의 첫 번째 매개변수는 페이지 이름으로, 페이지의 키로 사용됩니다. 두 번째는 로드할 모든 구성 요소가 포함된 comps 배열을 확장하는 페이지 개체입니다.

플레이어 구성 요소/comps/player/index.js를 예로 들어 보겠습니다.

구성 요소의 정의는 다음과 같이 데이터 속성, onLoad, onShow 및 기타 이벤트를 포함하는 일반 페이지 개체와 정확히 동일합니다. 페이지 응답을 위한 콜백 메소드도 있습니다. wxml 템플릿에 정의된 이벤트는 js 이벤트와 일대일로 대응됩니다.

기본 클래스가 하는 일은 이러한 구성 요소 개체의 속성과 메서드를 페이지 개체(얕은 복사본)에 복사하는 것입니다. 데이터 속성이 함께 병합됩니다. WeChat의 사전 정의된 수명 주기 기능(자체 확장 포함)은 대기열에 캡슐화되어 순차적으로 실행됩니다. 예를 들어 시스템이 onLoad 메서드를 호출하면 실제로 모든 구성 요소의 onLoad 메서드가 실행되고 마지막으로 페이지의 onLoad가 실행됩니다.

위는 코드 부분입니다. wxml 템플릿과 wxss 부분은 수동으로 가져와야 합니다.

wxml:

wxss:

5. 기타

미니 프로그램은 충분히 작지만 시작 속도는 여전히 2~3초이며 몇 초 안에 열 수 없습니다. 저자는 미니 프로그램의 시작 시간을 최적화하려고 노력했지만 귀중한 최적화 포인트를 많이 찾지 못했습니다. 단일 페이지 초기화에는 1-2ms밖에 걸리지 않습니다. 아마도 대부분의 시간은 WeChat과 서버 간의 통신 과정에서 소비됩니다.

다행히 Tencent는 독립적인 서버 성능 테스트를 위한 환경을 제공합니다. 사용자는 도메인 이름과 몇 가지 간단한 매개변수만 입력하면 현재 Tencent WeTest 플랫폼에서 무료로 사용할 수 있습니다.

관련 추천:미니 프로그램 개발 튜토리얼

위 내용은 미니프로그램의 느린 응답속도 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!