web前端面試題

時間：2023-02-22 12:31:39 面試試題我要投稿

Web前端面試題目及答案推薦度：
相關(guān)推薦

web前端面試題

　　以下各問題來自于本人在各公司應(yīng)聘時被提問的問題，特地整理出來，有錯誤或不同意見的歡迎評論指出。因各大公司面試還未結(jié)束，本文不透露題目具體出處，且會打亂順序。

web前端面試題

　　另注：問方和答方均默認(rèn)所問瀏覽器為主流瀏覽器(IE，chrome，firefox，Safari，Opera)

　　技術(shù)問答題：

　　HTTP常見的狀態(tài)碼有哪些?分別表示什么意思?

　　200：OK，一切正常

　　302：重定向

　　304：未修改

　　403：服務(wù)器禁止訪問

　　404：找不到請求的資源

　　500：服務(wù)端錯誤

　　HTTP狀態(tài)碼中，4**和5**有什么區(qū)別?

　　4**是請求錯誤，例如未經(jīng)授權(quán)的請求(403)，錯誤的請求地址(404)，錯誤的請求方法(405)

　　5**是服務(wù)端錯誤，例如腳本運(yùn)行出錯(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ī)制是怎樣的?通過報(bào)頭的哪個字段來實(shí)現(xiàn)?

　　Expires：服務(wù)器允許瀏覽器在這個時間前使用該資源緩存

　　Cache-control：作用和Expires類似，但優(yōu)先級更高，且可選值更多。值可以是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)先級比Last-Modified高，服務(wù)器會優(yōu)先比對Etag。

　　Public指示響應(yīng)可被任何緩存區(qū)緩存。

　　Private指示對于單個用戶的整個或部分響應(yīng)消息，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶的部分響應(yīng)消息，此響應(yīng)消息對于其他用戶的請求無效。

　　no-cache指示請求或響應(yīng)消息不能緩存

　　no-store用于防止重要的信息被無意的發(fā)布。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存。

　　max-age指示客戶機(jī)可以接收生存期不大于指定時間(以秒為單位)的響應(yīng)。

　　min-fresh指示客戶機(jī)可以接收響應(yīng)時間小于當(dāng)前時間加上指定時間的響應(yīng)。

　　max-stale指示客戶機(jī)可以接收超出超時期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶機(jī)可以接收超出超時期指定值之內(nèi)的響應(yīng)消息。

　　Last-Modified：標(biāo)示這個響應(yīng)資源的最后修改時間。web服務(wù)器在響應(yīng)請求時，告訴瀏覽器資源的最后修改時間。

　　If-Modified-Since：當(dāng)資源過期時(使用Cache-Control標(biāo)識的max-age)，發(fā)現(xiàn)資源具有Last-Modified聲明，則再次向web服務(wù)器請求時帶上頭 If-Modified-Since，表示請求時間。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since則與被請求資源的最后修改時間進(jìn)行比對。若最后修改時間較新，說明資源又被改動過，則響應(yīng)整片資源內(nèi)容(寫在響應(yīng)消息包體內(nèi))，HTTP 200;若最后修改時間較舊，說明資源無新修改，則響應(yīng)HTTP 304 (無需包體，節(jié)省瀏覽)，告知瀏覽器繼續(xù)使用所保存的cache。

　　Etag：web服務(wù)器響應(yīng)請求時，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(生成規(guī)則由服務(wù)器覺得)。Apache中，ETag的值，默認(rèn)是對文件的索引節(jié)(INode)，大小(Size)和最后修改時間(MTime)進(jìn)行Hash后得到的。

　　If-None-Match：當(dāng)資源過期時(使用Cache-Control標(biāo)識的max-age)，發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請求時帶上頭If-None-Match (Etag的值)。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match 則與被請求資源的相應(yīng)校驗(yàn)串進(jìn)行比對，決定返回200或304。

　　請求資源前，先查看緩存中是否有未過期且未修改的相同資源，如果有，直接在緩存中獲取而不是向服務(wù)器索求;如果沒有，并且服務(wù)器允許緩存，則將資源緩存在本地。

　　相關(guān)字段及作用：

　　HTML語義化是什么意思?有什么作用?

　　首先是對維護(hù)者友好，維護(hù)你代碼的人，能通過你的HTML代碼輕松理解你的意圖;

　　其次是對搜索引擎友好，搜索引擎不會抓取你的CSS屬性，所以，語義化能讓搜索引擎更好的抓到你想表達(dá)的東西，更容易讓搜索引擎理解你的網(wǎng)站架構(gòu);

　　另外就是對用戶友好，當(dāng)然大部分用戶都只是用眼睛看你的網(wǎng)站，所以可以通過CSS樣式來達(dá)到這個目的。但是，盲人是沒法看到的，他們只能通過輔助設(shè)備來實(shí)現(xiàn)，但同樣的，這些設(shè)備只能識別語義化的HTML。

　　簡單的來說，語義化就是讓該做某件事的東西來做那件事。比如，HTML中的各級標(biāo)題如H1等等，我們當(dāng)然可以用div、span加上各種樣式來實(shí)現(xiàn)，但是，那相當(dāng)于用拖拉機(jī)載客，能實(shí)現(xiàn)，但是臃腫不實(shí)用。同樣的例子還有header，footer等標(biāo)簽。

　　作用：

　　ajax怎么實(shí)現(xiàn)?

　　通過瀏覽器的XMLHttpRequest(非IE)或ActiveXObject(IE)對象，異步發(fā)送數(shù)據(jù)，并執(zhí)行回調(diào)。具體實(shí)現(xiàn)代碼如下：(代碼來源：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.');

　　}

