首頁  >  文章  >  web前端  >  除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

青灯夜游
青灯夜游轉載
2020-06-28 13:51:082281瀏覽

今天的JavaScript 已經無所不在了,以傳統的方式使用 JavaScript,開發者可以在各種Web 瀏覽器中創建Web 應用;透過Node.js,可以開發命令列工具與伺服器等應用;而在桌面領域,透過基於JavaScript 與HTML、CSS 等Web 技術的Electron 框架可以建構跨平台桌面應用;React Native 則可以用來開發跨平台行動應用程式;此外,JavaScript 甚至可以在IoT 裝置上運作。

Ecma TC39 管理 ECMAScript 生態的發展,它是目前 JavaScript 語言背後的標準,Google V8 團隊一直積極參與 JavaScript 相關標準化工作。

V8 是Google開源的 JavaScript 引擎(同時也是 WebAssembly 引擎),Chrome、Node.js 與 Electron 等平台都基於 V8。同時除了 Chrome,基於 Chromium 的一系列 Web 瀏覽器,如 Opera 與即將正式發布的 Microsoft Edge 在底層也基於 V8。

推薦學習:《JavaScript影片教學

#在前幾天的 Google I/O 2019 上,V8 團隊的 Mathias Bynens 與Sathya Gunasekaran 分享了JavaScript 的最新研發進展。

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?
V8 團隊表示,他們的使命是要領導現代JavaScript 與WebAssembly 高性能,值得關注的是,分享者用了“real-world”描述性能,並介紹所謂“ real-world performance」是與那些單純為了benchmark 數據的性能相對的,谷歌強調想要達到的是實際上在現實生活中能夠做到高性能的效果,而不是那麼「出世」。

他們舉了幾個例子。自 Chrome 61 以來,V8 團隊將原始 JavaScript 解析速度提高了一倍,這些資料是在真實網站上測試得到的。同時他們已經成功從主執行緒移除了 40% 的解析和編譯工作,網頁啟動變得更加順滑。

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

除了Chrome,速度提昇在Node.js 中也有很明顯的體現,Node.js 12 相較於Node.js 7,async 速度提升了10倍,Promise.all 速度提升了12 倍。

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

解析速度與運行時效能提升之外,記憶體佔用也減少了,Chrome 70 到 Chrome 76,Android 上執行實際 Web 應用的記憶體消耗減少了20%

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

接下來講者分享了JavaScript 的一些新特性,涵蓋內容很多,下邊簡單介紹幾個比較有趣的特性:

使用方言口語化顯示時間片語 API

這是眾多新Intl.* API 中的一種,也是觀眾討論比較多的一個特性,Intl.* 是指國際化特性。

我們日常生活中提到時間的時候會說「上週」、「上個月」與「42 秒前」等口語,使用新的 Intl.RelativeTimeFormat() 函數,程式可以使用特定語言回傳這些片語,而不是方方正正的「one week ago」、「one month ago」和「42 seconds ago」。

演講者使用英語與泰米爾語演示了該功能,效果如下:

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

#目前該功能支持秒、分鐘、小時、天、週、月與季的短語表示,並且支援多種語言(不清楚有沒有中文支援),開發者不再需要維護一個專門的相對時間短語列表。

globalThis

想要編寫適用於不同平台的JavaScript,不管是Node.js 還是Web 瀏覽器,都需要有對應的程式碼來適配全域“ this”,例如Web 瀏覽器,需要使用“window”來判斷,但在“window”不可用的情況下,還需要用“self”檢查,在Node 中可以用“global”判斷,但如果是獨立的JavaScript shell 環境,那情況又有變化。

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

環境因素很複雜,各種平台環境需要進行繁雜的適配流程,這對開發者來說會很痛苦,所以V8 團隊新增了一個“ globalThis」特性,它可以在不依賴環境的情況下,輕鬆存取全域「this」。

目前 Chrome、FireFox、Safari 與 Node.js 都已經支援該特性,同時對於 polyfill 與其它需要全域存取「this」的函式庫也適用,從這一點來說該特性是一個比較大的改進。

WeakRef

通常JavaScript 中物件參考意味著只要對物件進行了引用,那麼它就不會被GC,而弱引用中,如果其它物件都不再引用該對象,那麼GC 機制會自動回收該對象所佔用的內存,不考慮該對像是否仍在該引用的結構中。

目前 JavaScript 中有 WeakMap 與 WeakSet 兩個弱引用方法,只要將物件加入 WeakMap 或 WeakSet 中,GC 在觸發條件時就可以將其佔用記憶體回收。

WeakRef 是一種更高級的 API,它提供了一個進入物件生命週期的窗口,可以解決 WeakMap 僅支援 object 類型作為 Key 的場景。

講者以快取影像為例,map 會鎖定影像的 Key 與 Value,這樣影像名稱和影像資料就不會被 GC,因為它一直被引用著。另一方面,弱引用 Wea​​kMap 在這裡並不會起作用,因為圖像名稱是一個字串類型,而 WeakMap 規定其 Key 只能為 object 類型。

WeakRef 透過直接快取圖像物件的方法來解決這個問題,圖像名稱作為 Key,WeakRef 弱引用作為 Value 儲存在快取中。但這會帶來另一個問題:因為圖片名稱是 Key,那麼 map 還是會一直保留這些圖像名稱字串。理想的情況是這些字串也要被 GC。

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

WeakRef 的解決方案是引入一個新的API “FinalizationGroup()”,註冊一個回調函數,在GC 觸發時從快取中刪除前邊提到的“殘留的圖像名字串」。

除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?

除了這幾點,新的JavaScript 語言特性還包含:

  • class fileds 可以直接在class 中初始化變數而不用寫在建構子中

  • 私有setter 與getter

  • ##String .matchAll 可以進行正規多次匹配

  • 提高數字可讀性,numeric seperators 可以在寫數字的時候使用「_」作為分隔符號

  • 新的大數字型別BigInt

  • #新增一些Intl.* API,也就是用於國際化的API,如Intl.NumberFormat 本地化格式化數字顯示,Intl.RelativeTimeFormat() 與Intl.DateTimeFormat() 本地化顯示時間

  • 頂級await,無需寫async

  • 新的Promise 函數Promise.allSettled() 與Promise.any()

#具體內容可以查看演講影片:

https://www.youtube.com/watch?v=c0oy0vQKEZE

以上是除了 async 速度翻 10 倍,JavaScript 還帶來了什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:oschina.net。如有侵權,請聯絡admin@php.cn刪除