web学习博客2016/2/20

学习内容：

• Web Worker
• Web存储API

Web Worker

基础内容

什么是Worker？

就是一段运行在后台的javascript代码
由于现在的兼容性并没有特别好，但是它是唯一能使

特点

• 利用多核CPU的优势
• 对“多线程”支持较好
• 不会影响页面性能

问题

• 不能访问Web页面、不能使用DOM API
  
  • 可以直接使用window.setTimeout() 等定时器
  • 可以访问navigator中的 appName userAgent等属性

Worker API

检测浏览器对Worker的支持情况

if(typeof(Worker)!=="undefined"){
    //进入本行代码说明支持Web Worker
    //继续写Worker代码
}else{
    //进入本行 说明不支持 给出错误提示
}

创建 Web Worker对象

var worker = new Worker(worker文件路径);

与Web Worker（文件）的通信

• onmessage事件

• 作用 - 用于监听Worker文件的执行情况

• posiMessage(data)方法

• 作用 - 用于传递消息（数据或结果）

终止与Web Worker的通信

terminate()方法

Worker语法

Worker对象

• 创建对象 - new Worker(worker文件)
• 方法 - postMessage()
• 事件 - onmessage事件

Worker文件

• 简单来说，就是一个普通的JS文件
• 特殊地方 - 允许直接使用Worker对象的方法和事件

注意

Worker文件中使用定时器

• 在Worker文件中，允许直接使用Worker对象的方法和事件
• 在Worker文件中，允许直接调用setTimeout()和setInterval()

Web储存API

基础内容

储存方式

HTML5新出的Web存储方式有：
- session Storage(会话储存) – 用于替代Session ps:存储数据的周期（时间） - 浏览器从打开到关闭
- local Storage（本地存储） - 用于替换Cookie ps：存储数据的周期（时间） - 由开发人员决定

HTML5以前的：

• 浏览器内存
  
  • 优点
    
    • 方便快捷
    • 浏览器内置不用额外操作
  • 缺点
    
    • 容量小
    • 占用量直接影响浏览器性能
    • 储存周期由浏览器决定
• cookie
  
  • 优点
    
    • 容量比内存大
    • 使用用户硬盘空间
    • 存储周期较长
  • 缺点
    
    • 不能存储中文
    • 大小限制（单文件不能超过4KB）
    • 数量限制（一个网站最多200多个文件）
    • 安全性不高
• 数据库 - 独立于任何开发语言