画面に出力されるまでの時間と順番

###前提・実現したいこと
文字列演算子を使って「順次表示される例」を書き換えたところ、
読み込みが終わるまで何も表示されなくなりました。

少なくとも『Start...』だけは、読み込みが終わるのを待たずに表示したいと思い、
「読み込みが終わるまで何も表示されない例」の様に書きましたが変化ありませんでした。

文字列演算子の方も順次表示できれば望ましいのですが、
『Start...』を最初に表示させる方法のみでもご教示頂ければ幸いです。

###順次表示される例

PHP
1<!doctype html>
2<html>
3<body>
4<?php
5echo 'Start...';
6$i = 1;
7while ($i <= 5)
8{
9    echo $i++;
10    ob_flush();
11    flush();
12    sleep(1);
13}
14echo '...End';
15?>
16</body>
17</html>

###読み込みが終わるまで何も表示されない例

PHP
1<?php
2$start = 'Start...';
3$num = '';
4$i = 1;
5while ($i <= 5)
6{
7    $num .= $i++;
8    sleep(1);
9}
10$end = '...End';
11?>
12<!doctype html>
13<html>
14<body>
15<?php
16echo $start;
17ob_flush();
18flush();
19echo $num, $end;
20?>
21</body>
22</html>

行動規範の内容に同意します

回答2件

ob_flushでググると、以下のサイトがマニュアルの後に表示されます。
PHPでプログレス表示を行うには？

最近はググると何でも分かりますね。参考にされてください。

投稿2017/07/15 05:00

shi_ue

総合スコア4437

最終的に何がしたいのかよく分かりませんが、解説と回答を。

読み込みが終わるまで何も表示されない例の解説

php
1while ($i <= 5)
2{
3    $num .= $i++;
4    sleep(1);
5}

まず、ここで５秒の処理が入ります。
ブラウザの画面には何も表示しません。

php
1echo $start;
2ob_flush();
3flush();
4echo $num, $end;

$startの中身を出力した後、
ob_flush(),flush()で画面に表示させます。

その後、すぐに$num, $endの中身も表示させますが、
この部分は残りの処理が終わるまで画面表示しない部分ですが、
残りの処理がないため、人の目には全て同時に表示される形になっています。

ためしに、以下のプログラムで実行すれば、分かるかと思います。

php
1echo $start;
2ob_flush();
3flush();
4sleep(3); // 追加
5echo $num, $end;

少なくとも『Start...』だけは、読み込みが終わるのを待たずに表示したい

php
1<?php
2$start = 'Start...';
3$num = '';
4$i = 1;
5// ↓時間のかかる処理を移動
6// while ($i <= 5)
7// {
8//     $num .= $i++;
9//     sleep(1);
10// }
11// ↑時間のかかる処理を移動
12$end = '...End';
13?>
14<!doctype html>
15<html>
16<body>
17<?php
18echo $start;
19ob_flush();
20flush();
21// ↓時間のかかる処理を移動
22while ($i <= 5)
23{
24    $num .= $i++;
25    sleep(1);
26}
27// ↑時間のかかる処理を移動
28echo $num, $end;
29?>
30</body>
31</html>

文字列演算子の方も順次表示できれば望ましい

php
1<?php
2$start = 'Start...';
3$num = '';
4$i = 1;
5// ↓時間のかかる処理を移動
6// while ($i <= 5)
7// {
8//     $num .= $i++;
9//     sleep(1);
10// }
11// ↑時間のかかる処理を移動
12$end = '...End';
13?>
14<!doctype html>
15<html>
16<body>
17<?php
18echo $start;
19// ↓時間のかかる処理を移動
20while ($i <= 5)
21{
22	// ↓表示を分割・移動
23	// $num .= $i++;
24	$num = $i++;
25	echo $num;
26	ob_flush();
27	flush();
28	// ↑表示を分割・移動・追加
29    sleep(1);
30}
31// ↑時間のかかる処理を移動
32// ↓表示を分割・移動
33// echo $num, $end;
34echo $end;
35// ↑表示を分割・移動
36?>
37</body>
38</html>

投稿2017/07/15 13:11

tomari_perform

総合スコア760

退会済みユーザー

2017/07/16 01:24

@tomari_performさんありがとうございます。文字列演算子を使ってHTMLとPHPを分離した理由は、時間が掛かる処理の後にリダイレクトした場合、下記の警告が表示されるためで、別条件ゆえ割愛しました。 > Warning: Cannot modify header information - headers already sent by... ```PHP <?php $start = 'Start...'; $num = ''; $i = 1; // ↓時間のかかる処理を移動 // while ($i <= 5) // { // $num .= $i++; // sleep(1); // } // ↑時間のかかる処理を移動 $end = '...End'; ?> <!doctype html> <html> <body> <?php echo $start; ob_flush(); flush(); // ↓時間のかかる処理を移動 while ($i <= 5) { $num .= $i++; sleep(1); } // ↑時間のかかる処理を移動 echo $num, $end; header("Location: __FILE__"); ?> </body> </html> ```

tomari_perform

2017/07/16 14:48

> 文字列演算子を使ってHTMLとPHPを分離した理由 →こちらもよく分かりませんが、　HTMLとPHPを分離　等の議論であれば、　MVCモデルについて、チラ見してみると良いかもしれません。　あと、PHPとHTML（JavaScript）の得意としている分野の理解、　JavaScriptからPHPを呼び出して処理を行う場合のjquery等、　理解を深める事をおすすめします。　　なお、エラーについては、0K-R3Bさんが追加した　「header("Location: __FILE__");」がob_flush();と干渉しているのが原因です。　ob_flush();でブラウザ側にheader情報を既に送っており、　その後に、header();で書き換えようとしても書き換えられない、というエラーです。　処理が終わったらページ遷移させたいだけであれば、　metaタグのhttp-equiv="refresh"を使うか、　javascriptのwindow.onload内で、location.hrefを使えば、遷移ができて、エラーも取れます。

行動規範の内容に同意します

あなたの回答