質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

4108閲覧

SmartyによるAjaxレスポンスの生成の描画速度が遅い

ms5025

総合スコア292

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/12/07 06:32

編集2018/12/11 01:17

前提・実現したいこと

SmartyによるAjaxレスポンスの生成の描画速度が遅いのでどうにかしたいです

現在Ajaxで取得したデータに基づいて、一部ページhtmlの内容を書き換える動きをしています。
簡単なイメージでいうと、左半分の項目をクリックすると
右半分に対応するデータが非同期で表示されるといった感じです。

データが多い場合は右半分のデータ部分を改ページさせるため、等間隔で切ったセクションの一部のみshow
他はhideにしています。(jqueryでshow hideで改ページさせています)

発生している問題・エラーメッセージ

右半分に表示するデータ量が多い場合、レスポンスで帰ってきたhtmlの描画に時間がかっているようです
データの取得自体には時間がかかっておらず、
データが返ってきてから描画をするのに時間がかかっているようです。

描画速度を上げるためにできることはあるでしょうか?
また、そもそもこのようなデータ量の場合非同期通信でデータを取得すること自体が誤りなのでしょうか?
(改ページや項目選択でsubmitさせないでほしいという要件があったためこうなりました)

php

1 2class HagehageController extends AbstractActionController { 3 4 /** 5 * @return View 情報取得 6 */ 7 public function hogehogeAction() { 8 9 // 共通処理 10 require_once('共通処理.php'); 11 12 // 情報取得 13 $results['itemList'] = LibsHoge::getSearchItem($params['paramCD1'], $params['paramCD2'], $$params['searchText']); 14 15 // smartyのview表示 16 Smarty::render($params, $results); 17 18 } 19 20} 21 22共通処理.php内で$paramsにポストデータをセットしていたり 23Actionに対応するtplや表示に必要な物が共通処理として$resultsにセットしてあります。(フレームワークはzendを使用)

js

1 2 // 〇〇コード 3 var paramCD1 = $('#paramCD1').val(); 4 // 〇〇コード 5 var paramCD2 = $('#paramCD2').val(); 6 // キーワード 7 var searchText = $('#searchText').val(); 8 9 10 $.ajax({ 11 type: 'GET', 12 url: "hogehoge", 13 dataType: 'html', 14 data: {"paramCD1": paramCD1, "paramCD2": paramCD2, "searchText": searchText} 15 }).done(function (html) { 16 var $list = $(".itemList"); 17 // リスト内クリア 18 $list.empty(); 19 // レスポンス結果アペンド 20 $list.append(html); 21 22 }).fail(function(jqXHR, textStatus, errorThrown) { 23 //エラー処理 24 });

js

1 2<section class=""> 3 <div> 4 <assid > 5 <h4> 6   <span id="prev" data-action="prev"><<前回</span> 7 <span id="next" data-action="next">次回>></span> 8 </h4> 9 </assid> 10 </div> 11 <section > 12 {foreach from=$results.itemList key=key item=items} 13 <li class=""> 14 <section class=""> 15 <!-- 商品画像 --> 16 <figure"> 17 <img src="{$items.商品画像}"/> 18 </figure> 19 <dl class="itemInfo"> 20 <dt> 21 品番:{$items.品番} 22 </dt> 23 <dt class=""> 24 {$items.商品名} 25 </dt> 26 <dt class=""> 27 {$items.価格} 28 </dt> 29 <!-- 以下商品の情報続く・・・ --> 30 </dl> 31 </section> 32 </li> 33 <!-- 最大商品数ごとにセクション区切り --> 34 {if (($key+1)%{$smarty.const.1ページ最大商品数} ==0)}</section><section>{/if} 35 {/foreach} 36 {/if} 37</section > 38

追記★
上記tplではclass名を削除してありますが、
sectionのclassをhogeMenuとしてあります。
cssで'selected'classに対してshow状態を設定してあります。
初回1ページ目のsection以外は'selected'のclassがないためhide状態です。
下記は必要部分だけ抜き出してありますが
これに最大ページ数の制御などが追加されています。

css

1 2/*pager*/ 3.hogeMenu { display: none; } 4.hogeMenu.selected { display: block; }

js

1// 改ページ制御 2$(document).on('click', '.改ページclass', function () { 3 4 var current = parseInt($('.hogeMenu.selected').index('.hogeMenu')); 5 if ($(this).is('.prev') && current !== 0) { 6 current = current - 1; 7 $('.hogeMenu').removeClass('selected').eq(current).addClass('selected'); 8 $('body,html').animate({scrollTop: 0}, 0); 9 } else if ($(this).is('.next')) { 10 current = current + 1; 11 $('.hogeMenu').removeClass('selected').eq(current).addClass('selected'); 12 $('body,html').animate({scrollTop: 0}, 0); 13 } 14 current = current + 1; 15 16 // ページボタン制御 17 $('.prev').show(); 18 $('.next').show(); 19 if (current == 1) 20 { 21 $('.prev').hide(); 22 } 23 24}); 25

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/07 06:48 編集

問題が発生しているコードをご提示ください。「このようなデータ量」と言われましても具体的なデータがないので判断しかねます。
m.ts10806

2018/12/07 06:45

描画はそもそも負荷の高い処理なので総量次第では致し方ないところはある前提です
ms5025

2018/12/10 00:31

申し訳ありません、大体のイメージですが、1ページ12個の商品画像(割とサイズは小さめです)と商品説明(色品番商品名個数のコンボボックス)が 3000件、300ページ分です。
m.ts10806

2018/12/10 00:52

問題が発生しているコードをご提示ください。(こちらの方が大事)
m.ts10806

2018/12/10 00:53

ただ、おおよそ現在でている回答でも解決は可能にも思います。エンドユーザ優先でもありますし。
kei344

2018/12/10 01:31

「show hideで改ページ」とは?問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。
ms5025

2018/12/10 02:04

>mts10806コードを追加しましたが、もちろんそのまますべて表示するわけにもいかず、tpl側もデザイナーさんが作ったクラスをそのまま表示するわけにもいかず、一部抜き出しとなります。そうなると、おそらく言葉で質問した以上の情報にはならないのかなと思います。データ件数等に関しては未記入で申し訳なかったです。ちなみにLibsHoge::getSearchItemで3000件ほどの商品情報(いわゆる普通の商品コード、商品名、価格、個数、等のデータ)が返ってきますがここに時間はかかっていません。ajaxで戻ってきた後、描画で時間がかかっています。
ms5025

2018/12/10 02:06

>kei344 <liタグを最大商品数でセクションで区切って、それ以外はhideにしています。次ページを押下されると次のセクションがshowとなり、それ以外はhideとなります。
kei344

2018/12/10 02:09

「liタグを最大商品数でセクションで区切って、それ以外はhideにしています。」は提示できないのでしょうか。
ms5025

2018/12/11 01:19

>kei344 それはcssでhideにしてるだけなんで・・・それ以外にどういえば・・・。あげる必要あります?一応clickタイミングの処理も追加しましたがこちらはあまり関係ないですよね。
ms5025

2018/12/11 01:26

>kei344さん すいません上記tplでclass名を軒並み抜いているので意味不明でしたね。実際はsectionに対してclassがあり、selectedのついたセクションのみshow状態にしているだけです。
guest

回答2

0

ベストアンサー

自分の場合ですと、htmlだけを送信してもらう場合はそこまで遅いと感じたことはないです。
プラスアルファで画像なんかを送っている場合は遅いことがあります。
その場合は極力画像サイズを小さくして送っています。

データ通信の詳細(画像なのかタグだけなのか、データ量とか)がわかりかねるので微妙な回答になりますが。
データ通信を要する場合においては極力ローカルで完結できるような通信手段をとるべきだと思います。
それが通信はできていて描画が不安定だというのならば通信して取得してきたデータサイズに問題もあるような気がします。
あと、受信データを小出しで取得するという手もありますが、データの種類によっては難しい場合もあるのでなんとも言えません。

投稿2018/12/07 08:47

Tololololo

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ms5025

2018/12/10 00:30

>プラスアルファで画像 画像もあります。サイズは小さいですが1ページ12個の商品画像と商品説明が 3000件、300ページ分です テスト環境ではせいぜい300件10ページ程度でしかテストしていませんでした。 分類に分かれているので通常使用ではそのようなことには ならないようですが大部分にヒットする検索項目で検索した場合などはそのような結果になることがあります。 エンドユーザ様的にそれでかまわないということなので どうしようかと思っています。 「しょうがない」ということなら一定件数以上の場合検索速度が遅くなりますがよろしいですか?といったアラートを出そうかと思っているのですが・・・
Tololololo

2018/12/10 03:49 編集

3000件300ページ分の情報をまとめて全部持ってくるという仕様にはしていないと思いますが、 もしそうならば検索の方式については変えてもいいかなっと思います。 例えば、 1000000件の検索結果を扱うとします。 検索結果が画面内に収まるのはこのうちの10件程度だとします。 この場合、一回の検索で1000000件全て持ってくるのではなく、 10件ずつにするのも手かと思います。 どのみちそうしていくとトータルでの描画数が増えていくと思いますが、それはスクロール領域のサイズはそのままにして描画だけを消していくというのもいいと思います。 そうやって省メモリ化を行いつつ、消した描画をまた表示したい場合はもう一度取得してきて、見えていない表示部分はまた消していくって感じです。 こうすることで、省メモリ化が実現できることとアラートを出す必要も無くなります。 この機能を実現するためにはスクロール量によって条件分岐をするコードをJS&Ajaxによって実現させるのがもっとも良いかと思います。
Tololololo

2018/12/10 03:53 編集

ありゃすいません、先のコメントよく読んでませんでした。 スクロールで表示がNGということのようですが、 私は他にベストな方法が浮かばないので、スクロールによって"取得->表示"の際のスクロール位置を画面外において、見えないところで常に取得させ続ければ外見上は無限スクロール状態になるはずです。
ms5025

2018/12/11 01:01

丁寧な回答ありがとうございました! 私も情報が足りませんでした、申し訳ありません。 よくあるスクロールしながら表示はNGでボタン改ページでお願いしますとのことでした。 でもよく考えたら、改ページごとにsubmitするのはNGなだけだったので 改ページボタン押下タイミングで次ページ情報取得のajax走らせたらいいんでしょうかね。 けど1ページ横3商品×4列の12商品程度の小さな情報をを改ページごとに取得処理走らせるのって ちゃんとイケてる処理なんでしょうか・・・。 けどその方が再度マスタから最新情報取得できるので安全な気もしてきました・・・
Tololololo

2018/12/11 04:15

現段階でイケてる処理かどうかはms5025さんにしかわからないです。 通信&描画共に速度を出すためにサーバーがどの程度までの膨大な通信を可能としてくれるのか、圧縮などの処理は必要か、データ分割は必要か、データそのものを取得せずURLだけを取得することで軽くできないかなど。 それによって最適な処理を書いていければイケてる処理にはなるはずです通信は。 しかし、描画が遅いことがネックならばデータ取得後の自分の書いたコードを見直してみましょう。 キャッシュを使わずに毎回データを更新していないかとか、余計な処理を書いていないかとか。 安全面を考慮するならサーバーの通信とデータ授受の方法そのものを見直してください。
ms5025

2018/12/11 05:45

了解しました。ありがとうございました!
guest

0

スピード重視なら、もしjson→dom的なことをやっているならその処理をすっとばし
サーバー側でhtml形式でデータを出力してもらい、そのまま流し込むようにすることでしょう

投稿2018/12/07 06:44

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ms5025

2018/12/10 00:24

Smartyでtplのviewをそのままレスポンスで返して js側ではhtmlで受け取りそのままそれをアペンドしているのですが これではやはり遅いのでしょうか?
yambejp

2018/12/10 00:35

単に量が多いだけなら、一度に取り込む量を調整して、画面に表示する部分だけ 描画すればよいでしょう。 スクロールするたびに順次データをとりにいって追加描画すればさほど 1ページのスピードは遅くならないはずです
ms5025

2018/12/10 01:21

スクロールされるたび表示というよくあるあのタイプはNGが出ています。 そうなると改ページ事に取得ということになるのでしょうか。 ありがとうございます。仕様のほうの改正を考えてみます。
yambejp

2018/12/10 01:28 編集

> あのタイプはNG あらそうですか、そうなると無尽蔵のCPUパワーと、高速大容量のメモリ ストレスないネットワークを用意すれば、ブラウザのレンダリングエンジンが 優秀なら運が良ければ一瞬で表示されます。 質問者さんがおっしゃっている解決策とはそういうことです。 たとえばgooglemapで町内を表示しようとおもったとき 世界地図を全部読み込んでから表示するようなやり方です
ms5025

2018/12/11 01:02

なるほどそうなりますよね。 ということは仕様のほうでカバーってことですよね。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問