“每18至24個月惰拱，前端都會難一倍”

——赫門 “2015深JS大會《前端服務(wù)化之路》主題演講”

題目&答案

• 你遇到過比較難的技術(shù)問題是什么？你是如何解決的喻粹？

• 是否知道關(guān)于設(shè)計模式中的Singleton宇葱，F(xiàn)actory，Strategy绰播，Decrator？

• 常使用的庫有哪些尚困？常使用的前端開發(fā)工具有哪些蠢箩？開發(fā)過什么應(yīng)用或組件？

• 頁面重構(gòu)怎么操作事甜？

網(wǎng)站重構(gòu)：
在不改變外部行為的前提下谬泌，簡化結(jié)構(gòu)、添加可讀性逻谦，而在網(wǎng)站前端保持一致的行為呵萨。
也就是說在不改變UI的情況下，對網(wǎng)站進行優(yōu)化跨跨，在擴展的同時保持一致的UI。
//
傳統(tǒng)網(wǎng)站的重構(gòu)通常是：
表格（table）布局改為 div+css
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器（針對于不合規(guī)范的css）
對于移動平臺的優(yōu)化
針對SEO進行優(yōu)化
//
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面：
減少代碼間的耦合
讓代碼保持彈性
嚴格按規(guī)范編寫代碼
設(shè)計可擴展的API
代替舊有的框架囱皿、語言（如 VB）
增強用戶體驗
//
通常來說對于速度的優(yōu)化也包含在重構(gòu)中
壓縮js勇婴、css、image等前端資源（通常由服務(wù)器來解決）
程序的性能優(yōu)化（如數(shù)據(jù)讀寫）
采用CDN來加速資源加載
對于js嘱腥、DOM的優(yōu)化
HTTP服務(wù)器的文件緩存

• 列舉IE與其他瀏覽器不一樣的特性

觸發(fā)事件的元素被認為是目標(biāo)（target）耕渴。而在IE中，目標(biāo)包含在event對象的srcElement屬性齿兔；
獲取字符代碼橱脸、如果按鍵代表一個字符（shift础米、ctrl、alt除外）添诉，IE的keyCode會返回字符代碼（Unicode）屁桑，DOM中按鍵的代碼和字符是分離的，要獲取字符代碼栏赴，需要使用charCode屬性蘑斧；
阻止某個事件的默認行為，IE 中阻止某個事件的默認行為须眷，必須將 returnValue 屬性設(shè)置為 false竖瘾，Mozilla 中，需要調(diào)用 preventDefault() 方法花颗；
停止事件冒泡捕传，IE 中阻止事件進一步冒泡，需要設(shè)置 cancelBubble 為 true扩劝，Mozzilla 中庸论，需要調(diào)用 stopPropagation()；

• “99%的網(wǎng)站都需要被重構(gòu)”是哪本書上寫的今野？

《網(wǎng)站重構(gòu):應(yīng)用Web標(biāo)準(zhǔn)進行設(shè)計(第2版)》

• 什么叫優(yōu)雅降級和漸進增強葡公？

優(yōu)雅降級：
Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器条霜，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全不能用催什。
如：border-shadow
//
漸進增強：
從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增加不影響基礎(chǔ)瀏覽器的額外樣式和功能的宰睡。當(dāng)瀏覽器支持時蒲凶，它們會自動地呈現(xiàn)出來并發(fā)揮作用。
如：默認使用flash上傳拆内，但如果瀏覽器支持 HTML5 的文件上傳功能旋圆，則使用HTML5實現(xiàn)更好的體驗；

• 是否了解公鑰加密和私鑰加密麸恍？

一般情況下私鑰用于對數(shù)據(jù)進行簽名灵巧，公鑰用于對簽名進行驗證；
HTTP網(wǎng)站在瀏覽器端用公鑰加密敏感數(shù)據(jù)抹沪，然后在服務(wù)器端再用私鑰解密刻肄。

• Web應(yīng)用從服務(wù)器主動推送Data到客戶端有哪些方式？

