Web Nielsen [3] Web Web (1) (2) Web (3) (4) Web (3) Web [4] Web [1], [4], [5] Web Web Web Web Web Web PHP Web 2 3 Web Dahlan [5]

Transcription

1 Web 1, 1,a) 1,b) , Web Web Web Web Web Web Web Web Web PHP Web Ajax Web Web A Prefetching Framework for Dynamic Web Applications Kazuki Shibata 1, 1,a) Shingo Takada 1,b) Received: May 9, 2012, Accepted: November 2, 2012 Abstract: Prefetch is a technique to speed-up Web applications. It can save the time needed for page transition by downloading in advance Web pages from the server to the client. There are various approaches for prefetching. The conventional approach can handle static Web applications, but not dynamic ones. However, few applications are composed solely of static pages. Thus, we need to be able to prefetch dynamic Web applications. This is difficult because although it may be possible to predict where a user clicks, it is not possible to predict what a user will input into a form, etc. We propose an approach for prefetching dynamic Web applications (PHP applications). The basic idea is to divide Web pages into static and dynamic contents. The static contents can be obtained in advance by using link prefetch, and the dynamic ones can be complemented later by using Ajax. Keywords: dynamic Web application, prefetch 1. Web 1 Keio University, Yokohama, Kanagawa , Japan 1 Presently with Yahoo Japan Corp. a) shibata@doi.ics.keio.ac.jp b) michigan@ics.keio.ac.jp [1] Web Linden [2] Google % Amazon 100 c 2013 Information Processing Society of Japan 647

2 Web Nielsen [3] Web Web (1) (2) Web (3) (4) Web (3) Web [4] Web [1], [4], [5] Web Web Web Web Web Web PHP Web 2 3 Web Dahlan [5] de la Ossa [1] Dahlan Asynchronous Predictive Fetch APF [5] APF de la Ossa Web de la Ossa Web Web Web Web 2.2 Fisher Web [6] (1) HTML <link> (2) HTML <meta> (3) HTTP 3 big.jpg <link> <link rel= prefetch href= big.jpg > <meta> <meta HTTP-EQUIV= Link CONTENT= <big.jpg>; rel=prefetch > Link: <big.jpg>; rel=prefetch c 2013 Information Processing Society of Japan 648

3 情報処理学会論文誌 Vol.54 No (Feb. 2013) 2.3 既存のプリフェッチ手法の問題 Dahlan らの手法および de la Ossa らの手法は いずれ も静的 Web アプリケーションを対象にしているため た とえばフォームの入力により遷移先ページが変わるよう な動的 Web アプリケーションは扱えない Dahlan らの手 法は さらにクライアント側で実装するために ブラウザ に専用ソフトウェアを組み込まなくてはならない そのた め ユーザの入力により内容が変わるような Web ページ に対して対応する必要がある Fisher らの手法も特に動的 Web アプリケーションに直 接対応しているわけではない また Web ブラウザが通 知された情報を解釈し それに基づいてサーバからプリ フェッチ対象を取得できなければならないが 現在 Firefox などの Web ブラウザはリンクプリフェッチを標準的にサ 図 1 提案機構における事前処理 Fig. 1 Preprocessing. ポートしている 3. 提案 動的 Web アプリケーションのプリ フェッチ機構 本章では 動的な Web アプリケーションのためのプリ フェッチ機構を提案する 本機構の主要部分はサーバ側に あり クライアント側に対して特別なアッドオンをしなく ても利用できる なお 提案機構は PHP アプリケーショ ン Web アプリケーション中の PHP ファイル を対象と する 3.1 概要 ユーザのクリック先は予測できても ユーザが直接入力 する内容までは予測することはできない そこで 本提案 機構は次の 2 点を基本方針とする 図 2 提案機構における実行時処理 Fig. 2 Runtime processing. 静的コンテンツはリンクプリフェッチを用いて先に取 得する 動的コンテンツは Ajax Asynchronous JavaScript & XML の技術を用いて後から補完する と データ渡しに関する JavaScript コードの挿入 3.3 節 がある 後者のデータ渡しは Cookie を用いて 実行中 にブラウザから入力した情報を キャッシュにある静的コ サーバから Web ブラウザへのプリフェッチ対象の指定 ンテンツにデータを渡したり サーバ側にあるアプリケー および 指定されたプリフェッチ対象の取得については を可能に ションに渡したりするためであり 図 2 既存技術を利用する 具体的には Fisher らが提案したリ する 事前処理が終わった後 両コンテンツを Web サー ンクプリフェッチ [6] を利用し Web ブラウザが Firefox バ上にデプロイする などリンクプリフェッチに対応していることを前提とす 各静的コンテンツに対するプリフェッチ対象は 過去 る また どのファイルをプリフェッチ対象にするかを指 のアクセス履歴を参考に決定する この情報は.htaccess 定するために.htaccess ファイルを利用するため サーバ ファイルに記載し アクセスの仕方の変化に対応するため は Apache であることを前提とする 項 定期的に更新する 図 2 提案機構の処理 図 1 と図 2 は PHP アプリケーショ アプリケーション実行中の処理については 静的コンテ ンに対する事前処理 プリフェッチ対象に関する情報の定 ンツのプリフェッチと動的コンテンツの挿入がある 静的 期的な更新処理 アプリケーション実行中に行われる処理 コンテンツのプリフェッチについては 従来のリンクプ の大きく 3 種類がある リフェッチの手法と同様に ある静的コンテンツがプリ PHP アプリケーションに対する事前処理が本提案の中心 フェッチ対象と指定されていれば クライアントのブラウ である 事前処理 図 1 として PHP アプリケーションを ザにその静的コンテンツを送信し ブラウザのキャッシュ 静的コンテンツと動的コンテンツに分離する処理 3.2 節 節 に保存する 図 2 c 2013 Information Processing Society of Japan 649

