bfcache相関

29898 ワード
実践
前言
1つのケースを見てみましょう.1つのリストページでは、ページがロードされるたびにonload()イベントがajax方式で最新のリスト資料を再取得すると予想されています.そのため、クリックしてページに戻ると、ユーザーはすぐに最新のリスト資料を見ることができるはずです.その後、一部のブラウザでは、前のページに戻ると更新後の資料が自動的にロードされないことがわかり、再ロードするにはリフレッシュが必要です.これは、一部のブラウザでは、後退時にonloadイベントがトリガーされないためです.これはHTML 5世代ブラウザの新しい特性の一つであるBack-Forward Cache(bfcacheと略称)です.
bfcacheとは
私たちがよく知っている赤い本「JavaScript高級プログラム設計」にはbfcacheが言及されています.
bfcache、すなわちback-forward cacheは、「往復キャッシュ」と呼ばれ、ブラウザの「後退」ボタンと「前進」ボタンを使用すると、ページの変換速度を速めることができます.このキャッシュはページデータだけでなくDOMやJSの状態も保存しており,実際にはページ全体をメモリに保存している.ページがbfcacheにある場合、再びページを開くとonloadイベントはトリガーされません.
Pageshowイベント
このイベントは、bfcacheからのページかどうかにかかわらず、ページ表示時にトリガーされます.再ロードされたページでは、pageshowはloadイベントがトリガーされた後にトリガーされます.bfcacheのページではpageshowがページ状態が完全に回復した瞬間にトリガーされます.
pagehideイベント
このイベントは、ブラウザがページをアンインストールしたときにトリガーされ、unloadイベントの前にトリガーされます.
persistedプロパティ
pageshowイベントとpagehideイベントのeventオブジェクトにはpersistedというブール値属性も含まれています.
  • pageshowイベントの場合、ページがbfcacheからロードされている場合、この属性の値はtrueである.そうでなければ、この属性の値はfalseです.
  • pagehideイベントの場合、ページがアンインストールされた後にbfcacheに保存された場合、この属性の値はtrueである.そうでなければ、この属性の値はfalseです.

    • ブラウザによっては、現在のウィンドウの「開く」履歴の前のページの表現が統一されず、ブラウザの実装やページ自体の設定に関係します.
    テスト
    テストコード
    ラインの例
    
<html>
<head>
    <title>Page Eventstitle>
    <meta charset="utf-8">
    <script>
        function appendFunc(msg){
        	var d = new Date();
        	var li = document.createElement("li");
        	li.innerHTML = d.toISOString().substr(14, 9) + " " + msg;
        	document.querySelector("ul").appendChild(li);
        }
        window.addEventListener('load', function(){
        	appendFunc('Load Event');
        	document.querySelector("#changeColor").onclick = function(){
        		document.querySelector("a").style.color = "red";
        	}
        })
        window.addEventListener('pagehide', function( e ){
        	appendFunc("Pagehide Event");
        	appendFunc("pagehide persisted is :"  + e.persisted);
        })

        window.addEventListener('pageshow', function( e ){
        	appendFunc("Pageshow Event");
        	appendFunc("pageshow persisted is :"  + e.persisted);
        })
    script>
