最新前端開(kāi)發(fā)面試題

　　面試有幾點(diǎn)需注意:

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

　　題目類(lèi)型： 技術(shù)視野、項(xiàng)目細(xì)節(jié)、理論知識(shí)，算法，開(kāi)放性題，工作案例。

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

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

　　資深的工程師能把a(bǔ)bsolute和relative弄混，這樣的人不要也罷，因?yàn)閳F(tuán)隊(duì)需要的是：你這個(gè)人具有可以依靠的才能(靠譜)。

　　前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱：

　　HTML&CSS：

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

　　JavaScript：

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

　　其他：

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

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

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

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

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

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

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

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

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

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

　　8、浮動(dòng)元素——怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。

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

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

　　備注：

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

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

　　格式不斷修改更新中。

　　last updated: 2015-03-25

　　HTML

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

　　行內(nèi)元素有哪些?塊級(jí)元素有哪些? 空(void)元素有那些?

　　介紹一下CSS的盒子模型?

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

　　CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算? CSS3新增偽類(lèi)有那些?

　　如何居中div?如何居中一個(gè)浮動(dòng)元素?

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

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

　　語(yǔ)義化的理解?

　　HTML5的離線(xiàn)儲(chǔ)存?

　　(寫(xiě))描述一段語(yǔ)義的html代碼吧。

　　iframe有那些缺點(diǎn)?

　　Label的作用是什么?是怎么用的?(加 for)

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

　　請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?

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

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

　　頁(yè)面可見(jiàn)性(Page Visibility)API 可以有哪些用途?

　　你是怎么切圖的?

　　CSS

　　列出display的值，說(shuō)明他們的作用。position的值， relative和absolute定位原點(diǎn)是?

　　CSS3有哪些新特性?

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

　　一個(gè)滿(mǎn)屏 品 字布局 如何設(shè)計(jì)?

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

　　為什么要初始化CSS樣式。

　　absolute的containing block計(jì)算方式跟正常流有什么不同?

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

　　position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣?

　　對(duì)BFC規(guī)范的理解?

　　css定義的權(quán)重?

　　解釋下浮動(dòng)和它的工作原理?清除浮動(dòng)的技巧

　　用過(guò)媒體查詢(xún)，針對(duì)移動(dòng)端的布局嗎?

　　使用 CSS 預(yù)處理器嗎?喜歡那個(gè)?

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

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

　　這個(gè)CSS它是如何工作的?( .mod-nav h3 span {font-size: 16px;} )

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

　　margin和padding分別適合什么場(chǎng)景使用?

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

　　全屏滾動(dòng)的原理是什么?用到了CSS的那些屬性?

　　::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別?解釋一下這2個(gè)偽元素。

　　你對(duì)line-height是如何理解的?

　　設(shè)置元素浮動(dòng)后，改元素的display值是多少?(自動(dòng)變成display:block)

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

　　讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做?(-webkit-font-smoothing: antialiased;)

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

　　position:fixed;在android下無(wú)效怎么處理?

　　如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么?(阿里)

　　display:inline-block 什么時(shí)候會(huì)顯示間隙?(攜程)

　　JavaScript

　　用原生JS的寫(xiě)過(guò)東西嗎?

　　JavaScript原型，原型鏈 ? 有什么特點(diǎn)?

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

　　eval是做什么的?

　　null，undefined 的區(qū)別?

　　寫(xiě)一個(gè)通用的事件偵聽(tīng)器函數(shù)。

　　Node.js的適用場(chǎng)景?

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

　　Javascript如何實(shí)現(xiàn)繼承?

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

　　如何創(chuàng)建一個(gè)對(duì)象? (畫(huà)出此對(duì)象的內(nèi)存圖)

　　談?wù)凾his對(duì)象的理解。

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

　　什么是閉包(closure)，為什么要用它?

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

　　如何判斷一個(gè)對(duì)象是否屬于某個(gè)類(lèi)?

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

　　Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是?

