涼經-Mozilla Firefox Ltd

時間 2019-12-19

原文原文鏈接

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

人事和麪試官仍是人很好的，不過本身能力不足浪費了此次機會也是挺遺憾的，面試官說如今公司沒怎麼主動招人（我是從官網找到投的），也暫時不許備招實習生，主要仍是看實力（這時就感受有點懸了，感受個人水平只夠實習生的）。面試過程仍是很愉快的（雖然大部分問題都是隻知其一;不知其二）。php

面試題

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

個人回答（一開始就涉及到我知識的盲區了）：
瀏覽器會不知道文檔類型（而後又扯到DTD上），但如今瀏覽器會有容錯機制會解析HTML頁面。css

正解：html

https://www.cnblogs.com/alwaysblog/p/5822834.html前端

聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。vue

document.compatMode：html5

BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。java

CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。css3

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat，web

瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。

若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式

那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的做用。

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

個人回答：
GBK2312（這裏可能已經聽出來錯了），和UTF-8

區別是一個字符佔的字節不一樣，好像GBK2312是2或3個字節，UTF-8是全都3字節

這回答的應該是UTF-8（由於在我印象裏UTF-8全部的都同樣長，GBK2312有短的）

正解：

https://www.cnblogs.com/jffun-blog/p/9088966.html
（感謝Molier發現這裏的錯誤，提醒了我）

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