　　字符串拼接改良方案

　　把要拼接的字符串寫入數(shù)組arr，然后調(diào)用arr.join("");

　　title和alt的區(qū)別?

　　都是提示詞。簡單的說，title給人看，alt給引擎看

　　CSS選擇器有哪些?

　　通配選擇器(*)，標(biāo)簽選擇器(tag)，類選擇器(.class)，id選擇器(#id)，屬性選擇器(selector[attr="val"])，后代選擇器(selector1 selector2)，子代選擇器(selector1 > selector2)，相鄰選擇器(selector1 ~ selector2)，偽元素(selector:first-child等)，偽類(selector:hover等)。叫法可能不大一樣，所以舉出一些例子供參考。

　　function foo(){ console.log(this); }; foo.call(null);

　　window。call第一個參數(shù)為null，所以調(diào)用者為全局，也就是window，而this指向調(diào)用者

　　DOCTYPE作用及意義

　　為了告訴瀏覽器以什么標(biāo)準(zhǔn)來解析文檔。這是因?yàn)椴糠志W(wǎng)頁并沒有遵循標(biāo)準(zhǔn)，或者遵循的是舊版本的標(biāo)準(zhǔn)。

　　具體用法，可以參考：http://www.jb51.net/web/34217.html

　　readyState有哪些值?各代表什么?

　　0 - (未初始化)還沒有調(diào)用send()方法

　　1 - (載入)已調(diào)用send()方法，正在發(fā)送請求

　　2 - (載入完成)send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容

　　3 - (交互)正在解析響應(yīng)內(nèi)容

　　4 - (完成)響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

　　js閉包概念

　　js函數(shù)里聲明的局部變量會在退出函數(shù)時被銷毀。而閉包則是保留對局部變量的引用，使其久居內(nèi)存。

　　HTML5和HTML4相比多出哪些功能?CSS3和CSS2相比多出哪些功能?

　　HTML5：表單驗(yàn)證、websocket、語義化標(biāo)簽等等

　　CSS3：動畫，計(jì)算，新的屬性

　　less是什么?有什么特點(diǎn)?如何判斷l(xiāng)ess的兼容性

　　less是一種CSS預(yù)編譯器，在CSS原有基礎(chǔ)上引入了變量、函數(shù)等元素，使得CSS更容易維護(hù)、擴(kuò)充。

　　less是靠less.js來解析的，所以，與瀏覽器沒有關(guān)系。IE6+和其他主流瀏覽器都可以使用less

　　JS的屬性可以直接在構(gòu)造函數(shù)中定義，也可以在原型中定義。兩者有什么不同?

　　前者定義是寫在內(nèi)存中，而后者是寫在硬盤中

　　Array(6).join('a')結(jié)果是多少?

　　"aaaaa"。join是指數(shù)組每一項(xiàng)用join的參數(shù)隔開。

　　123456['toString']['length'];

　　1。Number.toString是一個函數(shù)，長度為1

　　{}+'a'<{}+'b';

　　false。{}+"a"會轉(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)。第一個參數(shù)表示開始切割的下標(biāo)，第二個是切割的長度。注意這個切割是從原數(shù)組中去除

　　var arr = [1,2,3,4,5,6];arr.slice(1,3)['toString']();

　　23。和上例不同，slice(index1, index2)第一個參數(shù)表示開始切割的下標(biāo)，第二個參數(shù)是結(jié)束切割的下標(biāo)(不含)。且這個切割返回切除部分。

　　({a:1,b:2,c:3})[['b']];

　　2、寫一個hack樣式實(shí)現(xiàn) IE6、IE7、firefox 下分別使用不同顏色

　　以下分別用條件注釋和屬性前綴法實(shí)現(xiàn)

　　[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é)人，你會如何規(guī)劃整個項(xiàng)目的CSS文件?

　　reset.css

　　public.css

　　各模塊按文件夾分配CSS，或直接以模塊劃分CSS

　　如何在項(xiàng)目中避免和其他小組沖突?例如類名的命名?

　　在類名中加模塊前綴，例如登錄的提交按鈕命名可以為"login-btn-submit"(個人用法，不一樣的歡迎提出來交流)

　　邏輯題：

　　七點(diǎn)四十五分的時候，時針和分針之間的角度是多少?

　　37.5°

　　給你N個蘋果和一座天平，其中一個蘋果比較重，其他蘋果一樣重。假設(shè)其他因素完全一樣，假設(shè)天平兩側(cè)可以放無限個蘋果。現(xiàn)在要找出那個較重的蘋果，需要使用幾次天平。求最差情況的最優(yōu)解。(設(shè)計(jì)一種算法，讓平均次數(shù)最少)

　　想說二分的都準(zhǔn)備掛吧2333，不信想一下N=8的情況。

　　我能想到的最好方案是三分，即N/3并向上取整*2，剩下的作為第三堆。即每次天平稱的時候兩邊是ceil(N/3)。例如上面說的，N=8的時候，按二分的思路，第一次稱是4,4，第二次稱的時候是2,2，第三次是1,1，總共三次。而用三分的思路，第一次是3,3,2，第二次(最壞)是1,1,1，只需要兩次。

　　代碼實(shí)戰(zhàn)題：

　　拖拽效果實(shí)現(xiàn)(兼容IE跟chrome)：

　　總體思路：點(diǎn)擊框框時，修改狀態(tài)為可拖拽。檢測鼠標(biāo)移動，根據(jù)鼠標(biāo)移動來修改框框位置。當(dāng)鼠標(biāo)放開時，修改狀態(tài)為不可拖拽。

　　不多說，上代碼：

　　[html] view plaincopyprint?