Mozilla Firefox Ltd面經分享：真題+參考答案匯總

06-25

來自專欄筆經面經

作者：unkist

鏈接：https://www.nowcoder.com/discuss/81980

來源：牛客網

北京謀智火狐信息技術有限公司（北京市東城區建國門華潤大廈17層）過去面試的時候感覺電梯好神奇啊！一邊的電梯是直達18層以上的，我按了18層準備到了再往下走一層，一個老司機和我說要做另一邊的1-17層的電梯，這個電梯到18層你走下去門也是鎖定，我就又坐回1層繞過去走那邊的電梯上去。

人事和面試官還是人很好的，不過自己能力不足浪費了這次機會也是挺遺憾的，面試官說現在公司沒怎麼主動招人（我是從官網找到投的），也暫時不準備招實習生，主要還是看實力（這時就感覺有點懸了，感覺我的水平只夠實習生的）。面試過程還是很愉快的（雖然大部分問題都是一知半解）。

面試題

1. DOCTYPE的作用，不加會怎樣？

我的回答（一開始就涉及到我知識的盲區了）：

瀏覽器會不知道文檔類型（然後又扯到DTD上），但現在瀏覽器會有容錯機制會解析HTML頁面。

正解：

https://www.cnblogs.com/alwaysblog/p/5822834.html
聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat，
瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。

如果你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啟了標準模式
那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。

2. 用過的編碼，區別是什麼，哪個佔據的空間

我的回答：

GBK2312（這裡可能已經聽出來錯了），和UTF-8

區別是一個字元占的位元組不同，好像GBK2312是2或3個位元組，UTF-8是全都3位元組

這回答的應該是UTF-8（因為在我印象里UTF-8所有的都一樣長，GBK2312有短的）

正解：

UTF-8：Unicode TransformationFormat-8bit，允許含BOM，但通常不含BOM。是用以解決國際上字元的一種多位元組編碼，它對英文使用8位（即一個位元組），中文使用24為（三個位元組）來編碼。UTF-8包含全世界所有國家需要用到的字元，是國際編碼，通用性強。UTF-8編碼的文字可以在各國支持UTF8字符集的瀏覽器上顯示。如，如果是UTF8編碼，則在外國人的英文IE上也能顯示中文，他們無需下載IE的中文語言支持包。
GBK是國家標準GB2312基礎上擴容後兼容GB2312的標準。GBK的文字編碼是用雙位元組來表示的，即不論中、英文字元均使用雙位元組來表示，為了區分中文，將其最高位都設定成1。GBK包含全部中文字元，是國家編碼，通用性比UTF8差，不過UTF8佔用的資料庫比GBD大。

GBK、GB2312等與UTF8之間都必須通過Unicode編碼才能相互轉換

3. 如何進行移動端適配，移動端默認寬度是多少答對百位就行

我的回答：

使用媒體查詢

meta設置width_=device-width後默認寬度就是屏幕寬度，默認寬度應該是320

正解：

移動端適配：

https://www.cnblogs.com/MaggieGao/p/6994868.html
https://segmentfault.com/a/1190000011586301

移動端默認寬度是多少：

https://www.zhihu.com/question/22938382

應該想聽到640這個答案（哎，高清屏啊，但用F12初始是320*480）

4. 移動端要做什麼特殊處理

我的回答：

圖片最好做兩份，一份普通的，一份高清屏的（沒表達很清楚，因為以前看過一些講解Retina屏的就這麼說了）

正解：

https://www.cnblogs.com/xsilence/p/5774737.html

5. 常用標籤，p標籤的應用場景，列表有哪些，哪個是有序哪個是無序，還有一個定義列表知道么

我的回答：

div和p（原本想了一下HTML5新出的想了一遍header 到footer，答之前問了一句答HTML5新出的么，面試官說就常用的然後就蒙了，該想一個界面從html頂答到html尾啊，估計分已經要掉沒了）

段落，別的想不到了

有序和無序

ol是有序，ul是無序（ordered和unordered）

是自定義的能改變前面樣式列表么？

正解：

常用標籤：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

p標籤的應用場景：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p

定義列表：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl

6. CSS全名，層疊是什麼意思，優先順序是怎樣的

我的回答：

層疊樣式表，cross 什麼 sheet來著（犯二了）

層疊的意思扯到CSS按照樹購建上去了

