Web 開發者新神器：能執行遊戲引擎的火狐 Quantum 瀏覽器

編者按：Aytekin Tank是JotForm的創始人，最近，他刊文表揚了火狐Quantum，新瀏覽器增加了許多先進技術，他認為開發者應該試一試。

我不知道你多大了，因為我是80年代末出生的，所以清楚記得Firefox（火狐）的崛起和衰落。

火狐是以“IE6開源競爭對手”這一身份出現的。它很強大，因為它提供多種選擇，例如，使用者可以通過多種多樣的擴充套件包增加新功能，改變視覺主題。所有人都喜歡火狐。

幾年後，又一個競爭對手闖入市場，它的名字叫作Chrome。很快Chrome就衝上雲霄，超越了對手。事實上，Chrome有如此多的使用者，而且是在相當短的時間內積累的，它已經成為谷歌最有價值的資產之一。我相信有許多人讀這篇文章時，使用的就是Chrome瀏覽器。

作為一名開發者，我深知取悅使用者是一件極難的事。

隨著複雜WEB技術、應用、軟體的發展，消耗過多RAM和CPU的問題漸漸變得嚴重起來。

JotForm 開發團隊的Deniz最近評論說：

“我有一臺計算機，它是最新的Macbook Pro。用它從事開發工作（開啟Chrome DevTools）時，電池電量流逝的速度太快了。”

我相信，如果你也是一名開發者，應該會有相似的看法，或者聽到周圍有人有過相似的抱怨。

你可能會進一步深思，考慮換一換瀏覽器，不再用Chrome。

正因如此，全面改變的新版火狐才會應運而生，它就是火狐Quantum。

2017年，Quantum正式推出，面向Android、Linux、iOS、Mac和Windows使用者，此時離Mozilla推出第一版火狐瀏覽器已經10多年了。

除了披上漂亮的現代“外衣”，傳聞還說Quantum載入網站的速度是火狐6的兩倍，消耗的記憶體比Chrome少了30%。

10年之後的今天，Mozilla必須尋找新方法，將自己的產品與競爭對手區別開來，這是一件很難的事。

為了完全發揮計算機的效能，Moilla重寫近400萬行程式碼，引入了許多尖端技術，比如Servo、Rust、Quantum/Stylo。

付出是有回報的。

依我之見，與其它瀏覽器相比，Quantum有著很大的優勢。

為什麼？原因如下：

新技術

WebAssembly

在網上執行更大、更華麗或者更復雜的應用程式，這是許多開發者的夢想。近年來，一些新元素流行起來，比如照片和視訊編輯、3D遊戲編輯、VR/AR，網民的預期提高了很多很多。

JavaScript引擎（比如谷歌V8、Mozilla SpiderMonkey、微軟Charka）已經高度成熟，速度越來越快，可以處理這些任務了。

到了2017年年底時，我們已經可以在火狐瀏覽器上執行Unity和Unreal遊戲引擎了。現在呢，其它大型掃描器也開始支援。

 A-Frame和WebVR

最近出現一門重要的創新技術，它就是VR。由於手機、瀏覽器、相關產品（比如Oculus Rift和HTC Vive）的進步，VR會以很快的速度繼續進化。

開發WebVR框架時，Mozilla扮演了重要角色，它還用新WEB瀏覽器增強VR體驗。因為有了A-Frame（它得到了Mozilla的支援），一個出色的WebVR框架流行起來，每一個人都能使用了。

Common Voice專案

蘋果Siri、微軟Cortana、亞馬遜Echo和谷歌Home都遵循專有、封閉式策略，它們用這種策略開發語音識別技術，這些技術成為產品的根基，可以響應語音命令。

現在Mozilla推出了Common Voice，它是一個開源專案，目標是將語音識別技術帶給每一個人。

不論是誰，都可以對著機器大聲朗誦句子，將線索告訴機器，為Common Voice做貢獻。你可以對常用語音轉錄文字進行驗證，確保識別引擎走上正軌。

火狐Devtools

我在上面談到了火狐的一些變化，當我告訴你DevTools有了很大的進步，你肯定不會感到意外。Debugger.html正是其中之一。哪些地方最棒呢？Debugger.html是一個開源專案，放在GitHub，每一個人都可以參與開發。

