suchen
HeimWeChat-AppletMini-ProgrammentwicklungSo lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Zweck:

Lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit und der schlechten Benutzererfahrung von Miniprogrammen.

(Lernvideo-Sharing: Programmiervideo)

Die Optimierungsmethode ist wie folgt:

1. Verbessern Sie die Seitenladegeschwindigkeit

Wie kann die Seitenladegeschwindigkeit in der Umgebung eines Miniprogramms verbessert werden? Das ist eine große Frage. Wie kann man die Zeit vom Klicken eines Links bis zum Öffnen einer neuen Seite verkürzen? Hier ist ein zentraler Punkt:

Es gibt eine Verzögerung von der Reaktion der Seite auf das Klickverhalten des Benutzers und dem Beginn des Sprungs bis zum Auslösen des Onload-Ereignisses der neuen Seite. Diese Verzögerung beträgt etwa 100–300 ms (die Reaktion von Android ist langsamer). als ios).

Diese Verzögerung ist nur von kurzer Dauer. Wir können diese Zeit nutzen, um die für die neue Seite erforderlichen Netzwerkanfragen im Voraus zu initiieren. Auf diese Weise werden 100-300ms (bzw. die Zeit einer Netzwerkanfrage) eingespart.

Wie implementiert man den Code, nachdem man weiß, dass es diese Lücke gibt?

Um es ganz klar auszudrücken: Es geht darum, eine Funktion zum Vorladen von Seite B-Daten auf Seite A zu implementieren. Allerdings kann diese Art von seitenübergreifenden Aufrufen leicht die Logik komplizieren und die Logik verschiedener Seiten miteinander verknüpfen. Daher hoffen wir, die Vorladelogik unsichtbar zu verbergen, ohne die Kopplung zwischen Seiten und die Entwicklungskomplexität zu erhöhen.

Im Folgenden wird am Beispiel des Tencent Video Mini-Programms die technische Umsetzung erläutert.

Homepage des Miniprogramms:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Wenn der Benutzer auf das Posterbild klickt, wird der folgende Code (nur eine Zeile) ausgeführt:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Dann lädt das Programm die Wiedergabeseite:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Hauptcode für die Play-Seite:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Sie sehen, dass sowohl der Aufruf der externen Seite als auch die Implementierung der eigentlichen Logik sehr einfach sind. Auf der zweiten Seite haben wir die Funktion „Seitenlebenszyklus“ erweitert und die Methode „onNavigate“ hinzugefügt. Diese Methode wird ausgeführt, wenn die Seite erstellt werden soll, aber noch nicht gestartet wurde.

Erfahrene Fahrer finden hier möglicherweise etwas Seltsames. Wenn Sie auf die Startseite klicken, wird die Wiedergabeseite überhaupt nicht erstellt und die Objekte sind nicht vorhanden. Wie können Sie auf die darin enthaltenen Methoden zugreifen?

Hier werden wir über den Seitenmechanismus von WeChat sprechen.

Wenn das Miniprogramm gestartet wird, werden alle Objekte, die die Page()-Methode aufrufen, in einer Warteschlange gespeichert (wie unten gezeigt). Bei jedem Zugriff auf die Seite erstellt WeChat eine neue Objektinstanz (eigentlich eine tiefe Kopie).

Mit anderen Worten: Wenn Seite A das Click-Response-Ereignis ausführt, wurde die Instanz von Seite B noch nicht erstellt. Die zu diesem Zeitpunkt aufgerufene onNavigate-Methode ist tatsächlich der Prototyp des Page-Objekts (dasjenige, das erstellt wurde, als das Applet erstellt wurde). gestartet)

Die B-Seite, die demnächst erstellt wird, ist ein weiteres Objekt. Daher verweist dieser Zeiger in den Methoden onNavigate und onLoad nicht auf dasselbe Objekt und temporäre Daten können nicht im aktuellen Objekt gespeichert werden. Daher kapseln wir ein Paar globaler Cache-Methoden, $put() und $take().

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Aus Gründen der Vielseitigkeit sind die auf Page verwendeten öffentlichen Methoden wie $route, $put und $take alle in einer Page-Basisklasse definiert. Die Basisklasse speichert außerdem gleichzeitig die Liste aller Seiten, sodass die onNavigate-Methode einer bestimmten Seite basierend auf dem Seitennamen aufgerufen werden kann. Natürlich muss nicht jede Seite die onNavigate-Methode implementieren. Für diejenigen, die die onNavigate-Methode nicht definieren, überspringt die Funktion $route den Vorladeschritt und springt direkt zur Seite. Entwickler müssen sich also nicht darum kümmern, was andere Seiten implementieren, und es ist für die Außenwelt völlig transparent.

2. Vorhersage des Benutzerverhaltens

Im obigen Beispiel haben wir die Methode implementiert, bei der Benutzer aktiv auf die Seite klicken und die Daten der nächsten Seite im Voraus laden. In einigen Szenarien kann das Verhalten des Benutzers vorhergesagt werden, und wir können die Daten für die nächste Seite vorab laden, bevor der Benutzer klickt. Lassen Sie die nächste Seite sofort öffnen, was das reibungslose Erlebnis noch weiter verbessert.

