資訊專欄INFORMATION COLUMN
摘要：因?yàn)橛辛祟愋筒聹y(cè)，引擎通常會(huì)比真實(shí)需要預(yù)留更多的空間。如果你是手動(dòng)維護(hù)的內(nèi)存，可以根據(jù)實(shí)際使用需求來(lái)決定分配和釋放內(nèi)存的策略很多時(shí)候，這不是什么大不了的事。大多數(shù)場(chǎng)景并不會(huì)對(duì)性能要求那么苛刻，反而更多地?fù)?dān)心管理內(nèi)存的麻煩。
這是圖解 SharedArrayBuffers 系列的第二篇：
內(nèi)存管理碰撞課程
圖解 ArrayBuffers 和 SharedArrayBuffers
用 Atomics 避免 SharedArrayBuffers 競(jìng)爭(zhēng)條件
上一篇文章中，我解釋了 JavaScript 這類自動(dòng)管理內(nèi)存的語(yǔ)言是如何處理內(nèi)存的，同樣也解釋了類似 C 語(yǔ)言這種手動(dòng)管理內(nèi)存的語(yǔ)言
為什么這對(duì)于我們討論的 ArrayBuffers 和 SharedArrayBuffers 如此重要？
因?yàn)榧词鼓闶褂玫氖?JavaScript 這種自動(dòng)管理內(nèi)存的語(yǔ)言，ArrayBuffers 也提供了一種手動(dòng)處理數(shù)據(jù)的途徑
為什么你會(huì)有這樣的需求呢？
正如上篇文章所說(shuō)，這里有個(gè)權(quán)衡，自動(dòng)管理內(nèi)存對(duì)開發(fā)者是友好的，但是這會(huì)增加機(jī)器負(fù)擔(dān)，甚至?xí)行阅軉?wèn)題
例如，JS 里創(chuàng)建一個(gè)變量，引擎會(huì)去猜測(cè)變量的類型以及內(nèi)存里如何表示。因?yàn)橛辛祟愋筒聹y(cè)，JS 引擎通常會(huì)比真實(shí)需要預(yù)留更多的空間。根據(jù)變量不同，內(nèi)存分配可能會(huì)是真實(shí)需求的 2-8 倍，這導(dǎo)致了內(nèi)存浪費(fèi)
而且，某些創(chuàng)建和使用 JS 對(duì)象的場(chǎng)景會(huì)讓垃圾回收變得很困難。如果你是手動(dòng)維護(hù)的內(nèi)存，可以根據(jù)實(shí)際使用需求來(lái)決定分配和釋放內(nèi)存的策略
很多時(shí)候，這不是什么大不了的事。大多數(shù)場(chǎng)景并不會(huì)對(duì)性能要求那么苛刻，反而更多地?fù)?dān)心管理內(nèi)存的麻煩。而且一般情況下，手動(dòng)管理內(nèi)存可能更慢
但是對(duì)于底層需要極致優(yōu)化的場(chǎng)景，ArrayBuffers 和 SharedArrayBuffers 為你提供了可能
ArrayBuffer 是如何工作的ArrayBuffer 跟其它 JavaScript 數(shù)組差不多，但是不是所有 JavaScript 類型都可以放進(jìn)去，比如對(duì)象、字符串。你唯一可以放進(jìn)去的只有字節(jié)（可以用數(shù)字表示）
需要澄清的一點(diǎn)是，你事實(shí)上不是直接把這個(gè)字節(jié)到 ArrayBuffer 里就行了，ArrayBuffer 并不知道字節(jié)有多長(zhǎng)，該用多少位去存
ArrayBuffer 僅僅是一個(gè)個(gè) 0/1 組成的串，它不知道第一個(gè)元素和第二個(gè)元素的分割點(diǎn)
為了提供必要的上下文信息，把 ArrayBuffer 分塊，我們需要把它包裹到視圖里，這些數(shù)據(jù)的視圖可以通過(guò)帶類型的數(shù)組添加，已經(jīng)支持很多種類型的數(shù)組了
例如，你可以用一個(gè) Int8 類型的數(shù)組把 0/1 串分割成 8 位一組的序列
或者你可以用一個(gè)無(wú)符的 Int16 類型數(shù)組，把它分割成 16 位一組的序列，可以把它當(dāng)作無(wú)符整型處理
甚至你可以在同一個(gè)基礎(chǔ) buffer 上同時(shí)處理多種視圖，不同視圖在相同操作下會(huì)返回不同的結(jié)果
例如，如果我們從某個(gè) ArrayBuffer 的 Int8 視圖得到第 0 和第 1 個(gè)元素的值，在 Uint16 視圖下，第 0 個(gè)元素與其有相同二進(jìn)制位值，但是得到的值也會(huì)不一樣
這種方式下，ArrayBuffer 幾乎是扮演原始內(nèi)存角色了，它模擬內(nèi)存的各種跟 C 語(yǔ)言里類似的操作
你可能納悶了，為什么不讓開發(fā)者直接操縱內(nèi)存而是采用這個(gè)抽象層。因?yàn)橹苯硬僮鲀?nèi)存會(huì)有安全風(fēng)險(xiǎn)，這個(gè)以后的文章會(huì)講
什么是 SharedArrayBuffer為了說(shuō)明白 SharedArrayBuffers，我需要稍微解釋下并行運(yùn)行代碼和 JavaScript 的關(guān)系
為了更快運(yùn)行代碼或者更更快響應(yīng)用戶事件，你可能會(huì)讓代碼并行運(yùn)行，為了做到這點(diǎn)，你需要分割工作
一個(gè)典型的應(yīng)用中，所有的工作都由一個(gè)多帶帶的主線程處理，這點(diǎn)我之前提到過(guò)……這個(gè)主線程就像一個(gè)全棧工程師，掌管著 JavaScript、DOM 和 視圖
任何能夠從主線程負(fù)載減少工作的方法都對(duì)代碼運(yùn)行效率有幫助，某些情況下，ArrayBuffers 可以減少大量應(yīng)該由主線程做的工作
但是也有些時(shí)候減少主線程負(fù)載是遠(yuǎn)遠(yuǎn)不夠的，有時(shí)你需要增援，你需要分割你的任務(wù)
大多數(shù)語(yǔ)言里，這種分割工作的方法可以使用多線程實(shí)現(xiàn)，這就像很多人同時(shí)在一個(gè)項(xiàng)目里工作。如果你可以完美地把任務(wù)分割為多個(gè)獨(dú)立的部分，你可以分給不同的線程，然后，這些線程就同時(shí)各種獨(dú)立執(zhí)行這些任務(wù)
在 JavaScript 里，你可以借助 web worker 做這種事，這些 web workers 跟其它語(yǔ)言的線程還是有些區(qū)別的，默認(rèn)它們不能共享內(nèi)存
這意味著如果你想分配你的任務(wù)給別的線程，你需要完整把任務(wù)復(fù)制過(guò)去，這可以通過(guò) postMessage 實(shí)現(xiàn)
postMessage 把你傳給它的任何對(duì)象都序列化，發(fā)送到其它 web worker，然后那邊接收后反序列化并放進(jìn)內(nèi)存
這個(gè)過(guò)程是非常慢的
某些類型數(shù)據(jù)（如 ArrayBuffers）你可以通過(guò)移動(dòng)內(nèi)存的方式實(shí)現(xiàn)，這意味著把某個(gè)特定區(qū)域的內(nèi)存移過(guò)去后其它 web worker 就可以直接訪問(wèn)了
但是，之前的 web worker 就無(wú)法訪問(wèn)了
對(duì)于某些場(chǎng)景這是實(shí)用的，但是也有很多場(chǎng)景對(duì)性能要求高，你只能使用共享的內(nèi)存
而這就是 SharedArrayBuffers 為你提供的
有了 SharedArrayBuffer 后，多個(gè) web worker 就可以同時(shí)讀寫同一塊內(nèi)存了
你再也不需要 postMessage 伴有時(shí)延的通信了，多個(gè) web worker 對(duì)數(shù)據(jù)訪問(wèn)都沒(méi)有時(shí)延了
當(dāng)然，這種同時(shí)訪問(wèn)也有風(fēng)險(xiǎn)，會(huì)產(chǎn)生競(jìng)爭(zhēng)條件
這個(gè)下一篇文章會(huì)細(xì)說(shuō)
SharedArrayBuffers 支持情況所有主流瀏覽器都將會(huì)支持 SharedArrayBuffers
Safari 10.1 已經(jīng)支持了，F(xiàn)irefox 和 Chrome 也會(huì)很快支持并發(fā)布，Edge 會(huì)在他們秋季 Windows 更新的時(shí)候發(fā)布
即使所有主流瀏覽器都支持了，我們也不希望開發(fā)者直接使用它們，事實(shí)上，我們是反對(duì)的。你應(yīng)該只使用更高級(jí)的封裝好的抽象層接口
我們期盼的是 JavaScript 庫(kù)開發(fā)者可以提供更簡(jiǎn)單安全的方法來(lái)使用 SharedArrayBuffers
而且，一旦 SharedArrayBuffers 內(nèi)置到平臺(tái)中，WebAssembly 可以通過(guò)它實(shí)現(xiàn)多線程，到那時(shí)候你就可以使用類似 Rust 的多線程語(yǔ)言輕松玩轉(zhuǎn)多線程了
下一篇文章我們會(huì)介紹一個(gè)為避免競(jìng)爭(zhēng)條件的庫(kù)提供基礎(chǔ)操作的工具（Atomics）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83578.html
摘要：你可以從內(nèi)存中直接拿東西，也可以直接往內(nèi)存里存東西當(dāng)你把或者其它語(yǔ)言編譯為時(shí)，編譯工具會(huì)在里增加一些輔助代碼。 作者：Lin Clark 譯者：Cody Chan 原帖鏈接：A crash course in memory management 這是圖解 SharedArrayBuffers 系列的第一篇： 內(nèi)存管理碰撞課程 圖解 ArrayBuffers 和 SharedA...
摘要：如果期間有其它線程更新了，則會(huì)先拿到新的值重新運(yùn)算一次多運(yùn)算的競(jìng)爭(zhēng)條件這些運(yùn)算符成功避免了單運(yùn)算中的競(jìng)爭(zhēng)條件。 作者：Lin Clark 譯者：Cody Chan 原帖鏈接：Avoiding race conditions in SharedArrayBuffers with Atomics 這是圖解 SharedArrayBuffers 系列的第三篇： 內(nèi)存管理碰撞課程 圖...
摘要：前端日?qǐng)?bào)精選劉海打理指北中的錯(cuò)誤處理模式與反模式譯圖解和譯你并不知道中文裝飾器讓你的代碼更簡(jiǎn)潔眾成翻譯第期每個(gè)程序員第一份工作前應(yīng)該知道的件事中的不變性眾成翻譯寫的一次小結(jié)掘金內(nèi)部機(jī)制探秘和文末附彩蛋和源碼前端雜談開發(fā)實(shí)戰(zhàn) 2017-09-30 前端日?qǐng)?bào) 精選 iPhone X 劉海打理指北React16中的錯(cuò)誤處理ES6 Promise：模式與反模式「譯」圖解 ArrayBuffer...
摘要：前端日?qǐng)?bào)精選十問(wèn)幫你理清前端工程師及大前端團(tuán)隊(duì)的成長(zhǎng)問(wèn)題譯讀完細(xì)則之后學(xué)到的件事掘金怎么寫一個(gè)組件庫(kù)一眾成翻譯還有這操作一個(gè)能生成思維導(dǎo)圖的開源搜索引擎知乎專欄中文前端推薦第天值得收藏的基礎(chǔ)教程知乎專欄第期沒(méi)有的一天轉(zhuǎn)載中回調(diào)地 2017-06-15 前端日?qǐng)?bào) 精選 十問(wèn)sofish：幫你理清前端工程師及大前端團(tuán)隊(duì)的成長(zhǎng)問(wèn)題！[譯] 讀完 flexbox 細(xì)則之后學(xué)到的 11 件事 -...
2017-10-01 前端日?qǐng)?bào) 精選 網(wǎng)頁(yè)保存為圖片及高清截圖的優(yōu)化方法前端最佳實(shí)踐（一）——DOM操作Vue 2.0學(xué)習(xí)筆記：v-bindReact Router v4 之代碼分割：從放棄到入門js實(shí)用的十個(gè)小技巧Netflix/falcor: A JavaScript library for efficient data fetchinglllyasviel/style2paints: ske...
閱讀 1122·2021-11-23 10:05
閱讀 1805·2021-11-12 10:36
閱讀 1862·2019-08-30 15:56
閱讀 1698·2019-08-29 12:32
閱讀 3056·2019-08-28 18:04
閱讀 3441·2019-08-26 12:17
閱讀 2512·2019-08-26 11:35
閱讀 1253·2019-08-23 15:11
