web前端面試題，web面試題

web前端面試題，web面試題
歡迎轉載，但請註明出處：http://blog.csdn.net/sysuzjz/article/details/44562467

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

另註：問方和答方均預設所問瀏覽器為主流瀏覽器（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值最常用。
      • Public指示響應可被任何緩衝區緩衝。
        
      • Private指示對於單個使用者的整個或部分響應訊息，不能被共用快取處理。這允許伺服器僅僅描述當使用者的部分響應訊息，此響應訊息對於其他使用者的請求無效。
        
      • no-cache指示請求或響應訊息不能緩衝
        
      • no-store用於防止重要的資訊被無意的發布。在請求訊息中發送將使得請求和響應訊息都不使用緩衝。
        
      • max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。
        
      • min-fresh指示客戶機可以接收回應時間小於目前時間加上指定時間的響應。
        
      • max-stale指示客戶機可以接收超出逾時期間的響應訊息。如果指定max-stale訊息的值，那麼客戶機可以接收超出逾時期指定值之內的響應訊息。
    • Last-Modified / If-Modified-Since：配合Cache-Control使用。
      
      • 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 / If-None-Match：也要配合Cache-Control使用。注意，Etag優先順序比Last-Modified高，伺服器會優先比對Etag。
      
      • 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中的各級標題如H1等等，我們當然可以用div、span加上各種樣式來實現，但是，那相當於用曳引車載客，能實現，但是臃腫不實用。同樣的例子還有header，footer等標籤。
  • 作用：
    • 首先是對維護者友好，維護你代碼的人，能通過你的HTML代碼輕鬆理解你的意圖；
    • 其次是對搜尋引擎友好，搜尋引擎不會抓取你的CSS屬性，所以，語義化能讓搜尋引擎更好的抓到你想表達的東西，更容易讓搜尋引擎理解你的網站架構；
    • 另外就是對方便使用，當然大部分使用者都只是用眼睛看你的網站，所以可以通過CSS樣式來達到這個目的。但是，盲人是沒法看到的，他們只能通過輔助裝置來實現，但同樣的，這些裝置只能識別語義化的HTML。
• ajax怎麼實現？
  • 通過瀏覽器的XMLHttpRequest（非IE）或ActiveXObject（IE）對象，非同步發送資料，並執行回調。具體實現代碼如下：（代碼來源：http://www.jb51.net/article/23858.htm）

  • 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 下分別使用不同顏色
  
  • 以下分別用條件注釋和屬性首碼法實現

  • /* 只在IE6下生效 */<!--[if IE 6]>    color: #666;<![endif]-->/* 只在IE7下生效 */<!--[if IE 7]>    color: #777;<![endif]-->/* 在非IE下生效 */<!--[if !IE]>    color: #fff;<![endif]-->

  • color: #67f;    // firefox, IE6, IE7*color: #667; // IE6,IE7_color: #666; // IE6 only

專案規劃題：

• 假如你是項目負責人，你會如何規劃整個項目的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）：總體思路：點擊框框時，修改狀態為可拖拽。檢測滑鼠移動，根據滑鼠移動來修改框框位置。當滑鼠放開時，修改狀態為不可拖拽。不多說，上代碼：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>元素拖拽</title>        <style type="text/css">            #drag {                position: absolute;                top: 1px;                left: 1px;                width: 100px;                height: 400px;                background-color: #ccc;                cursor: move;            }        </style>    </head>    <body>        <div id="drag">                    </div>    </body>    <script type="text/javascript">        var isDraged = false,            offsetX = 0,            offsetY = 0;        function addEvent(node, event, callback) {            if(document.addEventListener) {                node.addEventListener(event, callback);            } else {                node.attachEvent("on" + event, callback);            }        }        var dragNode = document.getElementById("drag");        addEvent(dragNode, "mousedown", function(event) {            isDraged = true;            var left = dragNode.style.left ? dragNode.style.left : 0;            var top = dragNode.style.top ? dragNode.style.top : 0;            offsetX = event.pageX - parseInt(left);            offsetY = event.pageY - parseInt(top);        })        addEvent(document, "mousemove", function(event) {            if(isDraged) {                dragNode.style.left = event.pageX - offsetX + "px";                dragNode.style.top = event.pageY - offsetY + "px";            }        })        addEvent(document, "mouseup", function() {            isDraged = false;        })    </script></html>

右鍵自訂菜單總體思路：屏蔽瀏覽器郵件菜單，將自己寫的菜單隱藏，當檢測到右鍵點擊時顯示菜單，否則隱藏菜單。上代碼：

<!DOCTYPE html><html>    <head>        <meta charset='utf-8'>        <title>右鍵菜單</title>        <style type="text/css">            #menu {                position: absolute;                display: none;                width: 100px;                height: 200px;                left: 0;                top: 0;                background-color: green;            }        </style>    </head>    <body>        <div id="menu">                    </div>    </body>    <script type="text/javascript">        var menuNode = document.getElementById("menu");        document.oncontextmenu = function() {            return false;        }        document.onmousedown = function(event) {            if(event.button === 2) {                var pageX = event.pageX,                    pageY = event.pageY;                menuNode.style.display = "block";                   menuNode.style.top = pageY + "px";                menuNode.style.left = pageX + "px";            } else {                menuNode.style.display = "none";            }        }    </script></html>

判斷一個網域名稱是不是xx公司的（備忘：該公司所有網域名稱為***.xx.com，或xx.com）思路：正則判斷

var exp = new RegExp(/^(.+\.)*qq.com(\W[\s\S]*$|$)/);var hostName = window.location.hostname;exp.test(hostName);

文章高頻詞檢索說明：英文文章思路：用空格分割成數組，注意分隔字元（引號，句號等），將單詞轉化為小寫作為key值，存進hash數組，最後統計。代碼不上了，寫的太醜。高精度加法說明：兩個數相加，這兩個數非常大（接近Number.MAX_VALUE），求相加後的結果。思路：字串輸入，字串輸出，從低位到高位，一位位相加，注意進位。代碼同樣不上了。主觀問題：主觀問題是仁者見仁智者見智的，這裡只是提供一點參考。需要提醒的是，這部分一般是人力面，而人力一般不懂多少技術，所以就不要抓著技術大談特談了

• 自我介紹
  • 這個就不用我說了，時間不是重點，但要盡量涵蓋所有時間軸。
• 你從之前的學習/做項目中，學到了什嗎？
  • 能說出來就行，不需要太具體，比如學到了原型繼承blabla的，HR會很鬱悶的
• 你想在之後的工作中學到什嗎？
  • 你覺得你能學到什麼就說什麼吧，團隊協作能力，交際能力，都是可以的
• 你對工作地點、部門有什麼要求？
  • 看你自己咯
• 你覺得你最大的優點和缺點是什嗎？
  • 回答”我最大的優點就是沒有缺點，我最大的缺點就是沒有缺點“這種作死的就沒必要去參加面試了。
  • 優點要說實話，但可以挑好的說，比如優點可以說自己善良什麼的，不需要具體，比如你說優點是人走關燈之類的就沒必要了（可以往大說環保意識強）
  • 缺點可以說實話，但要保留，並且要善於將缺點描述轉化為優點描述
• 其他