前端HTML5 一些你没用过的特性

时间 2019-12-05

标签前端 html5 html 一些没用特性栏目 HTML5 繁體版

原文原文链接

1、H5的离线缓冲

HTML5的离线存储是基于一个新建的.appcache文件的，经过这个文件上的解析清单离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现。HTML5离线缓存又名Application Cache，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可使用一个描述文件（manifest file），列出要下载和缓存的资源。javascript

<html manifest="haorooms.appcache">
复制代码

解析清单css

在开始以前要先了解下manifest（即.appcache文件），上面的解析清单要怎么写,大体就长这样子。html

CACHE MANIFEST
#version 1.2.2

CACHE:
#css
http://www.haorooms.com/theme/assets/style.css
#js
http://www.haorooms.com/theme/assets/js/main.js

#img
http://static.hyb.dev.ipo.com/css/wifi/pc/images/logo-fk1.png
http://static.hyb.dev.ipo.com/css/wifi/images/favicon.ico

NETWORK:  
# 这里写的全部资源永远都不会被缓冲
# 可使用星号来指示全部其余资源/文件都须要因特网链接（除去CACHE下面列出来的）
*
FALLBACK:
/html5/ /404.html
# 下面的 FALLBACK 小节规定若是没法创建因特网链接，则用 "404.html" 替代 /html5/ 目录中的全部文件：
复制代码

manifest 文件可分为三个部分：html5

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

在线的状况下,用户代理每次访问页面，都会去读一次manifest.若是发现其改变, 则从新加载所有清单中的资源java

更新缓冲web

1、更新manifest文件：给manifest添加或删除文件，均可更新缓存，若是咱们更改了js，而没有新增或删除，前面例子中注释中的版本号、时间戳或者md5码等进行修改，均可以很好的用来更新manifest文件ajax

2、经过javascript操做：html5中引入了js操做离线缓存的方法，下面的js能够手动更新本地缓存。window.applicationCache.update();浏览器

3、清除浏览器缓存：若是用户清除了浏览器缓存（手动或用其余一些工具）都会从新下载文件。缓存

2、Web Worker

js是单线程的，也就是说当前只能容许干一件事，其余任务须要等待执行，随着计算机领域的不断发展，尤为是多核CPU的出现，使得单线程带来许多的不便，没法充分发挥计算机的计算能力。bash

web worker的做用将是容许咱们建立多个进程，建立的子线程，收到主线程的控制，主线程能够适当的分配一些任务给子线程，让子线程可以在后台运行，互不干扰，等到子线程执行完毕后再返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（一般负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

使用web worker须要注意的一些点

一、DOM限制，worker子线程没法调用咱们的document、window、parent对象，可使用navigator、location对象。
二、Worker 线程和主线程不在同一个上下文环境，它们不能直接通讯，必须经过消息完成。
三、不能使用alert、confirm可是可使用XMLHttpRequest发送ajax请求。
四、Worker 线程没法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。
复制代码

基本用法

// 主线程
var worker = new Worker('work.js'); // 建立一个web worker
// Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。因为 Worker 不能读取本地文件，因此这个脚本必须来自网络。若是下载没有成功（好比404错误），Worker 就会默默地失败。

// 发送消息给子线程
worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

// 监听子线程传回的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
  // event.data 能够拿到数据
  doSomething();
}

function doSomething() {
  // 执行任务
  worker.postMessage('Work done!');
  
  worker.terminate(); // 关闭子线程
}

// 主线程监听错误
worker.onerror(function (event) {
  console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});
复制代码

// 接收消息
self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);
// self表明子线程自身，即子线程的全局对象。

// 或者能够这么写
self.addEventListener('message', function (e) {
  var data = e.data; // 接收传入的消息内容
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg);
      self.close(); // 关闭自身
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);
复制代码

3、WebSocket

webSocket是一种网络通讯协议，许多高级功能都须要它来实现。咱们可能会有疑问，网络通讯咱们不是已经有HTTP协议了吗，为啥还须要这个协议呢？很简单，咱们都知道HTTP协议只能是客户端发起请求，服务端不能主动推送内容。以前咱们的解决办法就是在客户端轮询，可是这样至关消耗资源。webSocket就提供了解决方法。

协议标识符是ws（若是加密，则为wss），服务器网址就是 URL。

客户端脚本例子

var ws = new WebSocket("wss://echo.websocket.org"); // 建立socket

// 链接成功后的回调
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  // 发送消息过去
  ws.send("Hello WebSockets!");
};

// 监听消息的返回
ws.onmessage = function(event) {
  console.log( "Received Message: " + event.data);
  // 服务器数据多是文本，也多是二进制数据（blob对象或Arraybuffer对象）。
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
  // 关闭链接
  ws.close();
};

// 关闭的回调函数
ws.onclose = function(evt) {
  console.log("Connection closed.");
};      

// 发生错误的回调
socket.onerror = function(event) {
  // handle error event
};

复制代码