4 JavaScript submit 2 3 Cookie JavaScript 2 4 Cookie Web Ajax 2 5 Ajax JavaScript.htaccess 3.2 Web 1 PHP <?php?> PHP TMP Ajax JavaScript 3.3 <?php?> <divide> PHP Web <a> href <form> action b.php b.html JavaScript Web 3 Fig. 3 Reconnecting the links. <form method="post" action="a.php"> <input type="text" name="id" /> <input type="submit" value=" " /> <form method="post" action="b.php"> <input type="text" name="content" /> <input type="submit" value=" " /> </form> </form> 4 Fig. 4 Page transition via button. Cookie JavaScript (1) Cookie 2 3 (2) Cookie (3) Cookie JavaScript 2 4 (4) Ajax 2 5 JavaScript JavaScript jquery [7] JavaScript Web Cookie POST 4 id a.php content b.php POST HTML 2 1 <button> 1 <input> type button submit reset c 2013 Information Processing Society of Japan 650

5 1: $(":submit").click(function() { 2: var elements = $(":input"); 3: for (var i = 0; i < elements.length; i++) { 4: if(elements[i].getattribute("type")!= "submit"){ 5: document.cookie = elements[i].getattribute("name") + "=" + elements[i].value + ";"; 6: } 7: } 8: }); 5 cookie JavaScript Fig. 5 JavaScript code for saving user input to Cookie. DOM Document Object ModelonClick ( 1 ) onclick Form input textarea name value (2) DOM (3) cookie (4) Web (1) (4) 2 3 JavaScript 5 jquery 1 :submit 2 :input HTML submit click submit 1 2 jquery input input text area select button 4 5 type submit Cookie Cookie WWW Cookie JavaScript 6 Cookie key value 1 2 document.cookie Cookie 3 ; 2 Cookie 1 : var key = new Array(); 2 : var value = new Array(); 3 : var cookie_set = unescape(document.cookie).split( ; ); 4 : for(var i = 0; i < cookie_set.length; i++){ 5 : var set = cookie_set[i].split( = ); 6 : key[i] = set[0]; 7 : value[i] = set[1]; 8 : } 6 Cookie JavaScript Fig. 6 JavaScript code for reading Cookie. unescape(document.cookie) 5 Cookie key value 6 7 key value Cookie Ajax (1) cookie (2) Ajax <divide> PHP TMP (1) 2 4 (2) 2 5 JavaScript 7 1 jquery filename key value 2 7 data String 2 <divide> 3 Web 4 6 PHP TMP 7 c 2013 Information Processing Society of Japan 651

6 1 : $.post( filename, {key: value},function(data){ 2 : var php_str = data.split( <divide> ); 3 : var str = document.getelementsbytagname( html )[0].innerHTML; 4 : for(var i = 0; i < php_str.length; i++){ 5 : str = str.replace( PHP_TMP +i, php_str[i]); 6 : } 7 : document.getelementsbytagname( html )[0].innerHTML = str; 8 : }); 7 Cookie JavaScript Fig. 7 JavaScript code for sending Cookie information and showing result. 8 Fig. 8 Final result. Web 8 PHP TMP 3 PHP TMP <divide> 3.4 Web 2 (1) Web (2).htaccess 2 (1).htaccess (2).htaccess Fisher.htaccess URL Web 3 ID ID c 2013 Information Processing Society of Japan 652

