萬不可投機取巧，只求面試過關(guān)是錯誤的！

原文和答案在我Github上：

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions 

不定期會更新。

[[141928]]

面試有幾點需注意：(來源程劭非老師 github:@wintercn)

1. 面試題目： 根據(jù)你的等級和職位變化，入門級到專家級：廣度↑、深度↑。

2. 題目類型： 技術(shù)視野、項目細節(jié)、理論知識，算法，開放性題，工作案例。

3. 細節(jié)追問： 可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實際能力。因為這種關(guān)聯(lián)知識是長時期的學(xué)習(xí)，絕對不是臨時記得住的。

4. 回答問題再棒，面試官（可能是你面試職位的直接領(lǐng)導(dǎo)），會考慮我要不要這個人做我的同事？所以態(tài)度很重要。（感覺更像是相親）

5. 資深的工程師能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的是：你這個人具有可以依靠的才能（靠譜）。

前端開發(fā)面試知識點大綱：

HTML&CSS：
    對Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級及使用、HTML5、CSS3、移動端

JavaScript：
    數(shù)據(jù)類型、面向?qū)ο?、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內(nèi)存泄漏、事件機制、異步裝載回調(diào)、模板引擎、Nodejs、JSON、ajax等。

其他：
   HTTP、WEB安全、正則、優(yōu)化、重構(gòu)、響應(yīng)式、團隊協(xié)作、可維護、SEO、UED、架構(gòu)、職業(yè)生涯


作為一名前端工程師，無論工作年頭長短都應(yīng)該必須掌握的知識點：

此條由 王子墨 發(fā)表在 前端隨筆

    1、DOM結(jié)構(gòu) —— 兩個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動。

    2、DOM操作  ——如何添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點等。

    3、事件    —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。

    4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請求、怎樣檢測錯誤。

    5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。

    6、盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型

    7、塊級元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

    8、浮動元素——怎么使用它們、它們有什么問題以及怎么解決這些問題。

    9、HTML與XHTML——二者有什么區(qū)別，你覺得應(yīng)該使用哪一個并說出理由。

    10、JSON  —— 作用、用途、設(shè)計結(jié)構(gòu)。


備注：

根據(jù)自己需要選擇性閱讀，面試題是對理論知識的總結(jié)，讓自己學(xué)會應(yīng)該如何表達。

資料答案不夠正確和全面，歡迎補充答案、題目；最好是現(xiàn)在網(wǎng)上沒有的。

格式不斷修改更新中。

last updated: 2015-03-25

HTML

• Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

• 行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

• 介紹一下CSS的盒子模型？

• link 和@import 的區(qū)別是？

• CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？

• 如何居中div？如何居中一個浮動元素？

• 瀏覽器的內(nèi)核分別是什么?

• html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

• 語義化的理解？

• HTML5的離線儲存？

• (寫)描述一段語義的html代碼吧。

• iframe有那些缺點？

• Label的作用是什么？是怎么用的？（加 for）

• HTML5的form如何關(guān)閉自動完成功能？給不想要提示的input是設(shè)置autocomplete=off即可

• 請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

• 如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)

• webSocket如何兼容低瀏覽器？(阿里)

• 頁面可見性（Page Visibility）API 可以有哪些用途？

• 你是怎么切圖的？

CSS

• 列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？

• CSS3有哪些新特性？

• 用純 CSS 創(chuàng)建一個三角形

• 一個滿屏 品 字布局 如何設(shè)計?

• 經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

• 為什么要初始化CSS樣式。

• absolute的containing block計算方式跟正常流有什么不同？

• CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？

• position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？

• 對BFC規(guī)范的理解？

• css定義的權(quán)重？

• 解釋下浮動和它的工作原理？清除浮動的技巧

• 用過媒體查詢，針對移動端的布局嗎？

• 使用 CSS 預(yù)處理器嗎？喜歡那個？

• CSS 優(yōu)化、提高性能的方法有哪些？

• 瀏覽器是怎樣解析CSS選擇器的？

• 這個CSS它是如何工作的？（ .mod-nav h3 span {font-size: 16px;} ）

• 在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

• margin和padding分別適合什么場景使用？

• 元素豎向的百分比設(shè)定是相對于容器的寬度嗎？

• 全屏滾動的原理是什么？用到了CSS的那些屬性？

• ::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素。

• 你對line-height是如何理解的？

• 設(shè)置元素浮動后，改元素的display值是多少？（自動變成display:block）

• 怎么讓Chrome支持小于12px 的文字？

• 讓頁面里的字體變清晰，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）

• font-style屬性 可以讓它賦值為“oblique” oblique是什么意思？

• position:fixed;在android下無效怎么處理？

• 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

