• HTML5 学习笔记(二)


    5.web存储

    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储
    这些数据可以在 cookie 中查询到~

    6. 应用程序缓存

    cache manifest

    • 离线浏览 - 用户可在应用离线时使用它们
    • 速度 - 已缓存资源加载得更快
    • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
    请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

    manifest 文件可分为三个部分:

    • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
    7.web worker 是运行在后台的 JavaScript,不会影响页面的性能。
     多用于耗费CPU资源的任务。

    开启一个worker, postmessage,主页面侦听消息,根据消息作出反应,worker 结束时,终止消息。

    demo_workers.js:
     1 var i=0;
     2 
     3 function timedCount()
     4 {
     5 i=i+1;
     6 postMessage(i);
     7 setTimeout("timedCount()",500);
     8 }
     9 
    10 timedCount();
     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <p>Count numbers: <output id="result"></output></p>
     6 <button onclick="startWorker()">Start Worker</button>
     7 <button onclick="stopWorker()">Stop Worker</button>
     8 <br /><br />
     9 
    10 <script>
    11 var w;
    12 
    13 function startWorker()
    14 {
    15 if(typeof(Worker)!=="undefined")
    16 {
    17   if(typeof(w)=="undefined")
    18     {
    19     w=new Worker("demo_workers.js");
    20     }
    21   w.onmessage = function (event) {
    22     document.getElementById("result").innerHTML=event.data;
    23   };
    24 }
    25 else
    26 {
    27 document.getElementById("result").innerHTML="Sorry, your browser
    28  does not support Web Workers...";
    29 }
    30 }
    31 
    32 function stopWorker()
    33 {
    34 w.terminate();
    35 }
    36 </script>
    37 
    38 </body>
    39 </html>

    由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

    • window 对象
    • document 对象
    • parent 对象

    8.Server-Sent 事件 - 单向消息传递

    Server-Sent 事件指的是网页自动获取来自服务器的更新。

    接收 Server-Sent 事件通知

    EventSource 对象用于接收服务器发送事件通知:

     
     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 <h1>获得服务器更新</h1>
     5 <div id="result"></div>
     6 
     7 <script>
     8 if(typeof(EventSource)!=="undefined")
     9   {
    10   var source=new EventSource("/example/html5/demo_sse.php");
    11   source.onmessage=function(event)
    12     {
    13     document.getElementById("result").innerHTML+=event.data + "<br />";
    14     };
    15   }
    16 else
    17   {
    18   document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
    19   }
    20 </script>
    21 
    22 </body>
    23 </html>

    服务器端代码实例

    需要能够发送数据更新的服务器(比如 PHP 和 ASP)。

    服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。

    1 <?php
    2 header('Content-Type: text/event-stream');
    3 header('Cache-Control: no-cache');
    4 
    5 $time = date('r');
    6 echo "data: The server time is: {$time} ";
    7 flush();
    8 ?>
  • 相关阅读:
    【转】c#基础系列1---深入理解值类型和引用类型
    【转】Aspnet Core为什么支持跨平台
    [翻译svg教程]svg学习系列 开篇
    使用docker 解决一个小问题,你也可能用的到
    增加软链接
    漫长的表白
    被社会抽了一巴掌
    杂乱五章的2015年终总结
    [资源分享]yslow 与firebug 修复版本Firefox35【绿色版本下载】
    Web前端性能测试-性能测试知多少---深入分析前端站点的性能
  • 原文地址:https://www.cnblogs.com/hanyuxinting/p/4500491.html
Copyright © 2020-2023  润新知