第一部分
什么是 web worker??
我們一直強調JavaScript是單線程的,但是web worker的出現使得JavaScript可以在多線程上跑,只是web worker本身適合用于一些復雜的、耗費cpu的運算,不能操作window、document、parent對象,所以說本質上的JavaScript還是單線程的。
這里,我們僅僅舉一個簡單的例子,看看web worker是怎么運行的,畢竟是html5的規范,目前瀏覽器的支持還不是很好。
web worker就是運行在后臺的JavaScript,獨立于其他腳本,不會影響頁面的性能。您還可以做任意想做的事情,不會影響點擊等操作。
?
?
?
為什么需要web worker?
對于耗時而不操作DOM的JavaScript,我們就可以使用web worker,增強性能。?
?
?
web worker有什么要注意的地方?
- 不是所有的瀏覽器都支持,使用前要檢查瀏覽器是否支持。?
- web worker運行于外部文件中,所以他們無法訪問下面的JavaScript對象。
- 理解好 worker,worker在計算機領域通常被翻譯為線程或者是進程。而這里的worker意義也是如此。 我們需要將之正確對待。?
?
?
web worker實例
創建worker.js外部文件:
var i = 0; setInterval(function () {postMessage(i++); }, 1000);
?
html文件如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><p>計數:<span id="result"></span></p><button οnclick="start()">web worker開始工作</button><button οnclick="stop()">web worker結束工作</button><script>var w;function start() {if (typeof Worker != 'undefined') {w = new Worker('worker.js');w.onmessage = function (event) {document.getElementById('result').innerHTML = event.data;}} else {document.getElementById('result').innerHTML = '您的瀏覽器不支持web worker';}}function stop() {w.terminate();w = undefined;}</script> </body> </html>
即首先判斷:是否支持Worker構造函數,如果支持,就傳遞一個js文件創建這個文件的實例,然后就可以調用 message 事件,接收從 worker.js 中獲得的數據。?
注意: 必須在服務器上測試,否則會有跨域問題。
最終,我就可以看到效果了。?
代碼地址:?https://github.com/zzw918/cross-origin/tree/master/webWorker
?
?
?
第二部分:
HTML5?服務器發送事件(Server-Sent Events)
HTML5 服務器發送事件(server-sent event)允許網頁獲得來自服務器的更新。
?
Server-Sent 事件 - 單向消息傳遞
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點,前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件,更新能夠自動到達。
例子:Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。
?
?
接收 Server-Sent 事件通知
EventSource 對象用于接收服務器發送事件通知:
var source=new EventSource("demo_sse.php"); source.onmessage=function(event) {document.getElementById("result").innerHTML+=event.data + "<br>"; };
?
?
- 創建一個新的 EventSource 對象,然后規定發送更新的頁面的 URL(本例中是 "demo_sse.php")
- 每接收到一次更新,就會發生 onmessage 事件
- 當 onmessage 事件發生時,把已接收的數據推入 id 為 "result" 的元素中
?
檢測 Server-Sent 事件支持
?
if(typeof(EventSource)!=="undefined") {// 瀏覽器支持 Server-Sent// 一些代碼..... } else { // 瀏覽器不支持 Server-Sent.. }
?
?
?
?
?