2017 年對 Mozilla 來說是極具意義的一年。多年來 Mozilla 努力幫 Firefox 加速，種種心血終於在 Firefox Quantum 上線後開花結果，也為未來幾年的發展打下基礎。在 2018 年裡，Mozilla 將繼續在此基礎上積累能量。在這樣的理念下，接下來 Firefox 更新的幾個版本都將繼續用「Quantum」這個名字。下面來介紹一下近期更新的 Firefox 58 有什麼新特色：
Gecko 引擎性能
「量子項目」(Project Quantum) 的目標是達成 Firefox 渲染引擎 Gecko 的現代化。其中幾項重大更新已隨 Firefox 57 及前一版的 Firefox 發布，許多新功能也即將登場，部分功能將於 2018 年陸續推出。除了 Quantum 的主軸外，我們還會不斷改進瀏覽體驗的不同面向和瀏覽速度。以下是幾個隨最新版 Firefox 發布的功能更新：
非主線程繪圖 Off-Main-Thread Painting (OMTP)
Quantum Render（或稱 WebRender）是 Firefox 今年上線的繪圖系統的重大更新。通過硬體加速的網頁內容渲染，Quantum Render 可望大幅提高處理性能。但這不是我們為強化 Firefox 繪圖性能所做的唯一改變！Firefox 58 把網頁繪製流程（將一個網頁上所有像素都畫出來的過程）移到專屬的線程上。
瀏覽器的主線程向來是稀缺資源。它負責執行網頁的腳本、響應用戶輸入的信息和維持頁面的現有狀態。在 OMTP 出現前，網頁當前的狀態會被轉成繪圖命令，而整頁的像素數據則由主線程產生（或光柵化）。這意味著性能相關的捲動頁面動作、動畫或腳本等任務將被打斷，或某一腳本可能造成丟幀（dropped frames）或畫面卡頓的情況。
但有了 OMTP 後，網頁的外觀狀態仍會在主線程上運行，但可能佔據大量資源的光柵化（rasterization）任務會被派給「光柵化線程」，主線程便可繼續計算和保持響應力。
就算 WebRender 開發工作已完成並加入了 Firefox，難免仍有硬體加速無法使用、或因驅動程序的缺陷而造成 WebRender 無法運作的情況。但 OMTP 將可提供遠優於目前的渲染流程的體驗。
OMTP 是 Mozilla 多年來逐步改造繪圖架構的心血結晶，隨著所有的努力開花結果，使用者的體驗將大幅改善。如果你想進一步了解 OMTP 或看一些初期的性能測試數據，Mozilla 團隊在這篇博客文章中提供了深入的說明。
背景標籤頁節流（throttling），讓 Firefox 心無旁鶩
為了減少 CPU 的整體使用量，Firefox 58 將開始針對在背景執行的標籤頁的定時器（timer）控制項（setTimeout/setInterval）做 CPU 調節。那些定時器仍將啟動，但頻率會減低。不過，WebRTC/WebSocket 聯機和音頻播放不在 CPU 節流之列。您可以到MDN 參考更多信息。
WebAssembly 流媒體編譯程序（Streaming Compiler）
（來源：Making WebAssembly even faster，作者：Lin Clark）
WebAssembly 是一種適合編譯到 web 平臺、可移植的二進位編譯格式，能創造出直逼原生的執行速度。幾種工具鏈（如 Rust 編譯程序和 Unity Engine）已支持直接生成二進位文件格式的 WebAssembly 文檔。大型二進位有效載荷（payload）最棘手的問題是下載文件太大，而且，傳統的基於插件的 Web runtimes（如 Flash）必須先下載完整包後才能執行。
幸運的是，WebAssembly 就是針對像 Web 這樣的網絡環境所設計的！Firefox58 鎖定這樣的特性，增加對於流媒體編譯（streaming compilation）的支持。如此一來，Firefox 便可在下載完成前先開始編譯。等編譯程序準備好後，你的模塊就可以在下載完後立即開始執行。
Lin Clark 在文章中（還有畫圖說明！）更深入地介紹了流媒體編譯程序對於WebAssembly 的幫助。就算您對 WebAssembly 已經相當熟悉，他的那篇文章還是值得一讀。您也可以在 MDN 上找到 WebAssembly 完整的參考文件。
CSS 字體顯示
網絡字體和 @font-face 指令對於網頁字體設計的定製化提供很大的空間，不過，就算用的是最新的壓縮字體格式，文檔還是可能過大。這可能導致頁面加載時間過長，使得用戶在網頁中不是看到系統字體（FOUT），就是什麼字都看不到（FOIT）。不同的瀏覽器有不同的默認行為，想達成對於某特定網站和其用戶最適合的行為並不容易。
font-display 描述（descriptor）的作用是讓網站根據不同的字體選擇恰當的字體加載行為。有的網站可能先立刻以系統字體來渲染文本主體（body），而圖標的字體或顯示類型則能先等候一段時間後再以替代字體呈現，好讓特別風格或象徵性的字體有機會好好加載。
既然這是配合 Firefox 58 上線寫的文章，所以，無需贅言：Firefox 58 已加入 font-display 了。它被納入個別的 @font-face 區塊，並具有下面幾種值之一：
auto 是默認值，能讓瀏覽器採用正常的替代/隱藏文字策略
block 會告訴瀏覽器先暫時渲染看不到的文字，之後再採用替代字體。如果接下來網絡字體在任何時間點加載完成，文字就會改用新字體
swap 將立刻把文字渲染成替代字體，但和 block一樣會強制等待一段時間讓字體加載
fallback 會縮短瀏覽器渲染隱藏文本的時間，之後再渲染替代字體。如果字體再過一段短暫的時間後仍未載入，就算最後還是加載完成，瀏覽器也將不會改字體
optional 採用和 fallback 一樣短暫的隱藏文本等候時間，但會完全跳過換掉字體的步驟。如果字體在隱藏文本超時前未載入，後續所有在該頁的連接時間都將使用替代字體。只好希望下次加載更順利了！
應用場景不同，使用偏好也會隨之改變。若是設計如雜誌風格般精美的版面，或許會想儘可能等頁面加載完整的字體種類，但移動版的新聞網站也許就不必太堅持網頁字體是否如實呈現。
新 Promise 功能可減少重複的程序代碼
Promises 曾於 ES2015 推出，它提供一種標準方法來編寫異步程序代碼及處理成功和失敗的操作。Firefox 58 納入新的標準 .finally() 方法，讓程序代碼不論 Promise 對象被解決或被拒絕，都能繼續執行下去。請參考以下範例：
hideLoadingSpinner() 重複了，因為不管 loadPage() 成功與否，我們都把 spinner 移除。.finally() 則可幫我們避免重複：
雖然這是小事，但別忘了，「不要重複」（DRY）不是編寫程序的基本原則嗎？ 更多有關 .finally() 的信息，請見MDN。
Firefox for Android 支持 PWA
漸進式網頁應用程式（Progressive Web Apps, PWA）是能進一步強化網站功能的現代化網絡科技，可以讓網站在手機上實現接近原生應用的使用體驗。Android 版的 Firefox 58 加強對於 PWA 的支持，用戶可以把兼容的網站安裝到行動裝置的主畫面上。以下是相關演示視頻：
當 Firefox 58 用戶連上通過 HTTPS 聯機的網站時，只要是有效的安裝信息文件（manifest），瀏覽器的地址欄即會顯示一個小圖標。按下小圖標後，畫面將跳出「加入主畫面」的確認信息，該網絡應用就會被加入用戶 Android 設備的主畫面。以後，只要從主畫面開啟，該應用便能配合屏幕的尺寸和方向來顯示，也會和其他開啟過的應用一樣出現在程序頁（app switcher）中。
MDN 中有基礎指南可供參考，請見 Add to Home screen（加入主畫面）。
另一個值得一提的新功能與外部連結的處理方式有關：當用戶瀏覽已安裝的 PWA 時，一按下外部連結，Firefox 58 便會以自定義標籤頁開啟網頁。這樣一來，URL 和安全信息都一目了然，用戶的安全得到保障。另外，頁面載入得也更快了（加載自定義標籤頁比加載整個瀏覽器的時間要短），還能同時保留該 PWA 色調風格，以及展現出符合原生應用的行為。
Mozilla 計劃在接下來發布的更新中增加更多與 PWA 相關的 API 支持：除了背景同步處理的 API（Background Sync）已快就緒（目前目標是隨 Firefox 59 發布）之外，在部署 Payment Request 和 Web Share APIs 上的進度也令人期待。
如果您想深入了解 Android 版 Firefox 58 對於 PWA 支持的功能特點，您可以參考 Andreas Bovens 的文章，還可以看看 MDN 上有關 Progressive Web Apps 的介紹。
更多精彩功能期待您的體驗！
除了這幾大新功能之外，Firefox 58 還有許多值得探索的地方。歡迎參考正式的官方版本說明或 MDN 上針對開發者提供的各個功能說明文件。
Firefox 今年將有許多新功能陸續上線，敬請期待。六個星期後再見！
火狐Mozilla Firefox
firefox.com.cn