H5新特性---Web Worker---Web Stroage

今天的目标

  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