html5 学习之路四（应用缓存、web worker 、服务器推送）

最新推荐文章于 2024-12-26 08:52:36 发布

从来不用昵称

最新推荐文章于 2024-12-26 08:52:36 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.csdn.net/ASP12345678/article/details/38359651

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML5中三个重要的新特性：应用程序缓存允许离线访问网页；Web Worker支持后台线程处理复杂任务；服务器推送实现实时更新。这些特性极大提升了Web应用的功能性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

例子：

<!DOCTYPE HTML>
<html manifest="demo.appcache">  <!--存在服务器上的 申明缓存的文件-->

<body>
The content of the document......
</body>

</html>

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

二、web worker  就是在后台起一个线程，多用于耗费cpu的任务

example：<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button οnclick="startWorker()">Start Worker</button>
<button οnclick="stopWorker()">Stop Worker</button>

<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");//在js文件里实现 计数器
    }
  w.onmessage = function (event) {//监听onmessage事件
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>js文件：
var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();
三 、服务器推送：
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("/example/html5/demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br />";
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }
</script>
</body>
</html>
服务器端：把 "Content-Type" 报头设置为 "text/event-stream"。
eg：<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释：
把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出发送日期（始终以 "data: " 开头）
向网页刷新输出数据
注释：web worker 和推送就是两个js对象的api ：Worker和EventSource