web存储和HTML5应用与Web Workers

2017-12-06  本文已影响0人  IO大仙

web存储主要有两个标签来实现:关于标签学习理解的一点想法,主要到这个阶段一定要理解标签的应用和理解,知道标签的含义以及正确应用。

web存储理解:

客户端存储数据的新方法

1.localStorage函数 

没有时间限制的数据存储

2.sessionStorage函数

有时间限制的数据存储,以浏览器关闭为限制(直接初始化数据消失),浏览器刷新还在储存

这两种函数与cookie效果一样,但cookie不适合大数据的储存,因为它们由每个对服务器的请求来1传递,这使得cookie速度很慢而且效率也不高

cookie函数的时间是由自己设定的,设定的时间如一天一年一月等,而不是浏览器关闭等不确定的时间段

下面是代码:

1.localStorage函数

html部分 js部分

这个代码的textarea的标签好像有问题,在浏览器中不会进行保存.........

2.sessionStorage函数

html部分 js部分

这一部分的代码正确,作者已验证,理解js部分看注解

HTML5应用与Web Workers

当然在介绍这部分知识之前,需要介绍一些什么是服务器访问

这里,我用的是本地服务器XAMPP

XAMPP下载官网

如何使用,如何安装非常简单,可以百度。

使用本地服务器在浏览器中显示网页主要是在localhost/+文件本地路径

而且之前要打开服务器服务

1.什么是应用程序缓存:

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

2.应用缓存的优势:

1):离线浏览 - 用户可在应用离线时使用它们

2):速度 -已缓存资源加载更快

3):减少服务器负载 - 浏览器将只从服务器下载更新过的资源

3.实现缓存:

如需启动应用程序缓存,请在文档的<html>标签中包含manifest属性

manifest文件的建议的文件扩展名是:“.appcache”

4.Manifest文件:

1):CACHE MANIFEST -在此标题下列出的文件将在首次下载后进行缓存

测试代码:


html5


缓存文件

测试代码,自己去体验,当不加manifest="index.appcache"时关闭服务器,刷新后网页丢失

有manifest="index.appcache"则,网页不丢失

2):NETWORK -在此标题下列出的文件需要与服务器连接,且不会被缓存


不缓存CSS

用chrome审查元素来查询!

3):FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面(默认404页面)


无法访问时,退回FALLBACK的下面文件的界面

我学习的教程没有循环渐进的方式,这部分理解不容易,我已经搞了两天了!!!你们有好的教材可以推荐一本


1.web worker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能

当我们的程序创建一个新程序时存在一个线程,支持我们陈序的运行,就是主线程,主线程的作用就是响应UI的操作,用web workers处理解决线程卡顿......扩展就到这里了!!我也不懂

重点就是用web workers可接解决线程卡顿,响应用户界面会流畅许多

2.函数

postMessage() -它用于向HTML页面传回一段消息

terminate() -终止 web worker,并释放浏览器/计算机资源

3.事件:

onmessage

postMessage(countNUm);//传递/回传信息 不会影响主UI的操作

html count.js index.js
上一篇下一篇

猜你喜欢

热点阅读