博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5学习笔记3——高级特性
阅读量:7090 次
发布时间:2019-06-28

本文共 1761 字,大约阅读时间需要 5 分钟。

 

一:Web存储

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

web存储有两种;

  • localStorage - 没有时间限制的数据存储,存于浏览器缓存
  • sessionStorage - 针对一个 session 的数据存储,绘画关闭就清理
if(typeof(Storage)!=="undefined")//检查是否支持web存储   {   // Yes! localStorage and sessionStorage support!   localStorage.key = value //创建内容   localStorage.key //获取内容   sessionStorage.key = value //创建内容   sessionStorage.key //获取内容      } else   {   // Sorry! No web storage support..   }

 

二:Web应用缓存

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

应用程序缓存为应用带来三个优势:

  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

 

1:启用 应用程序缓存

  ... 

 

2: 编写manifest

manifest 文件是简单的文本文件:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST # 2012-02-21 v1.0.0 注解 /theme.css /logo.gif /main.js NETWORK: login.php FALLBACK: /html/ /offline.html

 

3:注意

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。

浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)

 

三:异步运行脚本

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

//一个js文件var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount();

 

 

四:接受服务器推送

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

以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。

而现在,通过服务器发送事件,更新能够自动到达,类似于移动App的推送一样。

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

if(typeof(EventSource)!=="undefined")   {   // Yes! Server-sent events support!   var source=new EventSource("接收更新的页面文件");   source.onmessage=function(event)  {   //每当有推送更新,则调用该事件。   } else   {   // Sorry! No server-sent events support..   }

 

五:web sql

Html5数据库API是以一个独立规范形式出现,它包含三个核心方法:

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql:这个方法用于执行真实的SQL查询。

 

转载地址:http://zvfql.baihongyu.com/

你可能感兴趣的文章
有利于SEO的DIV+CSS的命名规则
查看>>
以这样的方式
查看>>
数据结构之栈和队列实现
查看>>
Redis基本认识
查看>>
盗版windows7高速免费安装windows10
查看>>
在PL/pgSQL中模拟GOTO语句的实现
查看>>
mongodb的通配符查询的一次失败经验
查看>>
PHP curl post json数据流
查看>>
實時顯示當前時間
查看>>
Git 分支合并(单文件合并,单commit合并)
查看>>
关于Android 如何实现mobile data on/off功能
查看>>
ES6新特性概览
查看>>
go alpine docker image 搭建
查看>>
Input / Output Error : Bad Blocks : How To Restar
查看>>
我的朗科运维第一课
查看>>
MySQL函数
查看>>
Debian7 编译WizNote Qt Project(为知笔记)
查看>>
Visual Studio 外部工具中添加 git-bash
查看>>
Realm的简单使用
查看>>
就事论事
查看>>