HTML5提供的WebSocket
不可見的iframe
WebSocket通過Flash
XHR長時間連接
XHR Multipart Streaming
<script>標(biāo)簽的長時間連接（可跨域）

• 對Node的優(yōu)點和缺點提出自己的看法融欧？

優(yōu)點：
因為Node是基于事件驅(qū)動和無阻塞的敏弃，所以非常適合處理并發(fā)請求，因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多噪馏。此外麦到，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的绿饵，因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情瓶颠。
//
缺點：
Node是一個相對新的開源項目拟赊，所以不太穩(wěn)定，它總是一直在變步清，而且缺少足夠多的第三方庫支持要门。看起來廓啊，就像是Ruby/Rails當(dāng)年的樣子欢搜。

• 你用過哪些前端性能優(yōu)化的方法？

(1)減少http請求次數(shù)：CSS Sprites,JS谴轮、CSS源碼壓縮炒瘟、圖片大小控制合適；網(wǎng)頁Gzip第步，CDN托管疮装，data緩存 ，圖片服務(wù)器粘都。
(2)前端模板 JS+數(shù)據(jù)廓推，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果翩隧，每次操作本地變量樊展，不用請求，減少請求次數(shù).
(3)用innerHTML代替DOM操作堆生，減少DOM操作次數(shù)专缠，優(yōu)化javascript性能。
(4)當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style淑仆。
(5)少用全局變量涝婉、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作蔗怠。
(6)避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)墩弯。
(7)圖片預(yù)加載，將樣式表放在頂部寞射，將腳本放在底部  加上時間戳最住。
(8)避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來怠惶，顯示比div+css布局慢。
//
對普通網(wǎng)站有一個統(tǒng)一的思路轧粟，就是盡量向前端優(yōu)化策治、減少數(shù)據(jù)庫請求脓魏、減少磁盤I/O。
向前端優(yōu)化指的是通惫，在不影響功能和體驗的情況下茂翔，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器履腋，程序能直接取得的結(jié)果不要到外部取得珊燎，本機內(nèi)能取得的數(shù)據(jù)不要到遠程取，內(nèi)存能取到的不要到磁盤取遵湖，緩存中有的不要去數(shù)據(jù)庫查詢悔政。減少數(shù)據(jù)庫操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)延旧、將數(shù)據(jù)庫執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢）谋国，減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫文件次數(shù)等迁沫。程序優(yōu)化永遠要優(yōu)化慢的部分芦瘾，換語言是無法“優(yōu)化”的。

• HTTP 狀態(tài)碼有哪些集畅？分別代表什么意思近弟？

完整版
  1**(信息類)：表示接收到請求并且繼續(xù)處理
    100——客戶必須繼續(xù)發(fā)出請求
    101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本
//
  2**(響應(yīng)成功)：表示動作被成功接收、理解和接受
    200——表明該請求被成功地完成挺智，所請求的資源發(fā)送回客戶端
    201——提示知道新文件的URL
    202——接受和處理祷愉、但處理未完成
    203——返回信息不確定或不完整
    204——請求收到，但返回信息為空
    205——服務(wù)器完成了請求逃贝，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件
    206——服務(wù)器已經(jīng)完成了部分用戶的GET請求
//
  3**(重定向類)：為了完成指定的動作谣辞，必須接受進一步處理
    300——請求的資源可在多處得到
    301——本網(wǎng)頁被永久性轉(zhuǎn)移到另一個URL
    302——請求的網(wǎng)頁被轉(zhuǎn)移到一個新的地址，但客戶訪問仍繼續(xù)通過原始URL地址沐扳，重定向泥从，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發(fā)出新的Request沪摄。
    303——建議客戶訪問其他URL或訪問方式
    304——自從上次請求后躯嫉，請求的網(wǎng)頁未修改過，服務(wù)器返回此響應(yīng)時杨拐，不會返回網(wǎng)頁內(nèi)容祈餐，代表上次的文檔已經(jīng)被緩存了，還可以繼續(xù)使用
    305——請求的資源必須從服務(wù)器指定的地址得到
    306——前一版本HTTP中使用的代碼哄陶，現(xiàn)行版本中不再使用
    307——申明請求的資源臨時性刪除
