私はjquery mobileを初めて使用するので、これは些細な質問かもしれません。jquery mobile のドキュメントが一元化されていないという事実により、これを stackoverflow に投稿する必要があります。
現在、リストビューをロードしようとしていますが、リストビューのすべてのアイテムは次の構造になっています。オプション ボタンは、その下に可変数のボタンを持つコントロール グループ ボタンであり、JSON から受け取ります。
現在、約 250 個のオブジェクトがあり、それらは 85 KB の JSON を介してサーバーから取得されます。コンテンツの動的な性質のため、データのキャッシュは少し注意が必要です。
このページの読み込みに 15 秒近くかかるという問題が発生しています。その原因を突き止めるために、リスト項目を動的に作成する for ループ内にタイムスタンプ値を追加しました。
興味深いことに、コントロール グループの HTML の作成中に、14 秒のうち最大 12 秒という主要なボトルネックが発生します。
これは、HTML についてのアイデアを提供するためのオプション ボタンの画像です。
リスト アイテムの動的コントロール グループのレンダリングがなぜそれほどの遅延を引き起こしているのか知りたいです。グループ化されたボタンも動的であり、JSON から受信されるため、コントロールグループをキャッシュする方法がわかりません。
<
これについてのフィードバックをお待ちしております。
ありがとうラジャット
EDIT コード スニペットが追加されました。このルーチンを使用して、すべてのリスト項目を生成します
foreach ($jsonArray AS $item) {
アダプタを表示
echo '<li>';
if($item['reactionCount'] > 0) {
echo ' <a href="/planner/reactionbox/id:'. $item['jobId'] . '">';
if(isset($item['requiresAction'])) {
echo ' <span class="ui-li-count redBubble" style="background:#088A08"> </span>';
} else {
echo ' <span class="ui-li-count redBubble" style="background:#6E6E6E"> </span>';
}
} else {
echo ' <a href="/planner/job-details/id:'. $item['jobId'] .'" name=\"job' . $item['jobId'] . '\">';
}
echo '<img style="float:left; padding: 11px 0px 0px 11px; width: 66px; vertical-align:middle;"
src="' . (($item['imageUrl'] != '') ? $item['imageUrl'] : '/img/website/profilephotodummy.png') . '" alt="dummyphoto" />
<h3>' . $item['firstLine'] . '</h3>
<p><strong>' . $item['secondLine'] . '</strong></p>
<p>' . $item['thirdLine'] . '</p>
<p class="ui-li-aside"><strong>' . $item['optionalLine'] . '</strong></p>
</a>';
if(isset($item['actions'])) {
echo '<div data-role="controlgroup" data-type="horizontal" style="margin-left: 15px;" data-mini="true">
<select data-native-menu="false" data-theme="b" data-inline="true" data-mini="true" data-icon="gear" onchange="doJobAction(\'' . $currentUrl . '/\'+this.value); this.selectedIndex=0;">
<option>' . __d('website','opties',true) . '';
foreach ($item['actions'] AS $value) {
# for every action from the JSON generate an action button dynamically ...
if($value == 'annuleer_opdracht') {
echo '<option value=" ' . $currentUrl . '/cancelJob:' . $flexbox['jobId'] . ' ">annuleer</option>';
} else if($value == 'zoek_opnieuw') {
echo '<option value="' . $currentUrl . '/newSearchJob:' . $flexbox['jobId'] . '">zoek opnieuw</option>';
} else if($value == 'publiceer_externe') {
echo '<option value="' . $currentUrl . '/openForFreelancer:' . $flexbox['jobId'] . '">publiceer externe</option>';
}
}
echo '</option></select></div>';
}
echo '</li>';
}