• display:inline-block 什么時候會顯示間隙？(攜程)

JavaScript

• 用原生JS的寫過東西嗎？

• JavaScript原型，原型鏈 ? 有什么特點？

• JavaScript 有幾種類型值？（堆：原始值和 棧：引用值），你能畫一下他們的內(nèi)存圖嗎？

• eval是做什么的？

• null，undefined 的區(qū)別？

• 寫一個通用的事件偵聽器函數(shù)。

• Node.js的適用場景？

• 介紹js的基本數(shù)據(jù)類型。

• Javascript如何實現(xiàn)繼承？

• ["1", "2", "3"].map(parseInt) 答案是多少？

• 如何創(chuàng)建一個對象? （畫出此對象的內(nèi)存圖）

• 談?wù)凾his對象的理解。

• 事件、IE與火狐的事件機制有什么區(qū)別？ 如何阻止冒泡？

• 什么是閉包（closure），為什么要用它？

• "use strict";是什么意思 ? 使用它的好處和壞處分別是什么？

• 如何判斷一個對象是否屬于某個類？

• new操作符具體干了什么呢?

• Javascript中，有一個函數(shù)，執(zhí)行時對象查找時，永遠不會去查找原型，這個函數(shù)是？

• JSON 的了解？

• [].forEach.call($$(""),function(a){ a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？

• js延遲加載的方式有哪些？

• ajax 是什么?

• 同步和異步的區(qū)別?

• 如何解決跨域問題?

• 模塊化怎么做？

• AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？

• 異步加載的方式有哪些？

• .call() 和 .apply() 的區(qū)別？

• Jquery與jQuery UI 有啥區(qū)別？

• JQuery的源碼看過嗎？能不能簡單說一下它的實現(xiàn)原理？

• jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

• 針對 jQuery 的優(yōu)化方法？

• JavaScript中的作用域與變量聲明提升？

• 如何編寫高性能的Javascript？

• 那些操作會造成內(nèi)存泄漏？

• JQuery一個對象可以同時綁定多個事件，這是如何實現(xiàn)的？

• 寫一個無刷新的網(wǎng)站，并且能在瀏覽器前進、后退時正確響應(yīng)怎么實現(xiàn)？

• 如何判斷當(dāng)前腳本運行在瀏覽器還是node環(huán)境中？（阿里）

• canvas的默認大小是多少？

• 移動端最小觸控區(qū)域是多大？

• jQuery 的 slideUp動畫 ，如果目標(biāo)元素是被外部事件驅(qū)動, 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動畫會滯后的反復(fù)執(zhí)行，該如何處理呢?

• 移動端的點擊事件的有延遲，時間是多久，為什么會有？ 怎么解決？（click 有 300ms 延遲,為了實現(xiàn)safari的雙擊事件的設(shè)計）

• Zepto的點透問題如何解決？

其他問題

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

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

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

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

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

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

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

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

• 你有哪些性能優(yōu)化的方法？

• http狀態(tài)碼有那些？分別代表是什么意思？

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

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

• 你常用的開發(fā)工具是什么，為什么？

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

• 你怎么看待Web App 、hybrid App、Native App？

• 你移動端前端開發(fā)的理解？（和 Web 前端開發(fā)的主要區(qū)別是什么？）

• 加班的看法？

• 平時如何管理你的項目？

• git如何刪除錯誤提交的文件？

• 如何設(shè)計突發(fā)大規(guī)模并發(fā)架構(gòu)？

• 說說最近最流行的一些東西吧？平時常去哪些網(wǎng)站？

• 移動端（Android IOS）怎么做好用戶體驗?

• 你在現(xiàn)在的團隊處于什么樣的角色，起到了什么明顯的作用？

• 你認為怎樣才是全端工程師（Full Stack developer）？

• 介紹一個你最得意的作品吧？

• 你有自己的技術(shù)博客嗎，常去那些技術(shù)博客？

• 最近在學(xué)什么？能談?wù)勀阄磥?，5年給自己的規(guī)劃嗎？

有趣的問題

• .A、B兩人分別在兩座島上。B生病了，A有B所需要的藥。C有一艘小船和一個可以上鎖的箱子。C愿意在A和B之間運東西，但東西只能放在箱子里。 只要箱子沒被上鎖，C都會偷走箱子里的東西，不管箱子里有什么。如果A和B各自有一把鎖和只能開自己那把鎖的鑰匙，A應(yīng)該如何把東西安全遞交給B？

  答案：A把藥放進箱子，用自己的鎖把箱子鎖上。B拿到箱子后，再在箱子上加一把自己的鎖。 箱子運回A后，A取下自己的鎖。箱子再運到B手中時，B取下自己的鎖，獲得藥物。