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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/253632.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/253632.shtml
英文地址,請注明出處:http://en.pswp.cn/news/253632.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

如何尋回xp盤符丟失的數據

分區丟失是比較常見的數據恢復案例&#xff0c;需要注意&#xff0c;分區丟失后不要再重建新的分區。保護好資料丟失現場&#xff0c;可以最大程度的恢復出資料。具體的恢復方法看正文了解。 工具/軟件&#xff1a;星空數據恢復軟件 步驟1&#xff1a;先百度搜索并下載程序打開…

afx_msg函數意思

應用程序框架產生的消息映射函數 例如&#xff1a;afx_msg void OnBnClickedButton1(); 其中 afx_msg為消息標志&#xff0c;它向系統聲明&#xff1a;有消息映射到函數實現體&#xff1b; 而在map宏定義中&#xff0c;就有具體消息和此函數的映射定義&#xff08;可以是自定義…

文件得編碼和文件名的編碼是不一樣的

1.新知識&#xff0c;通過文件后墜名的編碼判斷文件類型&#xff0c;可以有效的防止腳本文件偽裝為正常得文件。 2.攔截器和過濾器。 過濾器只能夠在http請求和回復的時候進行處理。 但是攔截器可以在很多地方攔截&#xff0c;例如程序拋異常等都可以捕獲的到。還可以進行權限得…

Visual computing——概述

Visual Computing&#xff08;視覺計算&#xff09;是所有處理二維圖像和三維模型的計算機科學學科的總稱&#xff0c;即計算機圖形學、圖像處理、可視化、計算機視覺、虛擬和增強現實、視頻處理&#xff0c;但也包括模式識別、人機交互、機器學習等方面。核心挑戰是視覺信息&a…

推薦!手把手教你使用Git

一&#xff1a;Git是什么&#xff1f; Git是目前世界上最先進的分布式版本控制系統。 二&#xff1a;SVN與Git的最主要的區別&#xff1f; SVN是集中式版本控制系統&#xff0c;版本庫是集中放在中央服務器的&#xff0c;而干活的時候&#xff0c;用的都是自己的電腦&#xff0…

I2C協議學習

I2C Bus(Inter-Integrated Circuit Bus) 最早是由Philips半導體&#xff08;現被NXP收購&#xff09;開發的兩線式串行總線&#xff0c;常用于微控制器與外設之間的連接。 一、概述 以下是 I2C 總線的一些特性&#xff1a; 只需要兩條總線&#xff1b;一條串行數據線 (SDA) 和…

ajax的簡單介紹

響應主體&#xff0c;就是服務器給我們返回的結果內容&#xff08;瀏覽器里的responsive&#xff09; 請求主體&#xff0c;是我們給服務器的數據 輸入域名發起一次請求&#xff0c;得到的可能是標簽&#xff0c;標簽可能還要在發一次請求 post怎么發請求&#xff1a;form表單 …

DM365 color space

YUV的幾種格式 420P&#xff1a;420P數據的存放方式一般是先存放Y&#xff0c;然后存放U&#xff0c;最后存放V的數據&#xff0c;每一個像素使用12bits(1.5BYTE)保存。 422P&#xff1a;422P數據的存放方式也是先存放Y&#xff0c;然后存放U&#xff0c;最后存放V的數據&…

JavaScript 標準參考教程-閱讀總結(三)

1、DOM模型 DOM 是 JavaScript 操作網頁的接口&#xff0c;全稱為“文檔對象模型”&#xff08;Document Object Model&#xff09;。它的作用是將網頁轉為一個 JavaScript 對象&#xff0c;從而可以用腳本進行各種操作&#xff08;比如增刪內容&#xff09;。 1&#xff09;do…

P1136 迎接儀式

P1136 迎接儀式 題目描述 LHX教主要來X市指導OI學習工作了。為了迎接教主&#xff0c;在一條道路旁&#xff0c;一群Orz教主er穿著文化衫站在道路兩旁迎接教主&#xff0c;每件文化衫上都印著大字。一旁的Orzer依次擺出“歡迎歡迎歡迎歡迎……”的大字&#xff0c;但是領隊突然…