7 1 Table 1 Example of referrer-request table. action.js a.html flower.jpg b.html d.html c.html a.html b.html c.html d.html int 2 Rank ID ID Rank ID ID Rank 1 a.html action.js 23 1 flower.jpg htaccess 2 HTTP.htaccess.htaccess Web CGI SSI MIME IP.htaccess.htaccess.htaccess root.htaccess.htaccess.htaccess 2 (1) 2 Rank i (2).htaccess i 1 3 i =3 a.html action.js flower.jpg b.html.htaccess <Files "a.html"> Header set Link "<action.js>; rel= prefetch " Header set Link "<flower.jpg>; rel= prefetch " Header set Link "<b.html>; rel= prefetch " </Files> Apachea.html action.js flower.jpg b.html 3 Apache Firefox 3.5 Dynamic Contents Divider DCD mod predict 2 DCD 3.2 JavaScript 3.3 JavaScript jquery jquery.min.js mod predict Apache htaccess c 2013 Information Processing Society of Japan 653

8 3.4 Apache.htaccess Cron * [8] group kanri.php 903 2,542 4 PHP PHP goods.php (1) ( 2 ) php (3) Web (4) Firebug *1 UNIX Firebug [9] Mozilla Firefox Web Web (1) (2) Web PC Debian Web Apache PC Windows Vista Intel Core 2 Duo 2.00 GB 100 Mbps 2 PC Windows 7 AMD Athlon TM II X2 240 Processor 4.00 GB 2.2 Mbps PHP html php html PC c 2013 Information Processing Society of Japan 654

9 2 Table 2 Result of preprocessing. (group kanri.php) (goods.php) php 30.2 KB 7.5 KB html 1.3 KB 3.9 KB php 29.7 KB 6.9 KB 3 Table 3 Comparison of loading time ms 1.26 s 540 ms 1.32 s 392 ms 1.21 s 417 ms 1.06 s 32.5 KB KB +10.1% 4.0% 22.8% 19.7% (a) Fig. 9 (b) 9 Effect of using proposed approach. Cookie 1ms Firebug [9] 9(a) 9(b) 9(a) Web goods.php shop title.gif jpg goods.php WWW 1 c 2013 Information Processing Society of Japan 655

10 *2 577 ms 9(b) goods.php goods.html goods.php goods.html JavaScript jquery.min.js shop title.gif 3 goods.html jquery.min.js shop title.gif *3 goods.php POST jpg goods.php 1 goods.html goods.php jquery.min.js 3 9(a) (b) Web ms ms * jpg *3 304 Not Modified 10 Fig. 10 Effect of size of static contents KB 20 KB 4.3 i 2.htaccess.htaccess Web 1 Web htaccess Web de la Ossa [10] 5 10% c 2013 Information Processing Society of Japan 656

11 5 10% Web 4.4 Expat XML HTML XML print echo PHP DCD PHP?> echo <divide> ; PHP 5. Web Web 2 Ajax 2 20% (1) PHP PHP (2) (3) de la Ossa de la Ossa [10] [1] de la Ossa, B., Gil, J., Sahuquillo, J. and Pont, A.: Improving Web Prefetching by Making Predictions, Proc. 3rd EuroNGI Conference on Next Generation Internet Networks, pp (2007). [2] Linden, G.: Geeking with Greg (online), available from (accessed ). [3] Nielsen, J.: Usability Engineering, Morgan Kaufmann, San Francisco (1993). [4] Padmanabhan, V. and Mogul, J.: Using Predictive Prefetching to Improve World Wide Web Latency, ACM SIGCOMM Computer Communication Review, Vol.26, No.3, pp (1996). [5] Dahlan, A. and Nishimura, T.: Implementation of Asynchronous Predictive Fetch to Improve the Performance of Ajax-Enabled Web Applications, Proc. 10th International Conference on Information Integration and Webbased Applications and Services, pp (2008). [6] Fisher, D. and Saksena, G.: Link Prefetching in Mozilla: A Server-Driven Approach, Proc. 8th International Workshop on Web Content Caching and Distribution, pp (2004). [7] The JQuery Foundation: jquery (online), available from (accessed ). [8] KOMONET: KOMONET [9] Mozilla: Firebug Web Development Evolved, Mozilla (online), available from (acc 2013 Information Processing Society of Japan 657

12 cessed ). [10] de la Ossa, B., Gil, J., Sahuquillo, J. and Pont, A.: Referrer Graph: A Low-Cost Web Prediction Algorithm, Proc ACM Symposium on Applied Computing, pp (2010) Web ACM IEEE CS c 2013 Information Processing Society of Japan 658