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

前端週報專注大前端領域內容,以對外文資料的蒐集爲主,幫助開發者瞭解一週前端熱點,分爲新聞熱點、深度閱讀、開源項目 & 工具等欄目。歡迎關注【前端之巔】微信公衆號(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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章