head>
<body>
<a href="http://www.sina.com.cn/">     a>
<input type="button" id="changeColor" value="  " />
<ul>ul>
body>
html>

    テスト結果
    browser
    result
    IE 11
    新しい読み込みはloadとpageshowイベントをトリガーし、赤は保持されず、bfcacheはありません.
    Chrome 52.0.2743.116
    新しい読み込みはloadとpageshowイベントをトリガーし、赤は保持されず、bfcacheはありません.
    Opera 39.0
    新しい読み込みはloadとpageshowイベントをトリガーし、赤は保持されず、bfcacheはありません.
    Firefox 48.0.2
    新しくロードするとloadとpageshowイベントがトリガーされ、ポイントが大新浪に向かうとpagehideイベントがトリガーされますが、bfcacheには保存されません.赤は保持されていません.
    Safari(iPhone) iOS 9.3.5
    新しくロードするとloadとpageshowイベントがトリガーされ、点が大新浪に向かうとpagehideイベントがトリガーされ、bfcacheに格納され、赤色が保持されます.
    UC
    新しくロードするとloadとpageshowイベントがトリガーされ、点が大新浪に向かうとpagehideイベントがトリガーされ、bfcacheに格納され、赤色が保持されます.
    qqブラウザ
    新しくロードするとloadとpageshowイベントがトリガーされ、ポイントが大新浪に向かうとpagehideイベントがトリガーされ、bfcacheが格納されていないことを示しますが、赤は保持され、bfcacheはありますがpagehideイベントをサポートしていないpersistedプロパティ(疑い)
    browser
    新しい読み込みはloadとpageshowイベントをトリガーし、前のページに戻るとイベントはトリガーされず赤が保持され、bfcache(疑い)があります.
    Safari、Firefox、UC、qqブラウザ、browserにbfcacheがあることがわかります.前ページに戻ると、
  • Safari、UC、qqブラウザはloadをトリガーしません.
  • IE、Firefox、Chrome、Operaはpageshowイベントをサポートしますが、loadがトリガーされます.
  • browserはイベントをトリガーしません.

    • ソリューション
    Firefoxの開発者ドキュメントには、次のようなアイデアが用意されています.
  • ページはunloadまたはbeforeunloadイベントをリスニングした.
  • ページには「cache-control:no-store」が設定.
  • Webサイトは、HTTPSを使用してページが少なくとも次の条件で満たされている場合に使用します.
  • “Cache-Control: no-cache”
  • “Pragma: no-cache”
  • 要求ヘッダ「Expires:0」または「Expires」の値が「Date」の前の値を設定します(「Cache-Control:max-age=」も設定されていない限り).

  • ページは、ユーザが後退したときに完全にロードされていないか、XMLHttpRequestなどのネットワーク要求がある.
  • ページはIndexedDB操作中です.
  • の最上位レベルのページパッケージにはframeが含まれており、これらのframeはここに記載されているいずれかの理由でキャッシュできません.
  • ページは1つのframe内にあり、ユーザはこのframe内で新しいページにジャンプし、ここでキャッシュされるのは新しくロードされたページ
    • である.
    Jはpageshowイベントを傍受してbfcacheにページが入ることを阻止する
    一言ではコードを放さない
    window.addEventListener('pageshow', function( e ){
	if (e.persisted) {
		window.location.reload() 
	}
})

    Safari、UC、qqブラウザのテストに合格しました.しかし、UC、qqブラウザはbfcacheのページを先にフラッシュします.pageshowはloadイベントがトリガーされた後にトリガーされるからです.browserは依然として赤色を保持しています.browserが前のページに戻ったときにイベントがトリガーされないからだと思います.
    JSはpagehideイベントを傍受してページがbfcacheに入ることを阻止する
    一言ではコードを放さない
    window.addEventListener('pagehide', function(e) {
	var $body = $(document.body);
	$body.children().remove();

    //          ，        script     
    setTimeout(function() {
	    $body.append("window.location.reload();<\/script>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> 
  <p>Safari、UC、qq       。browser       ，      browser            。</p> 
  <h3>     Cache-Control header</h3> 
  <p>      ：<br>  jsp   header             ：</p> 
  <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<%
  response.setHeader("Cache-Control","no-cache,no-store,must-revalidate");
  response.setHeader("Expires", "0");
  response.setHeader("Pragma","no-cache"); 
%>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
</code></pre> 
  <h3>  webview cache     </h3> 
  <p>            server     ，    jsp    html。              。</p> 
  <pre><code class="prism language-html"><span class="token comment"><!--   webview            START --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token namespace">jsp:</span>useBean</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>now<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>java.util.Date<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>SERVER_TIME<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>${now.getTime()}<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token comment">//  webview    H5  ，  server time      </span>
<span class="token keyword">var</span> <span class="token constant">SERVER_TIME</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"SERVER_TIME"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token keyword">var</span> <span class="token constant">REMOTE_VER</span> <span class="token operator">=</span> <span class="token constant">SERVER_TIME</span> <span class="token operator">&&</span> <span class="token constant">SERVER_TIME</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">REMOTE_VER</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> <span class="token constant">LOCAL_VER</span> <span class="token operator">=</span> sessionStorage <span class="token operator">&&</span> sessionStorage<span class="token punctuation">.</span><span class="token constant">PAGEVERSION</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">LOCAL_VER</span> <span class="token operator">&&</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token constant">LOCAL_VER</span><span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token constant">REMOTE_VER</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">//  html          </span>
        location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token comment">//  html  server      ，  LOCAL_VER</span>
        sessionStorage<span class="token punctuation">.</span><span class="token constant">PAGEVERSION</span> <span class="token operator">=</span> <span class="token constant">REMOTE_VER</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token comment"><!--   webview            END --></span>
</code></pre> 
  <h2>  </h2> 
  <ol> 
   <li> <p>PC   ，        header        </p> </li> 
   <li> <p>  bfcache/page cache       ，JS  pageshow/pagehide，           </p> </li> 
   <li> <p>  2     work    ，   HTML             ，                              </p> </li> 
  </ol> 
  <h2>  </h2> 
  <ul> 
   <li>Forcing mobile Safari to re-evaluate the cached page when user presses back button</li> 
   <li>H5    webview      </li> 
   <li>              onLoad  </li> 
   <li>BFcache     </li> 
  </ul> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1281078937400655872"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
    興味があるかもしれません
  • html
    周華華
    html
  • 【Struts 2四】Struts 2ブロッキング
    bit1129
    struts 2ブロッキング
  • make:ccコマンドで解決方法が見つかりません
    daizj
    linux コマンド不明 make cc
  • OracleのJobアプリケーション
    周凡楊
    oracle job
  • マルチスレッドメカニズム
    朱輝輝33
    マルチスレッド
  • WebレポートツールFineReportの使用中に発生するよくあるエラーと解決方法(一)
    Aさんは振り回さない
    Webレポート finereport JAvaレポート レポートツール
  • mysql rpmインストール後myはありません。cnf
    林鶴天
    いいえcnf
  • Kindle Fire HDX root GoogleサービスフレームワークをインストールしてもGoogleアカウントにログインできない問題
    aigo
    root
    • アルファベットで分類:
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
    トップページ -
    私たちについて -
    構内検索 -
    Sitemap -
    権利侵害苦情
    著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
    京ICP備09083238号









    pandasライブラリの紹介
    Backbone入門ガイド(六):View(ビュー)