//
  4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執(zhí)行
    400——客戶端請求有語法錯誤帆阳，不能被服務(wù)器所理解
    401——請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用
    HTTP 401.1 - 未授權(quán)：登錄失敗
    　　HTTP 401.2 - 未授權(quán)：服務(wù)器配置問題導(dǎo)致登錄失敗
    　　HTTP 401.3 - ACL 禁止訪問資源
    　　HTTP 401.4 - 未授權(quán)：授權(quán)被篩選器拒絕
    HTTP 401.5 - 未授權(quán)：ISAPI 或 CGI 授權(quán)失敗
    402——保留有效ChargeTo頭響應(yīng)
    403——禁止訪問屋吨，服務(wù)器收到請求蜒谤，但是拒絕提供服務(wù)
    HTTP 403.1 禁止訪問：禁止可執(zhí)行訪問
    　　HTTP 403.2 - 禁止訪問：禁止讀訪問
    　　HTTP 403.3 - 禁止訪問：禁止寫訪問
    　　HTTP 403.4 - 禁止訪問：要求 SSL
    　　HTTP 403.5 - 禁止訪問：要求 SSL 128
    　　HTTP 403.6 - 禁止訪問：IP 地址被拒絕
    　　HTTP 403.7 - 禁止訪問：要求客戶證書
    　　HTTP 403.8 - 禁止訪問：禁止站點訪問
    　　HTTP 403.9 - 禁止訪問：連接的用戶過多
    　　HTTP 403.10 - 禁止訪問：配置無效
    　　HTTP 403.11 - 禁止訪問：密碼更改
    　　HTTP 403.12 - 禁止訪問：映射器拒絕訪問
    　　HTTP 403.13 - 禁止訪問：客戶證書已被吊銷
    　　HTTP 403.15 - 禁止訪問：客戶訪問許可過多
    　　HTTP 403.16 - 禁止訪問：客戶證書不可信或者無效
    HTTP 403.17 - 禁止訪問：客戶證書已經(jīng)到期或者尚未生效
    404——一個404錯誤表明可連接服務(wù)器山宾，但服務(wù)器無法取得所請求的網(wǎng)頁，請求資源不存在鳍徽。eg：輸入了錯誤的URL
    405——用戶在Request-Line字段定義的方法不允許
    406——根據(jù)用戶發(fā)送的Accept拖资锰，請求資源不可訪問
    407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
    408——客戶端沒有在用戶指定的餓時間內(nèi)完成請求
    409——對當(dāng)前資源狀態(tài)阶祭，請求不能完成
    410——服務(wù)器上不再有此資源且無進一步的參考地址
    411——服務(wù)器拒絕用戶定義的Content-Length屬性請求
    412——一個或多個請求頭字段在當(dāng)前請求中錯誤
    413——請求的資源大于服務(wù)器允許的大小
    414——請求的資源URL長于服務(wù)器允許的長度
    415——請求資源不支持請求項目格式
    416——請求中包含Range請求頭字段绷杜，在當(dāng)前請求資源范圍內(nèi)沒有range指示值，請求也不包含If-Range請求頭字段
    417——服務(wù)器不滿足請求Expect頭字段指定的期望值濒募，如果是代理服務(wù)器鞭盟，可能是下一級服務(wù)器不能滿足請求長。
//
  5**(服務(wù)端錯誤類)：服務(wù)器不能正確執(zhí)行一個正確的請求
    HTTP 500 - 服務(wù)器遇到錯誤萨咳，無法完成請求
    　　HTTP 500.100 - 內(nèi)部服務(wù)器錯誤 - ASP 錯誤
    　　HTTP 500-11 服務(wù)器關(guān)閉
    　　HTTP 500-12 應(yīng)用程序重新啟動
    　　HTTP 500-13 - 服務(wù)器太忙
    　　HTTP 500-14 - 應(yīng)用程序無效
    　　HTTP 500-15 - 不允許請求 global.asa
    　　Error 501 - 未實現(xiàn)
  HTTP 502 - 網(wǎng)關(guān)錯誤
  HTTP 503：由于超載或停機維護懊缺，服務(wù)器目前無法使用，一段時間后可能恢復(fù)正常