Nehmen Sie weiterhin das Tencent Video-Miniprogramm als Beispiel. Die Hauptoberfläche ist in drei Seitenkarten unterteilt (durch einfache Datenanalyse wird festgestellt, dass 50 % der Benutzer das eingeben). Homepage wird die zweite Seitenkarte besuchen. Daher kann das Vorladen der Daten der zweiten Seitenkarte die Öffnungsgeschwindigkeit der nächsten Klickseite des Benutzers erheblich verbessern.

In ähnlicher Weise schauen wir uns zunächst die Code-Implementierung an. So laden Sie die Kanalseite auf der Startseite vorab:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

So implementieren Sie die Kanalseite:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Ähnlich wie im ersten Beispiel wird hier eine $preLoad()-Methode definiert und ein onPreload-Ereignis auf die Seite erweitert. Nachdem die Seite $preLoad() aufgerufen hat, findet die Basisklasse automatisch die der Seite entsprechende onPreload-Funktion und benachrichtigt die Seite, den Vorladevorgang durchzuführen. Anders als im ersten Beispiel werden die vorinstallierten Daten hier im Speicher gespeichert, da der Benutzer möglicherweise nicht sofort auf die Seite zugreift und das Speichern der Daten in globalen Variablen den vom Miniprogramm belegten Speicher erhöht. WeChat zögert nicht, kleine Programme zu töten, die zu viel Speicher beanspruchen.

Vielleicht ist für die meisten Studenten mit Erfahrung in der App-Entwicklung ein gängigerer Ansatz, die Seite zunächst die zuletzt zwischengespeicherten Daten anzeigen zu lassen, dann neue Daten in Echtzeit abzurufen und dann die Seite zu aktualisieren. Bei Miniprogrammen ist diese Methode unter Umständen nicht optimal, da die Leistung und Geschwindigkeit beim Rendern von Seiten bei Miniprogrammen nicht so gut ist wie bei nativen Apps. Die Übertragung großer Datenmengen an die UI-Ebene ist ein aufwändiger Vorgang. Daher wird diese Methode nicht empfohlen.

3. Reduzieren Sie die Größe der Standarddaten

Wie ich gerade erwähnt habe, kopiert WeChat ein Seitenobjekt, wenn eine neue Seite geöffnet wird. Daher sollte auch die Größe der Standarddaten so weit wie möglich reduziert werden als benutzerdefinierte Attribute im Objekt. Es gibt Bilder und es gibt Wahrheiten:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Nimmt man ein Datenobjekt mit 100 Attributen als Testfall, erhöht sich auf dem iPhone 6 die Seitenerstellungszeit um 150 ms.

4. Komponentisierungslösung

WeChat bietet keine Komponentisierungslösung für Miniprogramme (ich glaube, sie muss implementiert werden). Aber wenn wir nicht über Komponentisierung sprechen, wird es vergebens sein, egal wie viel Code wir schreiben. Hier ist eine einfache Komponentenimplementierung.

Nehmen Sie die Tencent-Videowiedergabeseite als Beispiel. Die Seitendefinition lautet wie folgt:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Unter diesen ist die P()-Funktion eine benutzerdefinierte Basisklasse. Dies ist eine sehr nützliche Sache, die in der Basisklasse geschrieben werden kann, einschließlich PV-Statistiken, Quellstatistiken, erweiterten Lebenszyklusfunktionen, Komponentisierung usw.

Der erste Parameter der Funktion ist der Seitenname, der als Schlüssel der Seite verwendet wird. Das zweite ist das Seitenobjekt, das ein Comps-Array erweitert, das alle zu ladenden Komponenten enthält.

Nehmen Sie die Player-Komponente/comps/player/index.js als Beispiel:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

Die Definition der Komponente ist genau die gleiche wie bei einem gewöhnlichen Seitenobjekt, mit Datenattributen wie onLoad, onShow und anderen Ereignissen sowie Rückrufmethoden für die Seitenantwort. Die in der wxml-Vorlage definierten Ereignisse entsprechen eins zu eins den js-Ereignissen.

Die Basisklasse kopiert die Eigenschaften und Methoden dieser Komponentenobjekte in das Page-Objekt (flache Kopie). Die Datenattribute werden zusammengeführt. Die vordefinierten Lebenszyklusfunktionen von WeChat (einschließlich seiner eigenen Erweiterungen) werden in einer Warteschlange gekapselt und sequentiell ausgeführt. Wenn das System beispielsweise die onLoad-Methode aufruft, führt es tatsächlich die onLoad-Methode aller Komponenten aus und führt schließlich das onLoad der Seite aus.

Das Obige ist der Codeteil. Die WXML-Vorlage und die WXSS-Teile müssen manuell importiert werden.

wxml:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

wxss:

So lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen

5. Andere

