十9、HTML 5 多線程與離線存儲

@(HTML5)[多線程與離線存儲]

[TOC]

十9、HTML 5 多線程與離線存儲

多線程 Worker

1. 前端頁面

// 建立對象
var w = new Worker("work.js");
w.postmessage("發送的數據");
w.onmessage = function(e){
	// do something
}
複製代碼

2.多線程處理頁面

self.onmessage = function(e){
	// 前端頁面傳過來的數據
	console.log(e.data)
}
複製代碼

離線存儲

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。 HTML5引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。 應用程序緩存爲應用帶來三個優點：

• 離線瀏覽 – 用戶可在應用離線時使用它們
• 速度 – 已緩存資源加載得更快
• 減小服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。

---

1. 新建一個 .appcache 文件，html文件的html標籤中引入這個文件
2. 在apache的httpd.conf文件下添加 AddType text/cache-manifest .appcache
3. 在.appcache文件下進行設置：

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分爲三個部分：

1. CACHE MANIFEST - 在此標題下列出的文件將在首次加載後進行緩存
2. NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
3. FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

在線的狀況下,用戶代理每次訪問頁面，都會去讀一次manifest.若是發現其改變, 則從新加載所有清單中的資源

更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列狀況： 用戶清空瀏覽器緩存 manifest 文件被修改（包括註釋） 由程序來更新應用緩存

注意事項

• 站點離線存儲的容量限制是5M
• 若是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視爲失敗，瀏覽器繼續所有使用老的緩存
• 引用manifest的html必須與manifest文件同源，在同一個域下
• 在manifest中使用的相對路徑，相對參照物爲manifest文件
• CACHE MANIFEST字符串應在第一行，且必不可少
• 系統會自動緩存引用清單文件的 HTML 文件
• manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關係，若是是隱式聲明須要在最前面
• FALLBACK中的資源必須和manifest文件同源
• 當一個資源被緩存後，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
• 站點中的其餘頁面即便沒有設置manifest屬性，請求的資源若是在緩存中也從緩存中訪問
• 當manifest文件發生改變時，資源請求自己也會觸發更新

同域跨文檔操做（服務器下運行）

iframe內頁： 父頁面操做子頁面：contentWindow 子頁面操做父頁面：window.top(找到最頂級的父頁面)/parent(第一父頁面)

新窗口頁： 父頁面操做子頁面：window.open 子頁面操做父頁面：window.opener