高度なクロスプラットフォームアプリケーション開発 (56): 異常なアプリケーションレンダリングの問題の分析と解決

記事ディレクトリ

I.はじめに

前回のモバイル端末のメモリ不足によるiOSページの白画面問題に続き、（ブログ記事「高度なクロスプラットフォームアプリ開発 (50) uni-app ios web-view nested H5 project 白画面問題の分析と解決策」を参照）です。システムの実行中に、APP にiOS黒い画面、黒いブロック、白い画面が頻繁に表示されることがわかりました。

ここに画像の説明を挿入

2. 問題分析

上記の問題はページレンダリングの問題が原因で発生します。ページスタックのオーバーフローやアプリケーションのメモリリークが原因である可能性があります。

ページスタック情報を出力した後getCurrentPages()、下部のナビゲーションが切り替えられると、ページスタック情報がクリアされていることが判明したため、ページスタックオーバーフローの問題はありません。

引き続き APP キャッシュクリーニングメカニズムを試し、次のようにクリーニング戦略を策定します。

現在のタブ項目をクリックし、現在のページをスクロールまたは更新してネイティブメソッドを呼び出し、plus.cache.clearアプリケーションキャッシュをクリアします。別のタブアイテムをクリックすると、間違いなくページ切り替えがトリガーされます。

// 点击 tab 时触发
onTabItemTap (e) {
    
    
	// #ifdef APP-PLUS
	plus.cache.clear( function () {
    
    
		console.log( "Clear application cache successful!" );
	});
	// #endif
},

クリーンキャッシュポリシーの実装後、問題は解決されました。

uni.setStorage(OBJECT)このことから、 (macrotask)、uni.setStorageSync(KEY,DATA)(microtask)などの API を呼び出すように派生しuni.downloadFile、uni.saveFileデバイスのメモリに格納されますか?

3.拡張読書

3.1 ページジャンプ

uni.navigateTo(OBJECT)
ページスタックは保持され、navigateBack呼び出しによって返すことができます。ただし、ページスタックオーバーフローの問題があるため、一般的なジャンプ方法としては使えません。
uni.redirectTo(OBJECT)
ページスタックは保持されず、前のページは返されず、デフォルトのpages.json最初のページが返されます。
uni.reLaunch(OBJECT)
ページスタックを破棄し、指定されたページにジャンプします。通常、ログアウトしてホームページに戻るために使用されます。
uni.switchTab(OBJECT)
タブの切り替えに使用します。
uni.navigateBack(OBJECT)
協力しnavigateToて使用するページに戻ります。これにより、ページスタックのオーバーフローを効果的に回避できます。getCurrentPages()現在のページスタックを取得し、返す必要があるレイヤーの数を決定できます。

プロジェクトコードを解析した結果、ルーティングジャンプでページスタックオーバーフロー例外が発生しないことがわかりました。下部のナビゲーションバーが切り替えられると、ページスタックがクリアされます。ページスタックには、同じナビゲーションバーの下にあるページジャンプのみが含まれます。

2 トラブルシューティングのアイデア

特定のビジネスシナリオに従って、ページスタックがオーバーフローしないように、ページジャンプとページリターンを論理的に制御します。getCurrentPages()ページスタックの高さを判断し、webviewオブジェクトの数を確認することで、現在のジャンプ方法が適切かどうかを判断できます。
コードのロジックを確認し、バックグラウンドリクエストが長時間返されないという問題がある場合は、この状況を回避するためにuni.request追加できます。timeout
setInterval作成された ( ) がクリアされていない ( )タイマーがあるかどうか、メモリオーバーフローをチェックしますclearInterval。
uniapp問題自体は、クロスプラットフォームをjs呼び出す必要があるためnative、パフォーマンスは確実に失われます. それが許容できない場合は、ネイティブ言語で開発する必要があります.
キャッシュを削除する場合、データが消去された場合に使用する必要がありますuni.clearStorageSync。

次に、実行中にアプリケーションが占有するメモリをチェックして、メモリリークがあるかどうかを確認する必要があります。

3.2 $nextTick 原則の詳細な分析

Vue応答性を達成するには、データが変更された直後に変更するのではなくDOM、特定の戦略に従って更新する必要がありますDOM。$nextTick次のDOM更新、データを変更した後に使用すると$nextTick、コールバックで更新されたものを取得できDOM、次のDOM更新。

簡単に理解すると、データがで更新およびdomレンダリングされると、関数が自動的に実行されます。Vue上記のデータはupdate のdata直後には更新されませんDOM。つまり、dataデータを変更してすぐにDOM上記の値を取得すると、取得されるのは古い値であり、その中にDOM上記の値を取得する操作を入れます。 $nextTick、更新されたデータを取得できます。