• 一個頁面從輸入URL到頁面加載顯示完成培他，這個過程中都發(fā)生了什么鹃两？（流程說的越詳細越好）

注：這道題勝在區(qū)分度高，知識點覆蓋廣舀凛，再不懂的人也能答出一些俊扳。高手可以根據(jù)自己擅長的領(lǐng)域自由發(fā)揮，從URL規(guī)范猛遍、HTTP協(xié)議馋记、DNS、CDN懊烤、數(shù)據(jù)查詢梯醒、瀏覽器流式解析、CSS規(guī)則構(gòu)建腌紧、layout茸习、paint、onload/domready壁肋、JS執(zhí)行号胚、JS API綁定等等；
//
詳細版：
(1)瀏覽器會開啟一個線程來處理這個請求浸遗，對 URL 分析判斷猫胁，如果是 http 協(xié)議就按照 web 方式來處理；
(2)調(diào)用瀏覽器內(nèi)核中的對應(yīng)方法跛锌，比如 WebView 中的 loadUrl 方法弃秆； 
(3)通過 DNS 解析獲取網(wǎng)址的 IP 地址，設(shè)置 UA 等信息發(fā)出第二個 GET 請求；
(4)進行 HTTP 協(xié)議會話菠赚，客戶端發(fā)送報頭（請求報頭）盼樟；
(5)進入到 web 服務(wù)器上的 Web Server，如 Apache锈至、Tomcat、Node.js 等服務(wù)器译秦；
(6)進入部署好的后端應(yīng)用峡捡，如 PHP、Java筑悴、JavaScript们拙、Python 等，找到對應(yīng)的請求處理阁吝；
(7)處理結(jié)束回饋報頭砚婆，此處如果瀏覽器訪問過，緩存上有對應(yīng)資源突勇，會與服務(wù)器最后修改事件對比装盯，一致則返回304；
(8)瀏覽器開始下載 html 文檔（響應(yīng)報頭甲馋，狀態(tài)碼200）埂奈，同時使用緩存；
(9)文檔樹建立定躏，根據(jù)標(biāo)記請求所需指定 MIME 類型的文件（比如css账磺、js），同時設(shè)置 cookie痊远；
(10)頁面開始渲染 DOM 垮抗，JS 根據(jù) DOM API 操作 DOM ，執(zhí)行事件綁定等碧聪，頁面顯示完成冒版；
//
簡潔版：
瀏覽器根據(jù)請求的 URL 交給 DNS 域名解析，找到真實 IP 矾削，向服務(wù)器發(fā)起請求壤玫；
服務(wù)器交給后臺處理完成后返回數(shù)據(jù)，瀏覽器接收文件（HTML哼凯、CSS欲间、JS、image等）断部；
瀏覽器對加載到的資源（HTML猎贴、CSS、JS等）進行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如 HTML 的 DOM ）她渴；
載入解析到的資源文件达址，渲染頁面，完成趁耗。

• 對前端工程師這個職位是怎么理解的沉唠？它的前景怎么樣？

前端是最貼近用戶的開發(fā)人員苛败，比后端满葛、數(shù)據(jù)庫、產(chǎn)品經(jīng)理罢屈、經(jīng)營嘀韧、安全都近。
(1)實現(xiàn)界面交互
(2)提升用戶體驗
(3)有了 Node.js 缠捌，前端可以實現(xiàn)服務(wù)器端的一些事情
//
前端是最貼近用戶的程序員锄贷，前端的能力就是能讓產(chǎn)品從 90分進化到 100 分，甚至更好曼月。
參與項目谊却，快速高質(zhì)量完成實現(xiàn)效果圖，精確到1px十嘿；
與團隊成員因惭，UI設(shè)計，產(chǎn)品經(jīng)理的溝通绩衷；
做好的頁面結(jié)構(gòu)蹦魔，頁面重構(gòu)和用戶體驗；
處理hack咳燕，兼容勿决、寫出優(yōu)美的代碼格式；
針對服務(wù)器的優(yōu)化招盲、擁抱最新前端技術(shù)低缩。

