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

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

[TOC]html

十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 應用可進行緩存,並可在沒有因特網鏈接時進行訪問。 應用程序緩存爲應用帶來三個優點:java

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

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

manifest 文件是簡單的文本文件,它告知瀏覽器被緩存的內容(以及不緩存的內容)。manifest 文件可分爲三個部分:web

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

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

更新緩存

一旦應用被緩存,它就會保持緩存直到發生下列狀況: 用戶清空瀏覽器緩存 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服務器

相關文章
相關標籤/搜索