ここに画像の説明を挿入

正しい使い方: vue が data 内のデータを変更した後、vue.$nextTick()メソッドを使用して js オブジェクトをラップし、後続のコードを実行します。

ここに画像の説明を挿入

3.2.1 $nextTick() を使用する場合

Vueライフサイクルのcreated()フック関数で行うDOM操作はVue.nextTick()コールバック関数に配置する必要がある. 理由は,created()フック関数が実行されるとき, DOMは実際には何の描画も行わず, ここでDOM操作を行っても意味がないからである. time. 無駄とは違うので、ここでは DOM 操作の js コードをVue.nextTick()コールバック関数に入れる必要があります。

プロジェクトで関数のデータが変更されdata、新しい dom に基づいて何かを実行したい場合は、新しい一連の js 操作をコールバック関数にDOM入れる必要があります。Vue.nextTick()

3.2.2 $nextTick() の実行原理

VueDOM更新は非同期で実行されます。データの変更が検出される限り、Vueタスクキューが開かれ、同じタイムループで発生するすべてのデータ変更がバッファリングされます。同じものwatcherが、キューにプッシュされるのは 1 回だけです。(バッファリング中のこの重複排除は、不要な計算やDOM操作)

そして、次のイベントループ「tick」で、Vueキューをフラッシュし、タスクキュー (重複排除) の作業を実行します。

VuePromise.then内部的には、非同期キューにネイティブ (マイクロタスク) を使用しようとしますMutationObserver。実行環境がサポートしていない場合は、代わりに (マクロタスク)setImmediateを使用します。setTimeout(fn, 0)

3.3 JS の動作メカニズム

JS実行はシングルスレッドであり、イベントループベースです。イベントループは、次の手順に大別されます。

すべての同期タスクはメインスレッドで実行され、実行スタックが形成されます。
メインスレッドに加えて、「タスクキュー」 ( task queue) もあります。
非同期タスクに実行結果がある限り、イベントは「タスクキュー」に配置されます。
「実行スタック」内のすべての同期タスクが実行されると、システムは「タスクキュー」を読み取り、そこにあるイベントを確認します。それらの対応する非同期タスクは待機状態を終了し、実行スタックに入り、実行を開始します。メインスレッドは、上記の 3 番目のステップを繰り返し続けます。

ここに画像の説明を挿入

メインスレッドの実行プロセスはティックであり、すべての非同期結果は「タスクキュー」を通じてスケジュールされます。「タスクキュー」には、タスクが1つずつ格納されます。仕様では、タスクをマクロタスクとマイクロタスクの2 つのカテゴリに分類することが規定されています。

ここに画像の説明を挿入

3.3.1 マイクロタスク

とも呼ばれjob、通常、現在実行中のスクリプトの直後に発生する処理に使用されます。たとえば、一連の動作に反応する場合や、新しいタスクを作成せずに非同期タスクを実行する場合などです。javascript各タスクの最後に、実行スタックで他に何も実行されていない限り、マイクロタスクキューはコールバック後に処理されます。マイクロタスク中にキューに入れられた他のマイクロタスクは、このキューの最後に追加されます。

一般的なマイクロタスクはMutationObsever、、、ですPromise.then。$nextTiock

3.3.2 マクロタスク

javascript / domマクロタスクの役割は、ブラウザが内部からコンテンツを取得できるようにし、実行スタックが順次処理できるようにすることです。HTML の解析、マウスクリックイベントのコールバックの取得など、スケジューリングはいたるところにあります。

一般的なマクロタスクはsetTimeout次MessageChannelのとおりですpostMessage。setImmediate

vueDOM 更新の場合、非同期キュー制御のために内部的にも呼び出されますnextTick。自分で呼び出すとnextTick、DOM を更新するマイクロタスクの後に独自のコールバック関数が追加され、DOM が更新された後にコードが実行されるようになります。

setTimeoutマクロタスクであり、遅延実行のみであり、遅延実行方式ではDOM更新される場合とされない場合があります。

3. ソリューション

注意⚠️:

uni-appアプリ側の組み込みHTML5+エンジンにより js は豊富なネイティブ機能を直接呼び出すことができます。

