前端面試題2017（篇幅長，附答案）

時間 2019-11-05

標籤端面試題篇幅答案简体版

原文原文鏈接

說明：簡答題沒有固定答案，如下給出的答案是從別處摘錄或本身總結，有錯之處歡迎指出。javascript

html 篇

標籤上title和alt屬性的區別是什麼？css
- alt是html標籤的屬性，而title既是html標籤，又是html屬性。
- title做爲屬性時，用來爲元素提供額外說明信息。例如，給超連接標籤a添加了title屬性，把鼠標移動到該連接上面，就會顯示title的內容，以達到補充說明或者提示的效果。
- alt屬性則是用來指定替換文字，只能用在img、area和input元素中，用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息。注意，alt是替代圖像做用而不是提供額外說明文字的。
- 使用alt屬性還具備搜索引擎優化效果，由於搜素引擎是沒法直接讀取圖像的信息的，alt能夠爲其提供文字信息因此對搜索引擎比較友好。

css 篇

relative、absolute、static、fixed的做用，相對誰定位？html
- static（靜態定位）：occurs where it normally would in the document.
  默認值。元素使用正常的佈局行爲，相對於document，即元素在文檔流中當前的佈局位置。此時top,bottom, left, right 或者 z-index無效。
- relative（相對定位）：you can use top,bottom... to move the element relative to where it would normally occur in the document.
  生成相對定位的元素，相對於本該在文檔中的位置。經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。可經過z-index進行層次分級。
- absolute (絕對定位）：the element will removed from the document and placed exactly where you tell it to go.
  生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。絕對定位能夠設置margin，且不會與其餘元素合併。
- fixed（固定定位）：生成絕對定位的元素，相對於屏幕飾釦進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。打印時，元素會出如今每頁的固定位置。
- sticky（粘性定位）：是相對定位和固定定位結合，在跨越閾值以前相對定位，以後固定定位。
畫出css盒模型java
- W3C標準盒模型：width = contentWidth+padding+border+margin。
  盒子在頁面佔據的大小包括了margin，border，padding以及content。而盒子的實際大小包括border，padding以及內容區域content，可是不包括margin。另外一點須要說明的是，咱們經過JavaScript代碼獲取某一個元素的大小時，所獲得的width和height實際上是盒子模型中的content的大小。
- IE盒模型：width = contentWidth(包含border+padding)+margin。
  IE盒模型也包含margin，border，padding以及content這幾部分。IE盒模型的content部分包含了border和padding。
border-box和content-box的區別和使用場景？
爲了更能形像看出box-sizing中content-box和border-box二者的區別，咱們來個示例圖，以下所示，

這個box-sizing屬性，咱們都有哪些使用場景呢？react
- 特殊場景的佈局：假設咱們有這樣的一個場景，設置子類元素的margin或者border時，可能會撐破父層元素的尺寸，這時我就須要使用box-sizing: border-box來將border包含進元素的尺寸中，這樣就不會存在撐破父層元素的狀況了。
- 統一風格的表單元素：表單中有一些input元素其實仍是展示的是傳統IE盒模型，帶有一些默認的樣式，並且在不一樣平臺或者瀏覽器下的表現不一，形成了表單展示的差別。此時咱們能夠經過box-sizing屬性來構建一個風格統一的表單元素。
css清除浮動的方法web
- 設置好一個類用來clearfix，再把該類名加至父元素上：算法
```
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {clear: both;}
.clearfix: {zoom: 1}
```
  clearfix技巧是基於在父元素上使用":before"和":after"兩個僞類。咱們能夠在浮動元素的父容器前面和後面建立隱藏元素，":before"用來防止元素頂部的外邊距塌陷，用display:table來建立一個匿名的table-cell元素，也確保IE6/7下一致":after"用來防止子元素底部的外邊距塌陷，以及用來清除浮動元素。缺點是代碼多一點，但還好，用的人也多，兼容性也好。json
- overflow方法：在父元素上設置overflow: hidde/auto。使用auto在IE中有一個滾動條，最好仍是用hidden。缺點：若是有元素須要移動到父容器外面，就回隱藏，或者給子元素在沒有padding下作個陰影，也會被父元素切斷
- 在父容器結束標籤前加一個空標籤，並設置clear:both。但若是有不少元素都包含浮動元素，就麻煩，語義化也很差。
談談你是怎麼適配移動端各類尺寸手機的，以設計稿寬度爲375px爲例?

根據以下代碼，判斷p元素中文字的顏色?segmentfault

<style>
.blue{color: blue;}
.red{color: red;}
</style>

<p class="blue red">內容</p> //red

javascript 篇

代碼題數組

function fun(n, o) {
  console.log(o);
  return {
    fun: function(m) {
      return fun(m, n)
    }
  }
}

var a = fun(1).fun(2).fun(4).fun(8) //undefined,1,2,4

var User = {
  count: 1,
  getCount: function() {
    return this.count
  }
}

var fn = User.getCount
console.log(fn()); //undefined

function test() {
  for(var i=0; i<5; i++) {
    setTimeout(function() {
      console.log(i)
    }, 0)
  }
}
test(); //5,5,5,5,5

var o = {
  fn: function() {
    console.log(fn)
  }
}

console.log(o.fn()); //ReferenceError

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(this.name)
}

