我不知道你多大了，因為我是80年代末出生的，所以清楚記得Firefox（火狐）的崛起和衰落。
火狐是以“IE6開源競爭對手”這一身份出現的。它很強大，因為它提供多種選擇，例如，用戶可以通過多種多樣的擴展包增加新功能，改變視覺主題。所有人都喜歡火狐。
Web 開發者新神器：能運行遊戲引擎的火狐Quantum 瀏覽器
更多
幾年後，又一個競爭對手闖入市場，它的名字叫作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存儲相關信息，或者存儲在本地。你可以檢查、編輯、添加或者刪除信息。
最好的思考
讓用戶從第三方產品轉移，進入自己的專利性產品，將消費者鎖在自己的軟件生態系統內，大企業的業務模式基本上都是這樣的。
不過火狐並沒有建立所謂的專利圍牆。正因如此，當你將瀏覽器換成火狐時就會容易很多。
當然，轉移仍然不是一件容易的事。你必須改變自己的習慣，改變快捷方式，改變瀏覽器擴展程序，保存密碼。不過我認為改變是值得的。
讓我們再給火狐一次機會吧。
本文翻譯自www.jotform.com，原文鏈接 。如若轉載請註明出處。
文章來源：https://tw.news.yahoo.com/web-%E9%96%8B%E7%99%BC%E8%80%85%E6%96%B0%E7%A5%9E%E5%99%A8%EF%BC%9A%E8%83%BD%E9%81%8B%E8%A1%8C%E9%81%8A%E6%88%B2%E5%BC%95%E6%93%8E%E7%9A%84%E7%81%AB%E7%8B%90quantum-%E7%80%8F%E8%A6%BD%E5%99%A8-072132521.html
