-
Web前端面試題目及答案
推薦度：
- 相關(guān)推薦
web前端面試題
以下各問(wèn)題來(lái)自于本人在各公司應(yīng)聘時(shí)被提問(wèn)的問(wèn)題，特地整理出來(lái)，有錯(cuò)誤或不同意見(jiàn)的歡迎評(píng)論指出。因各大公司面試還未結(jié)束，本文不透露題目具體出處，且會(huì)打亂順序。
另注：?jiǎn)柗胶痛鸱骄J(rèn)所問(wèn)瀏覽器為主流瀏覽器(IE，chrome，firefox，Safari，Opera)
技術(shù)問(wèn)答題：
HTTP常見(jiàn)的狀態(tài)碼有哪些?分別表示什么意思?
200：OK，一切正常
302：重定向
304：未修改
403：服務(wù)器禁止訪(fǎng)問(wèn)
404：找不到請(qǐng)求的資源
500：服務(wù)端錯(cuò)誤
HTTP狀態(tài)碼中，4**和5**有什么區(qū)別?
4**是請(qǐng)求錯(cuò)誤，例如未經(jīng)授權(quán)的請(qǐng)求(403)，錯(cuò)誤的請(qǐng)求地址(404)，錯(cuò)誤的請(qǐng)求方法(405)
5**是服務(wù)端錯(cuò)誤，例如腳本運(yùn)行出錯(cuò)(500)
JS DOM中，如何綁定和移除事件?
所有添加：domNode.onevent = function，例如document.onclick = function() { }
所有移除：domNode.onevent = null; 例如document.onclick = null;
非IE添加：domNode.addEventListener("event", function() { })，例如document.addEventListener("click", function() { })
非IE移除：domNode.removeEventListener("event", function() { })，例如document.removeEventListener("click", function() { })
IE添加：domNode.attachEvent("on" + "event", function() {})，例如document.attachEvent("onclick", function() { })
IE移除：domNode.detachEvent("on" + "event", function() {})，例如document.detachEvent("onclick",function() {})
瀏覽器的緩存機(jī)制是怎樣的?通過(guò)報(bào)頭的哪個(gè)字段來(lái)實(shí)現(xiàn)?
Expires：服務(wù)器允許瀏覽器在這個(gè)時(shí)間前使用該資源緩存
Cache-control：作用和Expires類(lèi)似，但優(yōu)先級(jí)更高，且可選值更多。值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。其中，max-age值最常用。
Last-Modified / If-Modified-Since：配合Cache-Control使用。
Etag / If-None-Match：也要配合Cache-Control使用。注意，Etag優(yōu)先級(jí)比Last-Modified高，服務(wù)器會(huì)優(yōu)先比對(duì)Etag。
Public指示響應(yīng)可被任何緩存區(qū)緩存。
Private指示對(duì)于單個(gè)用戶(hù)的整個(gè)或部分響應(yīng)消息，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶(hù)的部分響應(yīng)消息，此響應(yīng)消息對(duì)于其他用戶(hù)的請(qǐng)求無(wú)效。
no-cache指示請(qǐng)求或響應(yīng)消息不能緩存
no-store用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存。
max-age指示客戶(hù)機(jī)可以接收生存期不大于指定時(shí)間(以秒為單位)的響應(yīng)。
min-fresh指示客戶(hù)機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。
max-stale指示客戶(hù)機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶(hù)機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。
Last-Modified：標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間。web服務(wù)器在響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器資源的最后修改時(shí)間。
If-Modified-Since：當(dāng)資源過(guò)期時(shí)(使用Cache-Control標(biāo)識(shí)的max-age)，發(fā)現(xiàn)資源具有Last-Modified聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭 If-Modified-Since，表示請(qǐng)求時(shí)間。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新，說(shuō)明資源又被改動(dòng)過(guò)，則響應(yīng)整片資源內(nèi)容(寫(xiě)在響應(yīng)消息包體內(nèi))，HTTP 200;若最后修改時(shí)間較舊，說(shuō)明資源無(wú)新修改，則響應(yīng)HTTP 304 (無(wú)需包體，節(jié)省瀏覽)，告知瀏覽器繼續(xù)使用所保存的cache。
Etag：web服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)(生成規(guī)則由服務(wù)器覺(jué)得)。Apache中，ETag的值，默認(rèn)是對(duì)文件的索引節(jié)(INode)，大小(Size)和最后修改時(shí)間(MTime)進(jìn)行Hash后得到的。
If-None-Match：當(dāng)資源過(guò)期時(shí)(使用Cache-Control標(biāo)識(shí)的max-age)，發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match (Etag的值)。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì)，決定返回200或304。
請(qǐng)求資源前，先查看緩存中是否有未過(guò)期且未修改的相同資源，如果有，直接在緩存中獲取而不是向服務(wù)器索求;如果沒(méi)有，并且服務(wù)器允許緩存，則將資源緩存在本地。
相關(guān)字段及作用：
HTML語(yǔ)義化是什么意思?有什么作用?
首先是對(duì)維護(hù)者友好，維護(hù)你代碼的人，能通過(guò)你的HTML代碼輕松理解你的意圖;
其次是對(duì)搜索引擎友好，搜索引擎不會(huì)抓取你的CSS屬性，所以，語(yǔ)義化能讓搜索引擎更好的抓到你想表達(dá)的東西，更容易讓搜索引擎理解你的網(wǎng)站架構(gòu);
另外就是對(duì)用戶(hù)友好，當(dāng)然大部分用戶(hù)都只是用眼睛看你的網(wǎng)站，所以可以通過(guò)CSS樣式來(lái)達(dá)到這個(gè)目的。但是，盲人是沒(méi)法看到的，他們只能通過(guò)輔助設(shè)備來(lái)實(shí)現(xiàn)，但同樣的，這些設(shè)備只能識(shí)別語(yǔ)義化的HTML。
簡(jiǎn)單的來(lái)說(shuō)，語(yǔ)義化就是讓該做某件事的東西來(lái)做那件事。比如，HTML中的各級(jí)標(biāo)題如H1等等，我們當(dāng)然可以用div、span加上各種樣式來(lái)實(shí)現(xiàn)，但是，那相當(dāng)于用拖拉機(jī)載客，能實(shí)現(xiàn)，但是臃腫不實(shí)用。同樣的例子還有header，footer等標(biāo)簽。
作用：
ajax怎么實(shí)現(xiàn)?
通過(guò)瀏覽器的XMLHttpRequest(非IE)或ActiveXObject(IE)對(duì)象，異步發(fā)送數(shù)據(jù)，并執(zhí)行回調(diào)。具體實(shí)現(xiàn)代碼如下：(代碼來(lái)源：http://www.jb51.net/article/23858.htm)
[javascript] view plaincopyprint?
function ajaxFunction(){
var http_request;
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的瀏覽器不支持Ajax");
return false;
}
}
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
字符串拼接改良方案
把要拼接的字符串寫(xiě)入數(shù)組arr，然后調(diào)用arr.join("");
title和alt的區(qū)別?
都是提示詞。簡(jiǎn)單的說(shuō)，title給人看，alt給引擎看
CSS選擇器有哪些?
通配選擇器(*)，標(biāo)簽選擇器(tag)，類(lèi)選擇器(.class)，id選擇器(#id)，屬性選擇器(selector[attr="val"])，后代選擇器(selector1 selector2)，子代選擇器(selector1 > selector2)，相鄰選擇器(selector1 ~ selector2)，偽元素(selector:first-child等)，偽類(lèi)(selector:hover等)。叫法可能不大一樣，所以舉出一些例子供參考。
function foo(){ console.log(this); }; foo.call(null);
window。call第一個(gè)參數(shù)為null，所以調(diào)用者為全局，也就是window，而this指向調(diào)用者
DOCTYPE作用及意義
為了告訴瀏覽器以什么標(biāo)準(zhǔn)來(lái)解析文檔。這是因?yàn)椴糠志W(wǎng)頁(yè)并沒(méi)有遵循標(biāo)準(zhǔn)，或者遵循的是舊版本的標(biāo)準(zhǔn)。
具體用法，可以參考：http://www.jb51.net/web/34217.html
readyState有哪些值?各代表什么?
0 - (未初始化)還沒(méi)有調(diào)用send()方法
1 - (載入)已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 - (載入完成)send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 - (交互)正在解析響應(yīng)內(nèi)容
4 - (完成)響應(yīng)內(nèi)容解析完成，可以在客戶(hù)端調(diào)用了
js閉包概念
js函數(shù)里聲明的局部變量會(huì)在退出函數(shù)時(shí)被銷(xiāo)毀。而閉包則是保留對(duì)局部變量的引用，使其久居內(nèi)存。
HTML5和HTML4相比多出哪些功能?CSS3和CSS2相比多出哪些功能?
HTML5：表單驗(yàn)證、websocket、語(yǔ)義化標(biāo)簽等等
CSS3：動(dòng)畫(huà)，計(jì)算，新的屬性
less是什么?有什么特點(diǎn)?如何判斷l(xiāng)ess的兼容性
less是一種CSS預(yù)編譯器，在CSS原有基礎(chǔ)上引入了變量、函數(shù)等元素，使得CSS更容易維護(hù)、擴(kuò)充。
less是靠less.js來(lái)解析的，所以，與瀏覽器沒(méi)有關(guān)系。IE6+和其他主流瀏覽器都可以使用less
JS的屬性可以直接在構(gòu)造函數(shù)中定義，也可以在原型中定義。兩者有什么不同?
前者定義是寫(xiě)在內(nèi)存中，而后者是寫(xiě)在硬盤(pán)中
Array(6).join('a')結(jié)果是多少?
"aaaaa"。join是指數(shù)組每一項(xiàng)用join的參數(shù)隔開(kāi)。
123456['toString']['length'];
1。Number.toString是一個(gè)函數(shù)，長(zhǎng)度為1
{}+'a'<{}+'b';
false。{}+"a"會(huì)轉(zhuǎn)化成數(shù)字相加，結(jié)果為NaN。NaN與NaN比較永遠(yuǎn)返回false
var arr = [1,2,3,4,5,6];arr.splice(1,3);arr.toString();
156。splice(index, length)。第一個(gè)參數(shù)表示開(kāi)始切割的下標(biāo)，第二個(gè)是切割的長(zhǎng)度。注意這個(gè)切割是從原數(shù)組中去除
var arr = [1,2,3,4,5,6];arr.slice(1,3)['toString']();
23。和上例不同，slice(index1, index2)第一個(gè)參數(shù)表示開(kāi)始切割的下標(biāo)，第二個(gè)參數(shù)是結(jié)束切割的下標(biāo)(不含)。且這個(gè)切割返回切除部分。
({a:1,b:2,c:3})[['b']];
2、寫(xiě)一個(gè)hack樣式實(shí)現(xiàn) IE6、IE7、firefox 下分別使用不同顏色
以下分別用條件注釋和屬性前綴法實(shí)現(xiàn)
[css] view plaincopyprint?
[css] view plaincopyprint?
color: #67f; // firefox, IE6, IE7
*color: #667; // IE6,IE7
_color: #666; // IE6 only
/* 只在IE6下生效 */
/* 只在IE7下生效 */
color: #777;
/* 在非IE下生效 */
項(xiàng)目規(guī)劃題：
假如你是項(xiàng)目負(fù)責(zé)人，你會(huì)如何規(guī)劃整個(gè)項(xiàng)目的CSS文件?
reset.css
public.css
各模塊按文件夾分配CSS，或直接以模塊劃分CSS
如何在項(xiàng)目中避免和其他小組沖突?例如類(lèi)名的命名?
在類(lèi)名中加模塊前綴，例如登錄的提交按鈕命名可以為"login-btn-submit"(個(gè)人用法，不一樣的歡迎提出來(lái)交流)
邏輯題：
七點(diǎn)四十五分的時(shí)候，時(shí)針和分針之間的角度是多少?
37.5°
給你N個(gè)蘋(píng)果和一座天平，其中一個(gè)蘋(píng)果比較重，其他蘋(píng)果一樣重。假設(shè)其他因素完全一樣，假設(shè)天平兩側(cè)可以放無(wú)限個(gè)蘋(píng)果。現(xiàn)在要找出那個(gè)較重的蘋(píng)果，需要使用幾次天平。求最差情況的最優(yōu)解。(設(shè)計(jì)一種算法，讓平均次數(shù)最少)
想說(shuō)二分的都準(zhǔn)備掛吧2333，不信想一下N=8的情況。
我能想到的最好方案是三分，即N/3并向上取整*2，剩下的作為第三堆。即每次天平稱(chēng)的時(shí)候兩邊是ceil(N/3)。例如上面說(shuō)的，N=8的時(shí)候，按二分的思路，第一次稱(chēng)是4,4，第二次稱(chēng)的時(shí)候是2,2，第三次是1,1，總共三次。而用三分的思路，第一次是3,3,2，第二次(最壞)是1,1,1，只需要兩次。
代碼實(shí)戰(zhàn)題：
拖拽效果實(shí)現(xiàn)(兼容IE跟chrome)：
總體思路：點(diǎn)擊框框時(shí)，修改狀態(tài)為可拖拽。檢測(cè)鼠標(biāo)移動(dòng)，根據(jù)鼠標(biāo)移動(dòng)來(lái)修改框框位置。當(dāng)鼠標(biāo)放開(kāi)時(shí)，修改狀態(tài)為不可拖拽。
不多說(shuō)，上代碼：
[html] view plaincopyprint?
右鍵自定義菜單
總體思路：屏蔽瀏覽器郵件菜單，將自己寫(xiě)的菜單隱藏，當(dāng)檢測(cè)到右鍵點(diǎn)擊時(shí)顯示菜單，否則隱藏菜單。
上代碼：
[html] view plaincopyprint?
判斷一個(gè)域名是不是xx公司的
(備注：該公司所有域名為***.xx.com，或xx.com)
思路：正則判斷
[javascript] view plaincopyprint?
var exp = new RegExp(/^(.+\.)*qq.com(\W[\s\S]*$|$)/);
var hostName = window.location.hostname;
exp.test(hostName);
文章高頻詞檢索
說(shuō)明：英文文章
思路：用空格分割成數(shù)組，注意分隔符(引號(hào)，句號(hào)等)，將單詞轉(zhuǎn)化為小寫(xiě)作為key值，存進(jìn)hash數(shù)組，最后統(tǒng)計(jì)。
代碼不上了，寫(xiě)的太丑。
高精度加法
說(shuō)明：兩個(gè)數(shù)相加，這兩個(gè)數(shù)非常大(接近Number.MAX_VALUE)，求相加后的結(jié)果。
思路：字符串輸入，字符串輸出，從低位到高位，一位位相加，注意進(jìn)位。
代碼同樣不上了。
主觀問(wèn)題：
主觀問(wèn)題是仁者見(jiàn)仁智者見(jiàn)智的，這里只是提供一點(diǎn)參考。需要提醒的是，這部分一般是人力面，而人力一般不懂多少技術(shù)，所以就不要抓著技術(shù)大談特談了
自我介紹
這個(gè)就不用我說(shuō)了，時(shí)間不是重點(diǎn)，但要盡量涵蓋所有時(shí)間軸。
你從之前的學(xué)習(xí)/做項(xiàng)目中，學(xué)到了什么?
能說(shuō)出來(lái)就行，不需要太具體，比如學(xué)到了原型繼承blabla的，HR會(huì)很郁悶的
你想在之后的工作中學(xué)到什么?
你覺(jué)得你能學(xué)到什么就說(shuō)什么吧，團(tuán)隊(duì)協(xié)作能力，交際能力，都是可以的
你對(duì)工作地點(diǎn)、部門(mén)有什么要求?
看你自己咯
你覺(jué)得你最大的優(yōu)點(diǎn)和缺點(diǎn)是什么?
回答”我最大的優(yōu)點(diǎn)就是沒(méi)有缺點(diǎn)，我最大的缺點(diǎn)就是沒(méi)有缺點(diǎn)“這種作死的就沒(méi)必要去參加面試了。
優(yōu)點(diǎn)要說(shuō)實(shí)話(huà)，但可以挑好的說(shuō)，比如優(yōu)點(diǎn)可以說(shuō)自己善良什么的，不需要具體，比如你說(shuō)優(yōu)點(diǎn)是人走關(guān)燈之類(lèi)的就沒(méi)必要了(可以往大說(shuō)環(huán)保意識(shí)強(qiáng))
缺點(diǎn)可以說(shuō)實(shí)話(huà)，但要保留，并且要善于將缺點(diǎn)描述轉(zhuǎn)化為優(yōu)點(diǎn)描述
http://www.fuchuonang.cn/【web前端面試題】相關(guān)文章：
Web前端面試題目及答案09-26
Web前端工作總結(jié)02-08
web前端面試技巧07-19
web前端開(kāi)發(fā)求職簡(jiǎn)歷01-18
web前端自我介紹07-04
Web前端工作總結(jié)8篇02-08
web前端開(kāi)發(fā)的自我評(píng)價(jià)簡(jiǎn)歷模板07-18
web前端開(kāi)發(fā)求職簡(jiǎn)歷4篇01-18
web前端工程師簡(jiǎn)歷范文03-02