web worker原理 SSE原理
第一部分
什么是 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.. }?
?
?
?
?
轉載于:https://www.cnblogs.com/zhuzhenwei918/p/7440038.html
總結
以上是生活随笔為你收集整理的web worker原理 SSE原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一次实现皮肤测温！小米Watch S1
- 下一篇： P1136 迎接仪式