內聯的最高，然後是id，然後是class，最後是元素，important強製為最高

正解：

全稱：

層疊樣式表(英文全稱：Cascading Style Sheets)

層疊指：

https://www.zhihu.com/question/20077745

7. 畫一個盒模型

我的回答：

直接給padding包住border了（讓我檢查檢查我還沒看出來，要是有打分估計到這就扣完了），然後想到box-sizing說了點

正解：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

8. 說說清除浮動的方法和他們分別設置在哪，說說BFC和IFC

我的回答：

clear:both和overfull:hidden

clear:both個div或設置在after偽元素上，overfull:hidden設置在父元素上

BFC是塊級元素，IFC是行內元素，行內元素不能設置寬度（又準備說英文全稱又說一半忘了=_=，格式化上下文"Formatting Context"這個確實用了好一陣子學，但還是沒理解透啊）

正解：

https://www.cnblogs.com/jffun-blog/p/9068619.html

9. 偽元素是什麼，偽元素有哪些

我的回答：

CSS創建的元素，afer，before，選擇第一個字母，選擇第一行

正解：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
就像 pseudo classes (偽類)一樣，偽元素添加到選擇器，但不是描述特殊狀態，它們允許您為元素的某些部分設置樣式。

10. 常用的長度單位，是不和px對應還有個ex來著

我的回答：

em，rem，px，em是相對於父元素，rem是相對於根元素

ex沒接觸過

正解：

http://www.divcss5.com/css3-style/c33196.shtml
ex：取當前作用效果的字體的x的高度

11. Ajax，其中的非同步指什麼，Ajax能同步么，參數是什麼，Ajax如何不刷新改變網址

我的回答：

非同步的JS和XML（這個英文全程倒是知道，都不敢說了@_@）

非同步指當主線程走完在這行非同步的函數，數據返回做回調處理

能配置個參數就行，參數忘記了（T_T）

用井號（hash）么

正解：

非同步指什麼：

https://blog.csdn.net/xiaotao_css/article/details/70761666
同步是指：發送方發出數據後，等接收方發迴響應以後才發下一個數據包的通訊方式。

用戶填寫所有信息後，提交給伺服器，等待伺服器的回應（檢驗數據），是一次性的。信息錯誤又要重新填寫！
非同步是指：發送方發出數據後，不等接收方發迴響應，接著發送下個數據包的通訊方式。
當用戶填寫完一條信息後，該信息會自動向伺服器提交，然後伺服器響應客戶端，在此過程中，用戶依然在填寫表格的信息，即向伺服器請求多次，節省了用戶的時間，提高了用戶的體驗。

Ajax同步的參數：

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
xhr.open的第三個參數

==Ajax如何不刷新改變網址==

https://developer.mozilla.org/en-US/docs/Web/API/History_API/Example
History_API
history.pushState、history.popState、 history.replaceState
註：hash也算一種方法

12. 有JS獲取不到的Cookie么

我的回答：

服務端返回的時候有設置好像可以不讓JS獲取，設置哪項忘了

正解：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
HttpOnly 屬性可以阻止通過javascript訪問cookie

13. 有哪些數據存儲的方法，localStorage和sessionStorage的區別

我的回答：

好像是存儲時間不同，sessionStorage和session有點像關閉瀏覽器就沒了（然後提醒了一下我標籤頁），localStorage是可以通用的，sessionStorage不可以通用，是么？我也不敢瞎說（確實忘了真心在瞎說），session屬於服務端的就不算了

正解：

https://www.cnblogs.com/jffun-blog/p/9068735.html
數據有效期
cookie：只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持。
localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據。
作用域
cookie，localStorage：在所有同源窗口中都是共享的。
sessionStorage：不在不同的瀏覽器窗口***享，即使是同一個頁面。

14. addEventListener的第三個參數

我的回答：

是this么，我猜的。（然後又嘮了點什麼，最後說基本一直在用jQuery，然後問下個問題了，徹底暴露了原生JS水平不夠）

正解：