function Cat(name) {
  Animal.call(this, name)
}

var kat = new Cat('Jim')

kat.sayName(); 
//TypeError: kat.sayName is not a function
//除非加上 Cat.prototype = new Animal()

寫一個數組去重的方法

/** 方法一：
 * 1.構建一個新的數組存放結果
 * 2.for循環中每次從原數組中取出一個元素，用這個元素循環與結果數組對比
 * 3.若結果數組中沒有該元素，則存到結果數組中
 * 缺陷：不能去重數組中得引用類型的值和NaN
*/
function unique(array){
  var result = [];
  for(var i = 0;i < array.length; i++){
    if(result.indexOf(array[i]) == -1) {
      result.push(array[i]);
    }
  }
  return result;
}

// [1,2,1,2,'1','2',0,'1','你好','1','你好',NaN,NaN] => [1, 2, "1", "2", 0, "你好",NaN,NaN]
// [{id: '1'}, {id: '1'}] => [{id: '1'}, {id: '1'}]

//方法二：ES6
Array.from(new Set(array))

// [1,2,1,2,'1','2',0,'1','你好','1','你好',NaN,NaN] => [1, 2, "1", "2", 0, "你好", NaN]

寫一個方法，將URL中的查詢字符串解析成一個字典對象

var path = 'www.u.com/home?id=2&type=0&dtype=-1';

function parseUrl(url) {
  var result = [];
  var tmp = (url.split('?'))[1];
  var tmpArr = tmp.split('&');
  tmpArr.map(function(v, k) {
    var value, key;
    var obj = {};
    key = (v.split('='))[0];
    value = (v.split('='))[1];
    obj[key] = value;
    result.push(obj)
  })
  
  return result;
}

console.log(parseUrl(path)); //[{id: '2'},{type: '0'},{dtype: '-1'}]

//功能：獲取url中的參數的值
function UrlSearch(url) {
  var name,value;
  var str = url; //取得整個地址欄
  var num = str.indexOf("?");
  str = str.substr(num+1); //取得全部參數   stringvar.substr(start [, length ]

  var arr=str.split("&"); //各個參數放到數組裏
  for(var i=0;i < arr.length;i++){
    num = arr[i].indexOf("=");
    if(num>0){
      name=arr[i].substring(0,num);
      value=arr[i].substr(num+1);
      this[name]=value;
    }
  }
}

// 測試
var path = 'www.u.com/home?id=2&type=0&dtype=-1';
var Request= new UrlSearch(path); //實例化
console.log(Request); //[{dtype: '-1'},{id: '2'},{type: '0'}]
var nickname = encodeURIComponent(Request.dtype);
console.log(nickname); //-1

//功能：修改url參數值
function changeURLArg(url,arg,arg_val){
  var pattern=arg+'=([^&]*)';
  var replaceText=arg+'='+arg_val;
  if(url.match(pattern)){
    var tmp='/('+ arg+'=)([^&]*)/gi';
    tmp=url.replace(eval(tmp),replaceText);
    return tmp;
  }else{
    if(url.match('[\?]')){
      return url+'&'+replaceText;
    }else{
      return url+'?'+replaceText;
    }
  }
  return url+'\n'+arg+'\n'+arg_val;
}

var path = 'www.u.com/home?id=2&type=0&dtype=-1';
console.log(changeURLArg(path,'type',4)); //"www.u.com/home?id=2&type=4&dtype=4"

Ajax請求的時候get和post的區別
談談cookie，sessionStorage, localStorage的區別和優缺點
你知道的性能優化的方法

http 篇

