前端週報：Mozilla成立字節碼聯盟；W3C公佈Display locking草案加速渲染

前端週報：Mozilla成立字節碼聯盟；W3C公佈Display locking草案加速渲染

做者｜Zehao前端週報專一大前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點，分爲新聞熱點、深度閱讀、開源項目 & 工具等欄目。歡迎關注【前端之巔】微信公衆號（ID: frontshow），及時獲取前端週報內容。 前端新聞  Mozilla 攜手英特爾等公司成立 Bytecode Alliance：擴展 WebAssembly

Mozilla 曾在 Firefox 瀏覽器中大力推廣 WebAssembly 標準。近日，該公司與其餘機構合做成立了全新的 Bytecode Alliance（字節碼聯盟），夯實 WebAssembly 和 WebAssembly System Interface (WASI) 等標準，從而建立全新的軟件基礎。字節碼聯盟的目標是建立一個安全、高效和模塊化的新 runtime 環境和語言工具鏈，同時但願讓更多平臺和設備使用它們。字節碼聯盟開發的技術基於 WebAssembly 和 WASI，因爲更高效的代碼編譯，以及將 C 和 C ++ 代碼移植到 Web 的擴展功能，它們被視爲 JavaScript 的潛在替代品。

目前，Mozilla 聯合了英特爾、Red Hat 和 Fastly 等公司加入該聯盟。隨着時間的推移，可能會有更多成員加入。

https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

 Display Locking：W3C 更快的 Web 渲染提案

Web 孵化器社區小組（WICG）最近推出了 Display Locking，這是一組 Web API 更改提議，可使開發人員和瀏覽器輕鬆地擴展到大量內容並在渲染時進行控制。

一方面，更快的網頁加載和交互直接改善了用戶的網絡體驗。另外一方面，網站正逐年變得更大、更復雜，部分緣由是它們支持愈來愈多的用例且包含更多信息，這致使頁面包含了大量的 DOM。因爲 DOM 當前是原子渲染的，隨着站點或應用程序大小的增長，渲染時間會愈來愈長。如今採用的技術包括隱藏不可見的內容或虛擬化，但這些方法都存在必定的侷限性。

Display Locking 建議引入三個新功能：

• rendersubtree 屬性，控制 DOM 子樹是否呈現。該屬性能夠由瀏覽器或其餘用戶代理修改，並觸發 MutationObserver 事件供開發人員響應。
• content-size 屬性，爲標記爲不可見的內容分配佔位符大小 rendersubtree。

• updateRendering 元素對象上的方法，以預渲染標記 rendersubtree 爲不可見的子樹中的內容。

使用案例：

<div id=target rendersubtree="invisible skip-activation" style="content-size: 200px 200px">...content...</div>
<script>
target.setAttribute('rendersubtree', ''); // makes #target render
</script>

瀏覽器不會渲染此 div 的子樹（但 div 自己會被渲染，這使 div 能夠顯示「 loading ...」），而且瀏覽器無需爲 div 的子樹執行任何渲染生命週期階段。div 的顯示就好像它有一個 200px x 200px 的子元素同樣，如同佔位符，以便佔用 div 子樹的大體佈局大小。這樣可使頁面佈局大體正確，並保留佈局上溢大小以進行滾動。即便經過 user-agent 功能，瀏覽器也可能沒法呈現內容。

目前，該提案處於早期階段，瀏覽器中尚未該提案的實現。

https://github.com/WICG/display-locking/blob/master/README.md

行業新聞  GitHub 啓動代碼永久保存計劃

近日，GitHub 宣佈，爲了把開源軟件留給子孫後代，將在 2020 年 2 月 2 日爲全部公共存儲庫生成快照，保存在北極地下 250 米的廢棄煤礦，快照存儲在膠片上，壽命長達 1000 年。

 2019 年 Chrome 開發者峯會亮點：引入 Web Bundles

在今年的 CDS 上，谷歌預覽了 Web Bundles，使 Web App 向原生應用邁進了重要的一步。這是一種基礎架構 API，開發人員能夠經過它以任何格式（電子郵件、FTP 甚至 USB）分發他們的 Web 內容，而內容自己不會有任何改動。這種技術不只可以以閃電般的速度交付 Web 內容，並且即便用戶處於脫機狀態，也能夠實現點對點內容分發。未來，諸如 後臺按期同步（Background Periodic Sync） 和 內容索引（Content Indexing） 之類的 API，將使開發人員能夠主動緩存和顯示相關的 Web 內容，即便用戶沒有 Internet 鏈接也能繼續瀏覽頁面。如今，Web Bundles 已經能夠在實驗標誌後可用，而另外兩項新技術如今能夠經過 Origin Trials 使用。

 張勇：啓動香港上市是阿里新的起點

11 月 15 日，阿里巴巴宣佈啓動做爲全球發售一部分的香港公開發售，股份代號爲 9988。根據招股書，阿里巴巴將做爲一家有「不一樣投票權」架構的公司在港上市。此前，小米集團和美團點評以「不一樣投票權」架構在港交所上市，並已於 2019 年 10 月 28 日正式歸入港股通。根據阿里巴巴的公司質量和交易規模，將來也將被歸入港股通。阿里巴巴也將成爲首個同時在中國香港和美國紐約兩地上市的中國互聯網公司。

深度閱讀  19 個來自 2019 React Conf 的總結

由 Anthony Morris 收錄的 2019 React Conf 的話題總結。

https://segmentfault.com/a/1190000020973753

 瀏覽器中的 TiDB：在 WebAssembly 上運行 Golang 數據庫

WebAssembly 對 Go 應用程序的支持尚處於起步階段。這篇博客文章演示了使用 WebAssembly 在 Web 上運行的 TiDB 數據庫。

https://pingcap.com/blog/tidb-in-the-browser-running-a-golang-database-on-webassembly/

 JavaScript 中的數據結構

本文討論了在 JavaScript 中常常被忽視的數據結構，你將瞭解到棧、隊列、鏈表、哈希表和樹的概念，掌握這些數據結構將爲你的平常工做提供幫助。

https://blog.logrocket.com/know-your-javascript-data-structures/

 玉伯：個人前端成長之路

來自螞蟻金服前端技術專家玉伯在阿里前端大學的一次分享。

https://www.yuque.com/yubo/morning/grow-up-at-alibaba

工具 & 庫 & 資源

【mermaid-js】 用字符建立圖形和圖表。

https://github.com/mermaid-js/mermaid

【linkinator】掃描你的網站，找到全部那些損壞的連接。

https://github.com/JustinBeckwith/linkinator

【東京公共交通的實時可視化】Akihiko Kusanagi 提供了一個驚人的 3D 數據可視化項目：Mini Tokyo 3D 在地圖上可實時顯示東京的公共交通系統。

https://nagix.github.io/mini-tokyo-3d/#14/35.6814/139.767/0/60

【開發人員免費服務】 開發人員可用的免費服務，它們一般很難找到，free-for.dev 爲你整理了涵蓋 Saas、Paas、Iaas 等免費服務列表。

https://free-for.dev/

往期回顧

前端週報：將來五年 Web 趨勢預測；TS 3.7 發佈；W3C 網站從新設計

問卷調查

爲了能提供更多你們感興趣的優質內容，咱們特別定製了一份調查問卷，但願讀者朋友們幫忙填寫。您但願前端之巔多輸出哪方面的內容？目前在哪些技術方向有困惑？歡迎各位在問卷中留下寶貴建議！

https://jinshuju.net/f/IXCkXX?from=singlemessage&isappinstalled=0