条件付きコンパイルの呼び出しHTML5+: アプレットや H5 などのプラットフォーム用のHTML5+拡張ため、の拡張仕様を呼び出すuni-app場合は、条件付きコンパイルの使用に注意する必要があります。HTML5+そうしないと、h5 やアプレットなどのプラットフォームで実行したときにplus is not definedエラー。
```
// #ifdef APP-PLUS
var appid = plus.runtime.appid;
console.log('应用的 appid 为：' + appid);
// #endif
```
uni-appロジックレイヤーはjscore、ローカルマシンに依存しない独立した環境で実行されるwebviewため、一方ではブラウザーの互換性の問題がなく、その上でコードAndroid4.4を実行es6できますが、他方では、window、document、navigator、localstorage他のブラウザー固有の jsを実行することはできません。 API。

jscore標準のjsエンジンで、if、for、各種文字列、日付処理など、標準のjsが正常に動作します。js とブラウザの違いを区別する必要があります。
uni-appjsは実行されず、独立しているwebkit remote debugため、アプリ側にアプリなどはありません。uni-appwebviewjscore
ブラウザGUI レンダリングスレッドとJS エンジンスレッドは相互に排他的であるため、JS エンジンが実行されると、JS エンジンの実行が終了するまで GUI スレッドは中断されます。ページに長いタスクが多数ある場合、ページ UI がブロックされ、インターフェイスが動かなくなり、フレームがドロップされます。

GUI レンダリングスレッドhtml、css: ページの描画とレンダリング、リソースの解析、DOM ツリーの生成、およびページの描画を担当する、よく知られているすべてのスレッドがこのスレッドを担当します。
JS エンジンスレッド: すべての非同期および同期タスクの js 解析と実行、実行スタックの維持、最初に同期コードを 1 つずつ処理する責任を負います。非同期タスクに遭遇すると、イベントを使用してスレッドをトリガーします。

ブラウザのプロセスとスレッドの情報は次のとおりです。
ここに画像の説明を挿入
そのうち、フロントエンドは主にブラウザカーネルのレンダリングプロセスに焦点を当てています。ブラウザカーネルは主にhtml、css、jsリソースの解析とレンダリングを担当し、イベントループと非同期リクエストも担当します。 .

データストレージ: uni-app のキャッシュと H5 キャッシュはメモリに保存されますか?

ネイティブplus Storageモジュールは、アプリケーションデータの保存と読み取りに使用される、アプリケーションのローカルデータストレージ領域を管理します。アプリケーションローカルデータととの違いは、データが異なるドメインで有効であるlocalStorageことです. 前者はアプリケーション内のドメイン間で操作できます. データの保存期間は永続的で、容量制限はありません. アプリケーションローカルデータ管理オブジェクトは、から取得できます。sessionStorageplus.storage
uni-appアプリケーションuni.setStorage(OBJECT)(マクロタスク) およびuni.setStorageSync(KEY,DATA)(マイクロタスク) がデータを保存する場合、本質的にはネイティブを使用しplus.storage、サイズの制限はなく、キャッシュではなく、sqlite永続化のためにデータベースファイルにデータを保存することです。
このアプリは、SQLiteやIO ファイルなどのローカルストレージソリューションもサポートしています。
H5 アプリケーションlocalStorageとsessionStorageデータストレージの場合、ブラウザーはサイズを 5M に制限します。これはキャッシュの概念であり、クリーンアップされる可能性があります。
アプリケーションはVuex状態管理を実装します。
ネイティブplus.cache管理アプリケーションのキャッシュデータにはwebview、プログラムで生成されたデータのみが含まれ、拡張機能api( uni.setStorage(OBJECT)(マクロタスク)、uni.setStorageSync(KEY,DATA)(マイクロタスク) およびその他の API など) を使用してビジネスロジックに保存されたデータは含まれません。
各アプレットには独自のが付属しておりstorage api、データストレージのライフサイクルはアプレット自体と一致しています。つまり、ユーザーが積極的に削除したり、一定期間後に自動的にクリーンアップされたりしない限り、データは常に利用可能です。
uni-appフレームワークコンポーネント自体で解決できない問題については、フレームワークコンポーネントを破棄し、ネイティブコンポーネントを使用して最適化することができます。

最後に、下部のタブを切り替えるときにキャッシュクリーニングを行うことを選択します (ここでのキャッシュクリーニングは、plus.cache.clearアプリケーションのキャッシュデータをクリアするために使用されることに注意してください)。アプリケーションキャッシュデータのクリアには、プログラムでの使用によって生成されたデータのみが含まれ、ビジネスロジックの拡張機能によって保存されたデータはwebview含まれません。apiコードは以下のように表示されます:

// 点击 tab 时触发
onTabItemTap (e) {
    
    
	console.log('-----------点击 tab 时触发-----------', e);
	// #ifdef APP-PLUS
	plus.cache.clear( function () {
    
    
		console.log( "component Clear application cache successful!" );
	});
	// #endif
},