http狀態碼有哪些？分別表示什麼意思？
狀態碼告知從服務器返回的請求結果。
2XX代表請求被正常處理了。200OK、204No Content（服務器接收的請求已經處理成功，但在返回的響應報文中不包含實體的主體部分）、206Partial Content(客戶端進行了範圍請求，對資源的某一部分請求)；3XX重定向，301moved permanently(資源已分配新的uri)、302 found(本次使用新uri訪問)、303 see other(以get定向到另外一個uri)、304 not modified、307 temporary redirect(不會從post改成get)；4XX客戶端錯誤，400 bad request（請求報文中存在語法錯誤），402 unauthorized（發送的請求須要經過http認證）、403 forbidden（服務器拒絕了對資源的訪問）、404 not found（服務器上沒有請求的資源）；500XX服務器錯誤 500internal server error（服務器在執行是發生了錯誤）、503 service unavailable（服務器正忙或停機維護）。
一個頁面從輸入 URL 到頁面加載完的過程當中都發生了什麼事情？
總的來講，根據web瀏覽器地址欄中指定的URL，web瀏覽器從web服務器端獲取資源文件等信息，從而顯示出web頁面。具體而言，有以下幾個步驟：
- 1.瀏覽器接收URL(包含的信息：協議方案名、服務器地址:服務器端口號、帶層次的文件路徑、查詢字符串？、片斷標識符)
- 2.將URL與緩存進行比對若是請求的頁面在緩存中且未過時，則直接進行第8步。
- 3.負責域名解析DNS服務。系統進行DNS查找，並將IP地址返回給瀏覽器。
  DNS服務適合HTTP協議同樣位於應用層的協議。它提供域名到IP地址之間的解析服務。能夠經過域名查找IP地址，也能夠逆向從IP地址反查找域名。
- 4.瀏覽器與服務器創建TCP鏈接（在傳輸層）
  這一步很複雜由於用到了HTTPS。三次握手(SYN,SYN/ACK,ACK)，如有一次任何一方收不到信息那麼將會從新發起 TCP 鏈接。
- 5.瀏覽器向服務器經過TCP協議鏈接發送HTTP請求。
  數據通過應用層、傳輸層、網絡層、鏈路層，傳輸到下一個目的地。應用層決定了向用戶提供應用服務時的通訊（http協議，DNS服務）。傳輸層對上層應用層，提供處於網絡鏈接中的兩臺計算機之間的數據傳輸（TCP協議和UDP協議）。網絡層用來處理網絡上流動的數據包，數據包是網絡傳輸的最小數據單位，該層規定經過怎樣的路徑到達對方計算機，並把數據傳輸給對方。鏈路層處理鏈接網絡的硬件部分（網卡，光纖）。這一步驟還會涉及發送給服務器的請求報文（請求方法、請求URI、協議版本、首部字段、內容實體）。
- 6.服務器收到請求，從它的文檔空間中查找資源並返回HTTP響應。
  服務器返回的響應報文包括協議版本、狀態碼、解釋狀態碼的緣由短語、響應首部字段、實體主體。
- 7.瀏覽器接受 HTTP 響應，檢查 HTTP header 裏的狀態碼，並作出不一樣的處理方式。關於返回的狀態碼的具體說明看上個問題。
- 8.若是是能夠緩存的，這個響應則會被存儲起來。
  根據首部字段判斷是否進行緩存。例如，Cache-Control, no-cache(每次使用緩存前和服務器確認)，no-store 絕對禁止緩存。
- 9.瀏覽器解碼響應
  瀏覽器拿到index.html文件後，就開始解析其中的html代碼，遇js/css/image等靜態資源時，就向服務器端去請求下載；解析成對應的樹形數據結構DOM樹、CSS規則樹，Javascript腳本經過DOM API和CSSOM API來操做DOM樹、CSS規則樹。
- 10.渲染頁面
- 11.關閉TCP鏈接或繼續保持鏈接
  經過四次揮手關閉鏈接(FIN ACK, ACK, FIN ACK, ACK)。
頁面渲染的過程
頁面渲染過程總的來講是，瀏覽器拿到html文檔，自上而下構建dom樹，再根據dom樹構建渲染樹（和dom樹有區別，瀏覽器解析html文檔和解析css樣式造成dom樹和cssdom樹，結合這兩種纔會構建渲染樹）。這裏有一種狀況，若是在head中寫入link某個css文件，然後插入script標籤，引入一個巨大的js文件，因爲瀏覽器下載css文件需耗時間，這個時候瀏覽器還在自上而下地去解析dom樹，可是遇到script標籤，而且因爲樣式表沒有下載下來，阻塞了構建渲染樹。一旦css文件加載完成，會結合剛在的dom樹構建渲染樹，顯示到頁面，接續加載js文件。可是恰巧js文件巨大，阻塞了瀏覽器向下解析，等待這個巨大的js文件下載完成後才繼續向下解析。如此反覆，最後將渲染樹渲染到頁面。
jsonp原理

react 篇

react生命週期
組件間的通訊

算法篇

寫一個大整數乘法計算的方法
假如一個數很大很大，計算的時候會致使精度丟失的問題。網上有各類解法，你們能夠自行google。這裏我給出的思路是把整數轉換成字符串類型的數據，再把轉換後的數據拆分紅單個數據，分別計算單個數據相乘，最後相加並把結果轉換回number類型。不知可不可行。。。
寫出一種排序算法
以前整理過一篇blog，適合算法小白入門——幾種基本排序算法

輸入url到頁面展現參考：http://www.jianshu.com/p/71cf...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。