今天的目标
3.1:h5新特性八--Web Worker---代码就3行
程序:program 存储在外存(磁盘)中代码
进程:Process/Task 将程序调用内存中，分配空间
线程:Thread 线程是进程内部代码基本单位
(1)进程是操作系统分配内存的基本单位
(2)线程是CPU执行代码的基本单位
(3)一个进程内部都多个线程组成，至少一个
(4)多个线程之间"并发执行的",宏观上看同时执行，
微观上看依次循环执行
chorme浏览器
一个 chrome进程内，有多个线程，负责向WEB服务器并发的发起请求,以获取资源: 请求资源线程
还有一个线程将所有内容绘制浏览器中--UI主线程,
还负责执行js/css代码.
观察如下代码
<button>按钮一</button>
<script src="x.js">很耗时js任务</script>
<button>按钮二</button>
现象:js执行代码中，按钮一可见，按钮2不可见
原因:浏览器执行代码和渲染网页同一个线程
解决:创建新线程，由它来执行耗时js任务,
UI主线程负责渲染网页.
代码:
<button>按钮一</button>
<script>
var w = new Worker("x.js");
</script>
<button>按钮二</button>
3.2:Worker线程缺陷
浏览器不允许Worker线程执行任何DOM/BOM操作
原因:浏览器只允许UI线程操作DOM/BOM，若多个
线程同时操作DOM/BOM页面，混乱..
所以类似jquery脚本不能使用Worker来执行
3.3:Worker线程可以给UI线程发送数据
worker:
postMessage(strMessage);
ui:
var w = new Worker("x.js");
w.onmessage = function(e){e.data}
3.4:UI线程可以给Worker线程发送数据
ui:
var w = new Worker("x.js");
w.postMessage(stringmeg);
worker:
onmessage = function(e){e.data}
练习: (1)在HTML中有一个INPUT,请用户输入数字,
(2)添加按钮"开始计算累加和"
(3)<div id="rs"></div>
点击此按钮,创建Worker 线程来计算出用户
输入数字累加和，在下方创建div显示计算结果
|
项目中Worker的使用场景 (1)只要js中有DOM/BOM就不能用Worker (2)Worker适合于执行耗时JS任务, 复杂计算,数据统计.. |
3.5:h5新特性九--Web Stroage
在浏览器中存储一些用户专用数据:内容定制，样式定制..
在客户端存储数据可以使用的技术
(1)cookie技术,浏览器兼容性好,不能超4KB,操作复杂
(2)Flash存储，依赖Flash播放器
(3)H5 WebStorage,不能超8MB,操作简单
(4)IndexDB 可存大量数据，还不是标准
|
Session:会话（用户操作过程）浏览器从打开某一个网站第一页面开始.(会话开始),中间可能打开多个页面(会话中),直到关闭浏览器(会话结束) |
WebStorage技术中，为用户提供二个对象
(1)sessionStorage 类数组对象,会话级数据存储
保存数据 sessionStorage[key] = value
保存数据 sessionStorage.setItem(key,value);
获取数据 var value = sessionStorage[key];
获取数据 var value = sessionStorage.getItem(key);
删除数据 sessionStorage.removeItem(key);
删除数据 sessionStorage.clear();
数据个数 sessionStorage.length
获取key var key = sessionStorage.key(i);
创建login.html 输入用户名，密码，提交，用户点击
提交按钮,提示"登录成功,3s后自动跳转 首页"
返回index.html 右上角 欢迎回来 xxx 退出登录
创建logout.html 提示"您己退出登录,3s后自动跳转首页"
返回index.html 右上角提示"请登录"超链接
(2)localStroage今天的目标
3.1:h5新特性八--Web Worker---代码就3行
程序:program 存储在外存(磁盘)中代码
进程:Process/Task 将程序调用内存中，分配空间
线程:Thread 线程是进程内部代码基本单位
(1)进程是操作系统分配内存的基本单位
(2)线程是CPU执行代码的基本单位
(3)一个进程内部都多个线程组成，至少一个
(4)多个线程之间"并发执行的",宏观上看同时执行，
微观上看依次循环执行
chorme浏览器
一个 chrome进程内，有多个线程，负责向WEB服务器并发的发起请求,以获取资源: 请求资源线程
还有一个线程将所有内容绘制浏览器中--UI主线程,
还负责执行js/css代码.
观察如下代码
<button>按钮一</button>
<script src="x.js">很耗时js任务</script>
<button>按钮二</button>
现象:js执行代码中，按钮一可见，按钮2不可见
原因:浏览器执行代码和渲染网页同一个线程
解决:创建新线程，由它来执行耗时js任务,
UI主线程负责渲染网页.
代码:
<button>按钮一</button>
<script>
var w = new Worker("x.js");
</script>
<button>按钮二</button>
3.2:Worker线程缺陷
浏览器不允许Worker线程执行任何DOM/BOM操作
原因:浏览器只允许UI线程操作DOM/BOM，若多个
线程同时操作DOM/BOM页面，混乱..
所以类似jquery脚本不能使用Worker来执行
3.3:Worker线程可以给UI线程发送数据
worker:
postMessage(strMessage);
ui:
var w = new Worker("x.js");
w.onmessage = function(e){e.data}
3.4:UI线程可以给Worker线程发送数据
ui:
var w = new Worker("x.js");
w.postMessage(stringmeg);
worker:
onmessage = function(e){e.data}
练习: (1)在HTML中有一个INPUT,请用户输入数字,
(2)添加按钮"开始计算累加和"
(3)<div id="rs"></div>
点击此按钮,创建Worker 线程来计算出用户
输入数字累加和，在下方创建div显示计算结果
|
项目中Worker的使用场景 (1)只要js中有DOM/BOM就不能用Worker (2)Worker适合于执行耗时JS任务, 复杂计算,数据统计.. |
3.5:h5新特性九--Web Stroage
在浏览器中存储一些用户专用数据:内容定制，样式定制..
在客户端存储数据可以使用的技术
(1)cookie技术,浏览器兼容性好,不能超4KB,操作复杂
(2)Flash存储，依赖Flash播放器
(3)H5 WebStorage,不能超8MB,操作简单
(4)IndexDB 可存大量数据，还不是标准
|
Session:会话（用户操作过程）浏览器从打开某一个网站第一页面开始.(会话开始),中间可能打开多个页面(会话中),直到关闭浏览器(会话结束) |
WebStorage技术中，为用户提供二个对象
(1)sessionStorage 类数组对象,会话级数据存储
保存数据 sessionStorage[key] = value
保存数据 sessionStorage.setItem(key,value);
获取数据 var value = sessionStorage[key];
获取数据 var value = sessionStorage.getItem(key);
删除数据 sessionStorage.removeItem(key);
删除数据 sessionStorage.clear();
数据个数 sessionStorage.length
获取key var key = sessionStorage.key(i);
创建login.html 输入用户名，密码，提交，用户点击
提交按钮,提示"登录成功,3s后自动跳转 首页"
返回index.html 右上角 欢迎回来 xxx 退出登录
创建logout.html 提示"您己退出登录,3s后自动跳转首页"
返回index.html 右上角提示"请登录"超链接
(2)localStroage今天的目标
3.1:h5新特性八--Web Worker---代码就3行
程序:program 存储在外存(磁盘)中代码
进程:Process/Task 将程序调用内存中，分配空间
线程:Thread 线程是进程内部代码基本单位
(1)进程是操作系统分配内存的基本单位
(2)线程是CPU执行代码的基本单位
(3)一个进程内部都多个线程组成，至少一个
(4)多个线程之间"并发执行的",宏观上看同时执行，
微观上看依次循环执行
chorme浏览器
一个 chrome进程内，有多个线程，负责向WEB服务器并发的发起请求,以获取资源: 请求资源线程
还有一个线程将所有内容绘制浏览器中--UI主线程,
还负责执行js/css代码.
观察如下代码
<button>按钮一</button>
<script src="x.js">很耗时js任务</script>
<button>按钮二</button>
现象:js执行代码中，按钮一可见，按钮2不可见
原因:浏览器执行代码和渲染网页同一个线程
解决:创建新线程，由它来执行耗时js任务,
UI主线程负责渲染网页.
代码:
<button>按钮一</button>
<script>
var w = new Worker("x.js");
</script>
<button>按钮二</button>
3.2:Worker线程缺陷
浏览器不允许Worker线程执行任何DOM/BOM操作
原因:浏览器只允许UI线程操作DOM/BOM，若多个
线程同时操作DOM/BOM页面，混乱..
所以类似jquery脚本不能使用Worker来执行
3.3:Worker线程可以给UI线程发送数据
worker:
postMessage(strMessage);
ui:
var w = new Worker("x.js");
w.onmessage = function(e){e.data}
3.4:UI线程可以给Worker线程发送数据
ui:
var w = new Worker("x.js");
w.postMessage(stringmeg);
worker:
onmessage = function(e){e.data}
练习: (1)在HTML中有一个INPUT,请用户输入数字,
(2)添加按钮"开始计算累加和"
(3)<div id="rs"></div>
点击此按钮,创建Worker 线程来计算出用户
输入数字累加和，在下方创建div显示计算结果
|
项目中Worker的使用场景 (1)只要js中有DOM/BOM就不能用Worker (2)Worker适合于执行耗时JS任务, 复杂计算,数据统计.. |
3.5:h5新特性九--Web Stroage
在浏览器中存储一些用户专用数据:内容定制，样式定制..
在客户端存储数据可以使用的技术
(1)cookie技术,浏览器兼容性好,不能超4KB,操作复杂
(2)Flash存储，依赖Flash播放器
(3)H5 WebStorage,不能超8MB,操作简单
(4)IndexDB 可存大量数据，还不是标准
|
Session:会话（用户操作过程）浏览器从打开某一个网站第一页面开始.(会话开始),中间可能打开多个页面(会话中),直到关闭浏览器(会话结束) |
WebStorage技术中，为用户提供二个对象
(1)sessionStorage 类数组对象,会话级数据存储
保存数据 sessionStorage[key] = value
保存数据 sessionStorage.setItem(key,value);
获取数据 var value = sessionStorage[key];
获取数据 var value = sessionStorage.getItem(key);
删除数据 sessionStorage.removeItem(key);
删除数据 sessionStorage.clear();
数据个数 sessionStorage.length
获取key var key = sessionStorage.key(i);
创建login.html 输入用户名，密码，提交，用户点击
提交按钮,提示"登录成功,3s后自动跳转 首页"
返回index.html 右上角 欢迎回来 xxx 退出登录
创建logout.html 提示"您己退出登录,3s后自动跳转首页"
返回index.html 右上角提示"请登录"超链接
(2)localStroage