云服務器 VNC 遠程連接

此服務器買來是為了搭建IC EDA云的&#xff0c;因此選用的是centOS 6的環境&#xff0c;對各EDA軟件兼容較好。本人手頭拮據&#xff0c;因此買的是騰訊云活動期間的云服務器&#xff0c;只能說夠用吧。 一、桌面安裝 在云服務器控制臺登陸上遠程主機&#xff0c;依次執行下列…

Python自動化測試框架有哪些?

作者 | KITTY GUPTA 譯者 | 張健欣 令開發者萬分高興的是&#xff0c;開發自己的測試框架的日子終于結束了。以前&#xff0c;開發團隊接手一個項目并開始開發時&#xff0c;除了項目模塊的實際開發之外&#xff0c;他們不得不為這個項目構建一個自動化測試框架。一個測試框架應…

面試題——4種數組去重的方法

數組去重或者其衍生作為筆試題或者機試題出現的幾率也是很大的&#xff0c;寫出的方法越多&#xff0c;則讓面試官覺得你思維越開闊&#xff0c;那么成功的幾率當然就大了。 廢話不多說&#xff0c;下面來說說下面我整理的4中數組去重的方法 方法一&#xff1a; findInArr方法s…

MFc消息映射機制理解

何謂消息、消息處理函數、消息映射&#xff1f;消息簡單的說就是指通過輸入設備向程序發出指令要執行某個操作。具體的某個操作是你的一系列代碼。稱為消息處理函數。在SDK中消息其實非常容易理解&#xff0c;當窗口建立后便會有一個函數&#xff08;窗口處理函數&#xff09;開…

Effective C++ 條款11:在operator=中處理自我賦值

”自我賦值”發生在對象被賦值給自己時: class Widget { ... }; Widget w; ... w w; // 賦值給自己 a[i] a[j]; // 潛在的自我賦值 *px *py; // 潛在的自我賦值class Base { ... }; class Derived: public Base { ... }; void doS…

Demosaic算法學習

一、概述 由于成本和面積等因素的限定,CMOS圖像傳感器在成像時,感光面陣列前通常會有CFA (color filter array),CFA過濾不同頻段的光,因此,Sensor的輸出的RAW數據信號包含了3個通道的信息。 CFA的排列方式一般有以下幾種: 現在應用最廣泛的是Bayer CFA。…

Sql Server中查詢當天,最近三天,本周,本月,最近一個月,本季度的數據的sql語句...

--當天&#xff1a;select * from T_news where datediff(day,addtime,getdate())0--最近三天&#xff1a;select * from T_news where datediff(day,addtime,getdate())< 2 and datediff(day,addtime,getdate())> 0--本周&#xff1a;select * from T_news WHERE (DATEP…

linux設備驅動歸納總結(五):3.操作硬件——IO靜態映射【轉】

本文轉載自&#xff1a;http://blog.chinaunix.net/uid-25014876-id-83299.html linux設備驅動歸納總結&#xff08;五&#xff09;&#xff1a;3.操作硬件——IO靜態映射 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 有時候會覺…

UML中關聯,聚合,組合的區別及C++實現

類間關系 在類圖中&#xff0c;除了需要描述單獨的類的名稱、屬性和操作外&#xff0c;我們還需要描述類之間的聯系&#xff0c;因為沒有類是單獨存在的&#xff0c;它們通常需要和別的類協作&#xff0c;創造比單獨工作更大的語義。在UML類圖中&#xff0c;關系用類框之間的連…

sql server management studio 快速折疊object explorer中的instance

https://social.msdn.microsoft.com/Forums/sqlserver/en-US/6e20fa7a-c0a9-496b-89b2-19c6bd996ffc/how-to-collapse-object-explorer-tree-in-management-studio?forumsqltools home鍵&#xff0c;回到top level。 然后F5刷新&#xff0c;就會自動折疊了轉載于:https://www.…