[活動紀錄] 2017 Mozilla Developer Conference 開發者大會

這場辦在六福皇宮的 Mozilla 開發者大會，主要在介紹最新的量子專案 (Quantum Project)，也就是目前最新版本 Firefox 57，號稱是史上最大的改版，可以下載 Firefox Nightly 進行體驗。

打開瀏覽器，使用者介面整個改觀，傳統的弧形頁籤截彎取直，風格類似 Windows 的 Metro 介面，同時也提供自定義的介面設定。在技術層面，效能提升了很多 (比其他瀏覽器快 3 倍)，號稱是第一個加入 Web VR 的瀏覽器 (其他家都還在開發中，或不敢預設開啟該功能)。除此之外，擴充套件將捨棄傳統架構，全部改為 WebExtension，與其他瀏覽器的相容性高，也易於移植。整天聽下來，讓我最有感的其實是網路隱私的議題，原來現在的分析技術已經可以透過數位足跡 (Fingerprint) 分辨出你是誰，識別率已經超過 90%。

歷史回顧與量子計畫

開場是由 Mozilla 資深副總裁 Mark Mayo 帶來歷史故事以及新專案介紹，他的演說相當有誠意，內容很貼近台灣聽眾呀。隨著故事年代，不只介紹 Mozilla 的重要里程碑，也順便說說台灣的重要大事。

當中也稍微靠北一下微軟的介面 Copy 他們，Chrome 的介面也 Copy 他們。這讓我想到幾天前看到的文章，說蘋果的造型是抄襲來的，德國設計大師 Dieter Rams 並沒有打算控告，而認為「模仿是最真誠的奉承」。我想創作本身還是需要臨摹，然後進一步成長，像我就很喜歡 Chome 的梯形分頁 (Tab)，由稜有角比較符合我的口味。

新的量子計畫以 Servo 這套實驗性的專案為基礎，採用 Rust 語言 (Firefox 的開發語言) 進行開發，並透過不同的團隊進行優化，包含 Quantum DOM、Quantum CSS、Quantum Network、Quantum DOM、Quantum Flow、Quantum Render，詳細說明請參見 Mozilla Wiki。

效能部分，有許多工程師輪番上陣介紹，以下記錄我所聽到的東西。

Quantum Network：想加速網路資源的取得。根據經驗，其實有 8% 的資料從 Cache 拿還比從 Network (網路) 拿慢，所以就想來個資源存取競賽：讓網頁同時跟 Cache 與 Network 要資料，看看誰能比較快拿到資源。另一個部分是 Content driven priority，主要的概念是：與使用者有關的資源先取得、先渲染。根據設計，會先繪製出 Active Tab、網頁內容這些使用者比較關注的內容，而比較不重要的追蹤碼 (Tracking Script) 則排在最低優先序的 Queue。同時，火狐也開始支援新的傳輸協定 QUIC，是基於 UDP 的傳輸方法。

Quantum CSS：想辦法要加快樣式套用，包含兩個層面 Cascade 與 Select matching。我們都知道 CSS 的樣式有繼承關係，而 Select matching 的過程中，只要同個層級有多個 Child，就有辦法做平行加速。根據 Mozilla 資深主任軟體工程師墨俊凱所述，Gmail 有一百多條 CSS Rule (指的是 CSS tree 的高度)，且超過 97 % 的火狐用戶有多核心處理器，所以相當適合。

Quantum DOM：主要希望能減少背景分頁工作，讓你開多個網站的時候能更順暢，不會影響到當前分頁。

Front-end Design：針對前端設計，這次大改版定調是大膽且現代的視覺元素，跟以往厚重的 Australis 外觀說掰掰。比較特別的是為了要維持 60 fps 的畫面輸出，需要精確計算每個 Task 所花的時間，如果超時就必須跳到下個 Block。而為了讓網載入速度更快，會偵測使用者的滑鼠軌跡，假如你的游標快移動到 Tab 分頁按鈕了，他會在背後偷偷發通知說該渲染畫面囉，好爭取些繪圖時間。

新技術介紹

Web VR 與 A-frame

未來希望透過瀏覽器就能體驗虛擬實境，所以各家廠商都卯足力氣在做 Web VR 的開發。為了要吸引多開發者，Mozilla 釋出了 A-frame 工具，這是一套開源框架，讓你在瀏覽器上撰寫虛擬實境影用程式。

A-frame : A web framework for building virtual reality experiences

這個攤位讓大家用 HTC Vive 體驗 Web VR，仔細看螢幕，畫面是透過瀏覽器渲染出來的唷。假如你家裡也有虛擬實境裝置與手把 (否則無法發射子彈)，打開 Firefox 瀏覽器，到 A-Frame 網站打開 A-blast 遊戲進行試玩。

WebExtenstions

雖然擴充套件捨棄傳統架構，改為 WebExtension 使得限制更多，但相對提升了使用者安全，開發者也不會不小心誤用 API。根據 Mozilla 的統計，超過一半的用戶會裝擴充套件 (Add-on)，開發擴充套件絕對有廣大的市場與發展機會。現在，WebExtenstions 只有 4000 多個，因此 Mozilla 強力的在推 WebExtenstions，所以開發送審不用等，能自動通過審查，未來也會舉辦更多推廣活動，現在丟作品上去是大好時機呀。

至於 WebExtenstions 的開發已經有許多範例可以參考，官方網站有詳細的說明文件，覺得不請楚的話，也可以去看 Chrome 的開發文件，是相容的。

網頁支付

就是把信用卡號預存起來，當你要付款的時候能自動帶入，這個功能在 Chrome 上也有，有些擴充套件也能達成此功能。

網路隱私

這個部分我想花點時間寫成一篇文章，所以先保留 xd

WebAssembly

以前沒有聽過 WebAssembly，感覺滿有趣的，主要的概念是讓瀏覽器能執行編譯好的程式。想像一下，現在的網頁程式碼 JavaScript 是透過原始碼傳輸，送到瀏覽器端解析然後執行。一來傳輸的程式碼多，二來 JavaScript 的效能沒有很好，一些重要的工作應該用 C/C++ 來加速。所以有了 WebAssembly 之後，我們就能直接把編譯好的 .wasm 檔案在瀏覽器中執行，提升用戶體驗。

會場隨手拍

中午的午餐很高級呀，五星飯店的餐點果然不一樣。

會場中有許多好玩的活動，搜集完四個攤位貼紙，可以獲得一個代幣玩扭蛋，最後抽到一個火狐漫畫書哈哈。

以下是離場填問卷獲得的火狐好棒棒泡麵 (其實就是維力炸醬麵)，火狐貼紙有原版、Nightly 版以及柴犬版本 (狐狸頭變成柴犬)，查了一下才知道他是「神煩狗」啊！

延伸閱讀

有興趣的朋友可以看線上共筆與當時的直播影片

• Mozilla 開發者大會 2017 線上共筆
• 為什麼 Rust 是開發者最愛的語言
• 了解 WebAssembly 的基礎使用方法