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