Obwohl das Miniprogramm klein genug ist, beträgt die Startgeschwindigkeit immer noch 2-3 Sekunden und es kann nicht in Sekunden geöffnet werden. Der Autor versuchte, die Startzeit des Miniprogramms zu optimieren, fand jedoch nicht viele wertvolle Optimierungspunkte. Die Initialisierung einer einzelnen Seite dauert nur 1–2 ms. Möglicherweise wird die meiste Zeit mit der Kommunikation zwischen WeChat und dem Server verbracht.

Glücklicherweise bietet Tencent eine Umgebung für unabhängige Serverleistungstests. Benutzer müssen nur den Domainnamen und ein paar einfache Parameter eingeben, um ihre Serverleistung zu ermitteln. Diese ist derzeit kostenlos auf der Tencent WeTest-Plattform verfügbar.

Verwandte Empfehlungen: Mini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der langsamen Reaktionsgeschwindigkeit von Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Dieser Artikel ist reproduziert unter:csdn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
使用Python开发微信小程序使用Python开发微信小程序Jun 17, 2023 pm 06:34 PM

随着移动互联网技术和智能手机的普及,微信成为了人们生活中不可或缺的一个应用。而微信小程序则让人们可以在不需要下载安装应用的情况下,直接使用小程序来解决一些简单的需求。本文将介绍如何使用Python来开发微信小程序。一、准备工作在使用Python开发微信小程序之前,需要安装相关的Python库。这里推荐使用wxpy和itchat这两个库。wxpy是一个微信机器

小程序能用react吗小程序能用react吗Dec 29, 2022 am 11:06 AM

小程序能用react,其使用方法:1、基于“react-reconciler”实现一个渲染器,生成一个DSL;2、创建一个小程序组件,去解析和渲染DSL;3、安装npm,并执行开发者工具中的构建npm;4、在自己的页面中引入包,再利用api即可完成开发。

Java语言中的微信小程序开发介绍Java语言中的微信小程序开发介绍Jun 09, 2023 pm 10:40 PM

微信小程序是一种轻量级的应用程序,可以在微信平台上运行,不需要下载安装,方便快捷。Java语言作为一种广泛应用于企业级应用开发的语言,也可以用于微信小程序的开发。在Java语言中,可以使用SpringBoot框架和第三方工具包来开发微信小程序。下面是一个简单的微信小程序开发过程。创建微信小程序首先,需要在微信公众平台上注册一个小程序。注册成功后,可以获取到

用Python编写简单的聊天程序教程用Python编写简单的聊天程序教程May 08, 2023 pm 06:37 PM

实现思路x01服务端的建立首先,在服务端,使用socket进行消息的接受,每接受一个socket的请求,就开启一个新的线程来管理消息的分发与接受,同时,又存在一个handler来管理所有的线程,从而实现对聊天室的各种功能的处理x02客户端的建立客户端的建立就要比服务端简单多了,客户端的作用只是对消息的发送以及接受,以及按照特定的规则去输入特定的字符从而实现不同的功能的使用,因此,在客户端这里,只需要去使用两个线程,一个是专门用于接受消息,一个是专门用于发送消息的至于为什么不用一个呢,那是因为,只

PHP与小程序的地理位置定位与地图显示PHP与小程序的地理位置定位与地图显示Jul 04, 2023 pm 04:01 PM

PHP与小程序的地理位置定位与地图显示地理位置定位与地图显示在现代科技中已经成为了必备的功能之一。随着移动设备的普及,人们对于定位和地图显示的需求也越来越高。在开发过程中,PHP和小程序是常见的两种技术选择。本文将为大家介绍PHP与小程序中的地理位置定位与地图显示的实现方法,并附上相应的代码示例。一、PHP中的地理位置定位在PHP中,我们可以使用第三方地理位

教你如何在小程序中用公众号模板消息(附详细思路)教你如何在小程序中用公众号模板消息(附详细思路)Nov 04, 2022 pm 04:53 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了如何在小程序中用公众号模板消息,下面一起来看一下,希望对大家有帮助。

小程序中文件上传的PHP实现方法小程序中文件上传的PHP实现方法Jun 02, 2023 am 08:40 AM

随着小程序的广泛应用,越来越多的开发者需要将其与后台服务器进行数据交互,其中最常见的业务场景之一就是上传文件。本文将介绍在小程序中实现文件上传的PHP后台实现方法。一、小程序中的文件上传在小程序中实现文件上传,主要依赖于小程序APIwx.uploadFile()。该API接受一个options对象作为参数,其中包含了要上传的文件路径、需要传递的其他数据以及

苏州健康码的小程序叫什么苏州健康码的小程序叫什么Oct 24, 2022 am 09:47 AM

苏州健康码的小程序叫“苏康码”,它是苏州市疫情防控指挥部指定的通行服务码,疫情防控期间在全市范围内通用,可以作为广大民众日常出行的重要凭证,同时作为防疫人员查验的主要依据;也是省内所有来苏逗苏人员以及在苏工作学习生活,旅游或临时停留人员申报的键康申报数据为基础,结合相关数据比对后动态生成的个人电子健康凭证。

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools