HTML5 Web キャッシュとアプリケーションキャッシュ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTML5 Web キャッシュとアプリケーションキャッシュ

小云云

Jan 13, 2018 am 11:13 AM

h5html5web

この記事では主に HTML5 の Web キャッシュとアプリケーションキャッシュ (Cookie、セッション) を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

HTML5 Web キャッシュを紹介する前に、Cookie とセッションについて理解しましょう:

session:

HTTP はステートレスなので、あなたは誰ですか?あなたは何をしましたか？申し訳ありませんが、サーバーは知りません。

セッションが表示され、将来の使用に備えてユーザー情報 (ユーザー名、ショッピングカートでの購入など) がサーバーに保存されます。

ただし、セッションは一時的なものであり、ユーザーがウェブサイトを離れると削除されます。情報を永続的に保存したい場合は、データベースに保存できます。

セッションの仕組み: ユーザーごとにセッション ID (コア!!!) を作成します。セッション ID は Cookie に保存されます。つまり、ブラウザが Cookie を無効にすると、セッションは無効になります。 (ただし、URL を介してセッション ID を渡すなど、他の方法で実装することもできます)

ユーザー認証は通常、セッションを使用します。

Cookie:

目的: ユーザーを識別するために、Web サイトによってクライアント側にローカルに保存されるデータ (通常は暗号化されます)。

ユーザーが Web ページにアクセスすると、名前が Cookie に記録されます。
次回ユーザーが Web ページにアクセスし続けると、ユーザーのアクセス記録が Cookie から読み取られるようになります。

Cookie は、同じオリジンからの http リクエストで (必要でない場合でも) 送信されます。つまり、クライアントとサーバーの間でやり取りされます。

クッキーのデータサイズは4kを超えません

クッキーの有効期間：設定したクッキーはブラウザを閉じても有効期限まで有効です！

localStorage と sessionStorage:

初期の頃、ローカルキャッシュには Cookie が一般的に使用されていましたが、Web ストレージはより安全で高速である必要があります。

これらのデータはサーバーには保存されず (クライアントに保存され)、サーバーのパフォーマンスには影響しません。

sessionStorage と localStorage データストレージにもサイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。

localStorage: 時間制限のないデータストレージ!

sessionStorage: 英語の意味からもわかるように、セッションのデータストレージなので、ユーザーがブラウザ（タブ/ウィンドウ）を閉じると、データは削除されます！

HTML5 Web ストレージのサポート:

IE8 以降、最新のブラウザー。

データはキーと値のペアで保存されます:

localStorage と sessionStorage には次のメソッドがあります:

localStorage.setItem(key, value): localStorage.key=value!
localStorage.getItem(key): データを取得する
localStorage.removeItem(key): 単一のデータを削除する
localStorage.clear(): すべてのデータを削除する
localStorage.key(index): 取得する特定のインデックスのキー値

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web storage</title>
</head>

<body>
    <p id="test"></p>
    <script>
        if (typeof (Storage) != undefined) {
            localStorage.name = &#39;xiao ming&#39;;
            localStorage.setItem(&#39;name1&#39;, &#39;Apple&#39;);
            document.getElementById(&#39;test&#39;).innerHTML = "you are: " + localStorage.name;
            console.log("first:" + localStorage.name1 + "," + localStorage.key(0));
            localStorage.removeItem(&#39;name1&#39;);
            console.log("second: " + localStorage.name1);
            console.log("third: " + localStorage.getItem(&#39;name&#39;));
            localStorage.clear();
            console.log("last:" + localStorage.name);
        } else {
            document.getElementById(&#39;test&#39;).innerHTML = "更新浏览器吧！目前浏览器不支持stroage";
        }
        
    </script>
</body>
</html>

プログラムの実行結果:

注: キーと値のペアは文字列として保存され、必要に応じて型を変更する必要があります (たとえば、加算を行うには、数値型に変更します)。

HTML5 アプリケーションキャッシュ:

キャッシュマニフェストファイルを作成することで、Web アプリケーションをキャッシュし、ネットワークの状態に関係なくアクセスできるようになります。

アプリケーションキャッシュの利点:

1. オフラインブラウジングの高速化: キャッシュされたリソースの読み込みが高速化されます。

サポートステータス:

IE10 以降、最新のブラウザ。

使用:

<!DOCTYPE html>
<html manifest="demo.appcache">
</html>

注: アプリケーションキャッシュを有効にするには、マニフェスト属性 (拡張子: .appcache) を指定する必要があります。マニフェスト属性が指定されていない場合、ページはキャッシュされません。マニフェストファイルで直接指定されています!)

マニフェストファイルは、サーバー上で MIME タイプ: text/cache-manifest で正しく構成されている必要があります。

マニフェストファイル:

マニフェストは、何がキャッシュされ、何がキャッシュされていないかをブラウザーに伝える単純なテキストファイルです。

マニフェストは 3 つの部分に分けることができます:

キャッシュマニフェスト: この項目にリストされているファイルは、最初のダウンロード後にキャッシュされます。

ネットワーク: この項目にリストされているファイルはサーバーとのネットワーク接続を必要とするため、キャッシュされません。

FALLBACK: この項目には、ページにアクセスできない場合のフォールバックページ (404 ページなど) がリストされます。

test.appcache:

CACHE MANIFEST
#2017 11 21 v10.0.1
/test.css
/logo.gif
/main.js

NETWORK
/login.php
/register.php

FALLBACK
#/html/目录中文件无法访问时，用/offline.html替代
/html/ /offline.html

アプリケーションのキャッシュを更新します:

1. ユーザーがブラウザのキャッシュをクリアします。 2. マニフェストファイルが変更されます (#: はコメントを示し、#2018 1 1 v20.0.0 に変更されると、ブラウザーが再キャッシュされます!) 3. プログラムがアプリケーションキャッシュを更新します。 Web ワーカー:

Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。

一般的な HTML ページでスクリプトを実行する場合、スクリプトが読み込まれない限りページは応答しません。

支持情况：IE10以上，现代浏览器

示例：html文件：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>web worker</title> </head> <body> <p>计数：<output id="count"></output></p> <button onclick="startWorker()">开始</button> <button onclick="overWorker()">结束</button> <script> var w; function startWorker(){ // 检测浏览器是否支持web worker if(typeof(Worker)!=='undefined'){ if(typeof(w)=='undefined'){ //创建web worker对象 w=new Worker('testWorker.js'); } // 事件持续监听(即使外部脚本已经完成),除非被终止 w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data; }; }else{ document.getElementById('count').innerHTML='浏览器不支持web worker'; } } function overWorker() { // 终止web worker对象，释放浏览器/计算机资源 w.terminate(); w=undefined; } </script> </body> </html>
testWorker.js文件：

var i=0; function timedCount() { i+=1; // 重要的部分，向html页面传回一段信息 postMessage(i); setTimeout('timedCount()',500); } timedCount();
注意1：通常web worker不是用于如此简单的任务，而是用在更耗CPU资源的任务！

注意2：在chrome中运行会产生“cannot be accessed from origin 'null'”的错误，我的解决方法是：xampp中开启apache,用http://localhost/进行访问。

web worker缺点：

由于web worker位于外部文件中，所以它无法访问下列javascript对象：

window对象；

document对象；

parent对象。

HTML5 server-sent events（服务器发送事件）:

server-sent事件是单向信息传递；网页可以自动获取来自服务器的更新！

以前：网页先询问是否有可用的更新，服务器发送数据，进行更新（双向数据传递）！

支持情况：除IE以外的现代浏览器均支持！

示例代码：html文件：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sever sent event</title> </head> <body> <p>sever sent event informations</p> <p id="test"></p> <script> // 判断浏览器是否支持EventSource if(typeof(EventSource)!==undefined){ // 创建EventSource对象 var source=new EventSource("test.php"); // 事件监听 source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+"<br>"; }; }else{ document.getElementById('test').innerHTML="sorry,浏览器不支持server sent event"; } </script> </body> </html>
test.php：

<?php header('Content-Type:text/event-stream'); header('Cache-Control:no-cache'); $time=date('r'); echo "data:The server time is: {$time} \n\n"; // 刷新输出数据 flush();
注意：后面没有内容，php文件可以不用"?>"关闭！

HTML5 WebSocket：

WebSocket是HTML5提供的一种在单个TCP连接上建立全双工（类似电话）通讯的协议；

浏览器和服务器之间只需要进行一次握手的操作，浏览器和服务器之间就形成了一条快速通道，两者之间就可直接进行数据传送；

浏览器通过javascript建立WebSocket连接请求，通过send()向服务器发送数据，onmessage()接收服务器返回的数据。

WebSocket如何兼容低浏览器：

Adobe Flash Socket;

ActiveX HTMLFile(IE);

基于multipart编码发送XHR；

基于长轮询的XHR

WebSocket可以用在多个标签页之间的通信！

相关推荐：

Nginx的Web缓存服务与新浪网的开源NCACHE模块

Web缓存杂谈_html/css_WEB-ITnose

基于反向代理的Web缓存加速可缓存的CMS系统设计_PHP

以上がHTML5 Web キャッシュとアプリケーションキャッシュの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。