　　JSON 的了解?

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

　　js延遲加載的方式有哪些?

　　ajax 是什么?

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

　　如何解決跨域問(wèn)題?

　　模塊化怎么做?

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

　　異步加載的方式有哪些?

　　.call() 和 .apply() 的區(qū)別?

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

　　JQuery的源碼看過(guò)嗎?能不能簡(jiǎn)單說(shuō)一下它的實(shí)現(xiàn)原理?

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

　　針對(duì) jQuery 的優(yōu)化方法?

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

　　如何編寫(xiě)高性能的Javascript?

　　那些操作會(huì)造成內(nèi)存泄漏?

　　JQuery一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的?

　　寫(xiě)一個(gè)無(wú)刷新的網(wǎng)站，并且能在瀏覽器前進(jìn)、后退時(shí)正確響應(yīng)怎么實(shí)現(xiàn)?

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

　　canvas的默認(rèn)大小是多少?

　　移動(dòng)端最小觸控區(qū)域是多大?

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

　　移動(dòng)端的點(diǎn)擊事件的有延遲，時(shí)間是多久，為什么會(huì)有? 怎么解決?(click 有 300ms 延遲,為了實(shí)現(xiàn)safari的雙擊事件的設(shè)計(jì))

　　Zepto的點(diǎn)透問(wèn)題如何解決?

　　其他問(wèn)題

　　你遇到過(guò)比較難的技術(shù)問(wèn)題是?你是如何解決的?

　　常使用的庫(kù)有哪些?常用的前端開(kāi)發(fā)工具?開(kāi)發(fā)過(guò)什么應(yīng)用或組件?

　　頁(yè)面重構(gòu)怎么操作?

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

　　99%的網(wǎng)站都需要被重構(gòu)是那本書(shū)上寫(xiě)的?

　　什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)?

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

　　對(duì)Node的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法?

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

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

　　一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過(guò)程中都發(fā)生了什么?(流程說(shuō)的越詳細(xì)越好)

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

　　你常用的開(kāi)發(fā)工具是什么，為什么?

　　對(duì)前端界面工程師這個(gè)職位是怎么樣理解的?它的前景會(huì)怎么樣?

　　你怎么看待Web App 、hybrid App、Native App?

　　你移動(dòng)端前端開(kāi)發(fā)的理解?(和 Web 前端開(kāi)發(fā)的主要區(qū)別是什么?)

　　加班的看法?

　　平時(shí)如何管理你的項(xiàng)目?

　　git如何刪除錯(cuò)誤提交的文件?

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

　　說(shuō)說(shuō)最近最流行的一些東西吧?平時(shí)常去哪些網(wǎng)站?

　　移動(dòng)端(Android IOS)怎么做好用戶(hù)體驗(yàn)?

　　你在現(xiàn)在的團(tuán)隊(duì)處于什么樣的角色，起到了什么明顯的作用?

　　你認(rèn)為怎樣才是全端工程師(Full Stack developer)?

　　介紹一個(gè)你最得意的作品吧?

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

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

　　有趣的問(wèn)題

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

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

http://fnhaliao.com/

【最新前端開(kāi)發(fā)面試題】相關(guān)文章：

前端開(kāi)發(fā)實(shí)習(xí)報(bào)告08-01

web前端面試題02-22

web前端開(kāi)發(fā)求職簡(jiǎn)歷01-18

Web前端面試題目及答案09-26

前端程序員JavaScript面試題02-19

前端面試題庫(kù)及答案09-25

web前端開(kāi)發(fā)求職簡(jiǎn)歷4篇01-18

web前端開(kāi)發(fā)的自我評(píng)價(jià)簡(jiǎn)歷模板07-18

前端開(kāi)發(fā)常見(jiàn)面試試題02-14

阿里前端大神寒冬談?wù)劽嬖嚺c面試題02-13