• 平時如何管理你的開發(fā)項目？

前期團隊必須確定好全局樣式（globe.css）曹货，編碼模式（utf-8）等咆繁；
編寫習(xí)慣必須一致（例如都采用繼承式的寫法，單樣式都寫成一行）顶籽；
標(biāo)注樣式編寫人玩般，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；
頁面進行標(biāo)注（例如 頁面礼饱、模塊坏为、開始和結(jié)束）究驴；
CSS 跟 HTML 分文件夾并行存放，命名都得統(tǒng)一（例如 style.css）匀伏；
JS 分文件夾存放洒忧，命名以該 JS 功能為準(zhǔn)的英文翻譯；
圖片采用整合的 images.png png8 格式文件使用够颠，盡量整合在一起使用以方便將來的管理熙侍。

• 移動端（Android iOS）怎么做好用體驗？

清晰的視覺縱線
信息的分組履磨、極致的減法
利用選擇代替輸入
標(biāo)簽及文字的排布方式
依靠明文確認密碼
合理的鍵盤利用

• 你對加班的看法核行？

加班就想借錢，原則應(yīng)當(dāng)是——救急不救窮蹬耘！

• 從打開 App 到刷新出內(nèi)容，整個過程中都發(fā)生了什么减余，如果感覺慢综苔，怎么定位問題，怎么解決位岔？

• 除了前端以外還了解什么其他技術(shù)如筛？你最厲害的技能是什么？

• 你怎么看待 Web App抒抬、Hybrid App杨刨、Native App？

• 談?wù)勀銓σ苿忧岸碎_發(fā)的理解擦剑。（和Web前端開發(fā)的主要區(qū)別是什么）

• 說說最近流行的一些東西吧妖胀？

ES6\Node\WebAssembly\MVVM\Web Components\React\React Native\Angular2.0\Webpack

• 知道什么是 SEO 嗎？怎么優(yōu)化惠勒？各種 meta data 是什么含義赚抡？

• 談?wù)勀銓?“全端工程師” 和 “全棧工程師” 的理解。

全端是橫向的纠屋，全棧是縱向的涂臣。
//
全端即所有的終端說白了都是前端，因為都關(guān)乎到用戶體驗售担，直接和用戶接觸赁遗。適應(yīng)多終端的開發(fā)，要求你在web前端的基礎(chǔ)上族铆，可能還要擴展Android開發(fā)和iOS開發(fā)的知識岩四，好在由于hybrid開發(fā)方式的流行，對使用native語言開發(fā)的技能會要求的不那么深骑素。
全楈排遥可以說是最適合初創(chuàng)公司的一種發(fā)展類型刚夺，廣義上認為是從前端干到后端，從開發(fā)干到運維末捣；而狹義上的全棧特指使用js語言從前端寫到假設(shè)在NodeJS上的后端侠姑，前后端統(tǒng)一語言，統(tǒng)一編程模型箩做，甚至共用同一套代碼莽红。

• 是否了解 Web 注入攻擊，說下原理邦邦，最常見的兩種攻擊（XSS 和 CSRF）了解到什么程度安吁？

• 項目中遇到過哪些印象深刻的技術(shù)難題？具體是什么問題燃辖？怎么解決的鬼店？

• 最近在學(xué)什么東西？

• 你的優(yōu)點是什么黔龟？缺點是什么妇智？

• 能談?wù)勎磥?、5年給自己的規(guī)劃嗎氏身？

系列：
前端開發(fā)面試題之HTML
前端開發(fā)面試題之CSS
前端開發(fā)面試題之JavaScript

資料搜集整理自 網(wǎng)絡(luò)
同時發(fā)布在 GitHub-前端開發(fā)面試題之綜合篇巍棱、GitBook-《WEB-DE》前端開發(fā)面試題之綜合篇