https://www.baidu.com/link?url=HawjzpN3JGRzl0XMopNVOIHDhPnJ-hfdbziIifo3mDk91c3snWwUuSDR2nO5CRpRZKqrWIncxUUHXu6gA16AiRoyDtYKyW9OhT8vO9ObBoJMQ6M1uAXz1HxDFd_gjePZ&wd=&eqid=c075a59800019971000000025b02a587
options 可選
一個指定有關 listener 屬性的可選參數對象。可用的選項如下：
capture: Boolean，表示 listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發。
once: Boolean，表示 listener 在添加之後最多只調用一次。如果是 true， listener 會在其被調用之後自動移除。
passive: Boolean，表示 listener 永遠不會調用 preventDefault()。如果 listener 仍然調用了這個函數，客戶端將會忽略它並拋出一個控制台警告。
mozSystemGroup: 只能在 XBL 或者是 Firefox chrome 使用，這是個 Boolean，表示 listener 被添加到 system group。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div href="#capture-t" id="capturet"> <div href="#capture-m" id="capturem"> <div href="#capture-b" id="captureb"> capture(click me) </div> </div> </div> <button href="#once" id="once">once(click me)</button> <br> <a href="#passive" id="passive">passive(click me)</a> <script> /* ?true 的觸發順序總是在 false 之前； ?如果多個均為 true，則外層的觸發先於內層； ?如果多個均為 false，則內層的觸發先於外層。 */ document.querySelector("#capturet").addEventListener(click, function(){ alert("capturet")//capture: true執行了 }, {capture: false}); document.querySelector("#capturem").addEventListener(click, function(){ alert("capturem") }, {capture: true}); document.querySelector("#captureb").addEventListener(click, function(){ alert("captureb") }, {capture: true}); document.querySelector("#once").addEventListener(click, function(){ alert("once") }, {once: true}); document.querySelector("#passive").addEventListener(click, function(e){ e.preventDefault();//失效了 alert("passive") }, {passive: true}); </script></body></html>

15. 上傳文件能獲取到確定地址么，JS怎麼使用表單中準備上傳的文件

我的回答：

獲取不到，給的是臨時文件夾的路徑

真沒這麼用過

正解：

能獲取但得配置：

http://www.jb51.net/article/89653.htm

==使用表單中準備上傳的文件==

https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

16. （未解決）activeX如何在FF，Chrome上用

我的回答：

以前搜過確實找過沒有解決，不然我也不會在IE上調試給我累完了。FF上倒是有個網銀助手好像能模擬IE，activeX是個什麼插件來著用VS開發的，應該是能有辦法讓FF，Chrome用

正解：

https://blog.csdn.net/wlanye/article/details/51754091
https://blog.csdn.net/wlanye/article/details/41342969
http://mozilla.com.cn/thread-35931-1-1.html
（以前確實看了但看評論不確定能完美支持）

17. 你看過WebSocket的控制台的請求么？它的狀態碼是什麼

我的回答：

看過就一個請求，狀態碼是200？這個確實沒注意了

正解：

請求只有一個
狀態碼: 101 / Switching Protocols

18. 你知道的狀態碼，304會去訪問伺服器么

我的回答：

404找不到頁面，500伺服器出錯，200成功，304緩存

304不會去訪問伺服器我試過服務端沒有接收到請求（完全弄錯了，該去看《圖解HTTP》了）

正解：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
https://www.zhihu.com/question/24880842
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/304
如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內容（自上次訪問以來或者根據請求的條件）並沒有改變，則伺服器應當返回這個狀態碼。304 響應禁止包含消息體，因此始終以消息頭後的第一個空行結尾。

19. (附加題)什麼是墨卡托投影？

可能想創造個比較輕鬆愉快的結局吧，最後問了道我們專業相關的題。在前端面試中問到GIS的題也是挺歡樂的。

我的回答：

一種不是切就是割，不是圓柱就是圓錐投影的別名，跟高斯投影一樣是個別名只能記住這些了。

正解：

https://baike.baidu.com/item/%E5%A2%A8%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1/5477927?fr=aladdin
墨卡托投影，是正軸等角圓柱投影。由荷蘭地圖學家墨卡托(G.Mercator)於1569年創立。假想一個與地軸方向一致的圓柱切或割於地球，按等角條件，將經緯網投影到圓柱面上，將圓柱面展為平面後，即得本投影。墨卡托投影在切圓柱投影與割圓柱投影中，最早也是最常用的是切圓柱投影。

面試前的準備

雖然不知道方向找對沒，等面試結束再發出來吧，別面試官真點開博客就尷尬了。

開始找工作的第一個面試謀智火狐的，雖然大學學了不少但感覺沒參加過ACM（演算法方面薄弱）、沒深入學習過底層框架和沒系統研究過面試是硬傷，但後天面試現在也只能看些面試經常問的了。當初投北京謀智火狐信息技術有限公司是因為覺得Firefox和MDN非常帥氣、很有意思，通過今天查資料才了解了Mozilla=_=!，和Firefox和MDN給人的感覺差不多是個很有意思的組織。寫了這麼多，那麼這位會寫代碼的friends能否成為Mozillians呢？感覺有點懸啊！

Mozilla相關信息

https://zh.wikipedia.org/wiki/Mozilla

https://zh.wikipedia.org/wiki/Mozilla%E5%85%AC%E5%8F%B8

https://zh.wikipedia.org/wiki/Firefox

研發部：Front-end Engineer

崗位職責：

根據公司產品發展方向，負責網站前端代碼編寫工作。
根據產品需求，分析並給出合理的頁面前端結構解決方案。
根據產品設計，開發兼容多屏幕、多設備的響應式布局的網頁。

職位要求：

1. 本科及以上學歷（統招），計算機軟體開發相關專業，3年以上前端開發工作經驗。

本科及以上學歷（統招）：遼寧工程技術大學，本科統招沒問題
計算機軟體開發相關專業：地理信息科學，也算是相關吧
3年以上前端開發工作經驗：在學校連學習帶開發也3年了，雖然接觸的項目比不上工作

2. 精通各類Web前端開發技術，包括 Javascript、Ajax、CSS 等WEB開發領域相關技術，有前端框架設計經驗，熟悉並使用過VUE 框架。

不能算是精通，都會把

3. 熟練掌握 Javascript/HTML5/CSS3 相關技術，具有響應式布局網頁開發經驗。

基本OK

4. 熟悉手寫或使用成熟框架渲染具有響應式布局的網頁，可訪問性等用戶體驗知識有相當的了解和實踐經驗。

響應式布局的網頁：

媒體查詢

可訪問性：

百度百科：https://baike.baidu.com/item/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7/3184962?fr=aladdin
MDN：https://developer.mozilla.org/zh-CN/docs/learn/Accessibility
Wiki：https://en.wikipedia.org/wiki/Accessibility

5. 有很強的學習能力，清晰的思維，能獨立分析和解決問題。

基本OK

6. 深刻理解 WEB 標準和兼容性，對表現與數據分離、WEB 語義化、提升用戶體驗有獨特的見解和實踐經驗。

表現與數據分離：使用MVC和MVVM將數據操作和頁面展示分開便於維護（頁面改動時只需改動V層即可），D3.js，數據可視化插件感覺也有這個意思

P.S.

MVC : V<->C<->M
MVVM: V<->VM<->M

7. 嚴格遵守團隊的代碼格式、結構的規定，編寫易讀、易維護、高質量、高效率的代碼。

寫代碼的基本素養

8. 有後端技術（如PHP）經驗者、熟練使用 Smarty、Thinkphp 等模板技術者優先。

後端技術（如PHP）經驗：PHP連學加用3年
熟練使用 Smarty、Thinkphp 等模板技術：學過Smarty和Thinkphp（跟著視頻大概過了一編），大學期間一直用的是CodeIgniter框架，Smarty模板引擎據說用的不多了。（Thinkphp是框架吧）

9. 有 Photoshop 經驗者優先；會vue框架者優先。

基本OK

心得

寫了好多都寫成日記了，前面還是有點有用的。可能因為第一次面試吧，感覺從前期準備到後期涼涼確實都已經儘力了，雖然感覺面試過程失誤蠻大的，但面試之前還是沒來得及看完準備看的書也是準備的太不充分了。

原本感覺會卡在演算法上，但只問了自己感覺還行的

2.精通各類Web前端開發技術，包括 Javascript、Ajax、CSS等WEB開發領域相關技術，有前端框架設計經驗，熟悉並使用過VUE 框架。
（不能算是精通，都會把）
3.熟練掌握 Javascript/HTML5/CSS3 相關技術，具有響應式布局網頁開發經驗。
（基本OK）

就發現自己根本不OK了。繼續學習吧！

這位經驗值+1的friends接下來的旅程又會怎樣呢？

與作者交流：https://www.nowcoder.com/discuss/81980

更多筆經面經：https://www.nowcoder.com/discuss?order=3&type=2