下面就讓我們來說說Debugger.html的新功能：

通用-檢查工具

改變主題

新的開發者工具有3種不同的主題選項：一是暗黑主題，二是清爽主題，三是Firebug主題。仍然有許多人喜歡Firebug工具，雖然它的開發工作已經停止。

CSS Grid

在CSS領域出現一種新的創新技術，它就是CSS Grid Layout。有了DevTools工具，你可以檢視“display: grid”元素。你還可以關閉一些東西，比如行號、區域名稱。

Box Model

一些元素的“Margin”和“Padding”值有時會讓人困惑。有了盒模型 ( Box Model )架構，你可以輕輕鬆鬆調節，修改一些屬性，比如Margin、Padding值，修改邊框。

CSS變數

引入變數，這是CSS的另一個重要創新。雖然到目前為止並不是所有瀏覽器都支援變數，但是隨著時間的推移，肯定都會支援的。顧名思義，所謂的CSS變數就是你可以為變數賦予任何數值。想檢視數值是多少嗎？很簡單，只要將滑鼠移到上面就行了。

新增或者刪除Class

在DevTools儀表板的右側有一個按鈕叫作.cls，按一下，你可以往HTML元素中新增或者剔除CSS Class。

Hover

當你點選右側的.cls旁邊的按鈕，可以測試當前元素的Hover、Active、Focus特性。

字型

當你檢查某個元素，可以看到元素使用了什麼字型，它是如何新增的。

動畫

動畫也是另一個突破，它變得越來越流行了。我曾經寫過一篇博文，專門介紹動畫。你可以緩慢播放動畫，也可以追蹤它的移動方式。

XPath

開發者應該聽說過“web scraping”這一術語。如果你想用“scraper”從WEB頁面抽取一些元素，可以通過XPatch在頁面上確定元素的位置。

控制檯（Console）

控制檯記錄

當你進入控制檯，可以輕鬆檢查物件。因為元素以樹形結構顯示，你可以輕鬆選中物件，或者禁止它們出現。

Console.group

不知道你沒有聽說過，可以用console.group ()函式和groupCollapsed ()函式讓事件變得更有序、更清晰？

偵錯程式

Breakpoint

好的JavaScript除錯工具是不可或缺的。有了Breakpoint，你可以輕鬆插入斷點，仔細檢查元素。

Source Maps

SCSS、WebAssembly、TypeScript、Babel，這些JavaScript技術或者CSS編譯技術變得越來越流行。正因如此，瀏覽器處理的程式碼架構往往與之前編寫時大不相同。通過Source Maps（源地圖）技術，你可以處理原始檔。

功能搜尋-專案搜尋

如果你想查詢錯誤，有一個功能很實用，這個功能幫你在眾多的檔案中查詢錯誤。

樣式編輯器

在這個編輯器內，你可以看到自己為CSS所寫的一切東西。

Performance

為了確保我們編寫的網頁快速流暢渲染（加入動畫時這點尤其重要），我們不應該忘了60fps法則。有了這個功能，你可以追蹤每一幀顯示時花了多少時間。

網路監控

CSS、JavaScript、圖片和許多其它的元素會在Network Monitor區域載入，如此一來，我們就可以通過瀏覽器解析頁面，顯示頁面。你可以利用該區域檢查效能，例如，觀察檔案的狀態，看看上傳用了多長時間，有沒有載入成功。

儲存

當使用者訪問網站時，我們用cookies儲存相關資訊，或者儲存在本地。你可以檢查、編輯、新增或者刪除資訊。

最好的思考

讓使用者從第三方產品轉移，進入自己的專利性產品，將消費者鎖在自己的軟體生態系統內，大企業的業務模式基本上都是這樣的。

不過火狐並沒有建立所謂的專利圍牆。正因如此，當你將瀏覽器換成火狐時就會容易很多。

當然，轉移仍然不是一件容易的事。你必須改變自己的習慣，改變快捷方式，改變瀏覽器擴充套件程式，儲存密碼。不過我認為改變是值得的。

讓我們再給火狐一次機會吧。