web前端面試題

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

Web前端面試題目及答案推薦度：
相關推薦

web前端面試題

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

web前端面試題

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

　　技術問答題：

　　HTTP常見的狀態碼有哪些?分別表示什么意思?

　　200：OK，一切正常

　　302：重定向

　　304：未修改

　　403：服務器禁止訪問

　　404：找不到請求的資源

　　500：服務端錯誤

　　HTTP狀態碼中，4**和5**有什么區別?

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

　　5**是服務端錯誤，例如腳本運行出錯(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() {})

　　瀏覽器的緩存機制是怎樣的?通過報頭的哪個字段來實現?

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

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

　　Public指示響應可被任何緩存區緩存。

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

　　no-cache指示請求或響應消息不能緩存

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

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

　　min-fresh指示客戶機可以接收響應時間小于當前時間加上指定時間的響應。

　　max-stale指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內的響應消息。

　　Last-Modified：標示這個響應資源的最后修改時間。web服務器在響應請求時，告訴瀏覽器資源的最后修改時間。

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

　　Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的唯一標識(生成規則由服務器覺得)。Apache中，ETag的值，默認是對文件的索引節(INode)，大小(Size)和最后修改時間(MTime)進行Hash后得到的。

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

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

　　相關字段及作用：

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

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

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

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

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

　　作用：

　　ajax怎么實現?

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

　　}

　　字符串拼接改良方案

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

　　title和alt的區別?

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

　　CSS選擇器有哪些?

　　通配選擇器(*)，標簽選擇器(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第一個參數為null，所以調用者為全局，也就是window，而this指向調用者

　　DOCTYPE作用及意義

　　為了告訴瀏覽器以什么標準來解析文檔。這是因為部分網頁并沒有遵循標準，或者遵循的是舊版本的標準。

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

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

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

　　1 - (載入)已調用send()方法，正在發送請求

　　2 - (載入完成)send()方法執行完成，已經接收到全部響應內容

　　3 - (交互)正在解析響應內容

　　4 - (完成)響應內容解析完成，可以在客戶端調用了

　　js閉包概念

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

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

　　HTML5：表單驗證、websocket、語義化標簽等等

　　CSS3：動畫，計算，新的屬性

　　less是什么?有什么特點?如何判斷less的兼容性

　　less是一種CSS預編譯器，在CSS原有基礎上引入了變量、函數等元素，使得CSS更容易維護、擴充。

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

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

　　前者定義是寫在內存中，而后者是寫在硬盤中

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

　　"aaaaa"。join是指數組每一項用join的參數隔開。

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

　　1。Number.toString是一個函數，長度為1

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

　　false。{}+"a"會轉化成數字相加，結果為NaN。NaN與NaN比較永遠返回false

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

　　156。splice(index, length)。第一個參數表示開始切割的下標，第二個是切割的長度。注意這個切割是從原數組中去除

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

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

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

　　2、寫一個hack樣式實現 IE6、IE7、firefox 下分別使用不同顏色

　　以下分別用條件注釋和屬性前綴法實現

　　[css] view plaincopyprint?

　　color: #67f; // firefox, IE6, IE7

　　*color: #667; // IE6,IE7

　　_color: #666; // IE6 only

　　/* 只在IE6下生效 */

　　/* 只在IE7下生效 */

　　color: #777;

　　/* 在非IE下生效 */

　　項目規劃題：

　　假如你是項目負責人，你會如何規劃整個項目的CSS文件?

　　reset.css

　　public.css

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

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

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

　　邏輯題：

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

　　37.5°

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

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

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

　　代碼實戰題：

　　拖拽效果實現(兼容IE跟chrome)：

　　總體思路：點擊框框時，修改狀態為可拖拽。檢測鼠標移動，根據鼠標移動來修改框框位置。當鼠標放開時，修改狀態為不可拖拽。

　　不多說，上代碼：

　　[html] view plaincopyprint?