前端面試總結

時間 2019-11-18

標籤前端面試總結欄目快樂工作简体版

原文原文鏈接

一、http和https的區別

http協議一般承載於TCP協議之上，在http和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了咱們常說的https。javascript

默認的http端口爲80，https的端口爲443css

二、爲何https安全？

由於網絡請求須要中間有不少的服務器路由器的轉發，中間的節點均可能篡改信息，若是使用了https，密鑰在你和終點站纔有，http之因此比http安全，是由於他利用ssl/tls協議傳輸。html

三、javascript垃圾回收方法

標記清除（mark and sweep）

這是javascript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境時候（函數執行結束）將其標記爲「離開環境」。前端

飲用計數（reference counting）

在低版本ie常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個變量並將一個引用類型賦值給該變量的時候這個值的引用計數就加1，若是該變量的值變成了另一個，則這個值的引用次數就減1，當這個值的引用次數變爲0的時候，說明沒有在使用，這個值無法被訪問了，所以能夠將其佔用空間回收。html5

四、性能優化的問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器java

緩存利用：緩存ajax,使用CDN，使用外部js和css文件以便緩存，添加expires頭，服務器端配置etag,減小DNS查找等css3

請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。程序員

請求寬帶：壓縮文件，開啓GZIPweb

移動端性能優化ajax

一、儘可能使用css3動畫，開啓硬件加速

二、使用使用touch事件代替click事件

三、避免使用css3漸變陰影效果

四、能夠用transform：translateZ(0)來開啓硬件加速

五、不濫用float，float在渲染時計算量比較大，儘可能減小使用

六、不濫用web字體，web字體須要下載，解析，重繪當前頁面，儘可能減小使用

五、什麼是etag?

當發送一個服務器請求的時候，瀏覽器首先會進行緩存過時判斷，瀏覽器根據緩存過時時間判斷緩存文件是否過時。

情景一：若沒有過時，則不向服務器發送請求，直接使用緩存中的結果，此時咱們在瀏覽器控制檯中能夠看到200 OK （from cache）,

此時的狀況就是徹底使用緩存，瀏覽器和服務器沒有任何交互。

情景二：若過時，則向服務器發送請求，此時請求會帶上1中設置的文件修改時間和etag

而後進行資源更新判斷，服務器根據瀏覽器傳過來的文件修改時間，判斷自瀏覽器上一次請求以後，文件是否是沒有修改過，根據etag，判斷文件內容自上一次請求以後，有沒有發生變化

情形一：若兩種判斷的結論都是文件沒有被修改過，則服務器就不給瀏覽器發index.html的內容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時瀏覽器就會從本地緩存中獲取index.html的內容。此時的狀況叫協議緩存，瀏覽器和服務器之間有一次請求交互。

情形二：若修改時間和文件內容判斷有任意一個沒有經過，則服務器會受理這次請求，以後的操做同①

只有get請求會被緩存，post請求不會

Expires和Cache-Control

Expires要求客戶端和服務端的時鐘嚴格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。若是max-age和Expires同時出現，則max-age有更高的優先級。

Cache-Control: no-cache, private, max-age=0

ETag: abcde Expires: Thu, 15 Apr 2014 20:00:00 GMT

Pragma: private

Last-Modified: $now // RFC1123 format

ETag應用:

Etag由服務器端生成，客戶端經過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改。常見的是使用If-None-Match。請求一個文件的流程可能以下：

====第一次請求===

1.客戶端發起 HTTP GET 請求一個文件；

2.服務器處理請求，返回文件內容和一堆Header，固然包括Etag(例如"2e681a-6-5d044840")(假設服務器支持Etag生成和已經開啓了Etag).狀態碼200

====第二次請求===

客戶端發起 HTTP GET 請求一個文件，注意這個時候客戶端同時發送一個If-None-Match頭，這個頭的內容就是第一次請求時服務器返回的Etag：2e681a-6-5d0448402.服務器判斷髮送過來的Etag和計算出來的Etag匹配，所以If-None-Match爲False，不返回200，返回304，客戶端繼續使用本地緩存；流程很簡單，問題是，若是服務器又設置了Cache-Control:max-age和Expires呢，怎麼辦

答案是同時使用，也就是說在徹底匹配If-Modified-Since和If-None-Match即檢查完修改時間和Etag以後，

服務器才能返回304.(不要陷入到底使用誰的問題怪圈)

六、爲何使用Etag請求頭?

Etag 主要爲了解決 Last-Modified 沒法解決的一些問題

七、棧和隊列的區別?

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。

隊列先進先出，棧先進後出。

棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

八、棧和堆的區別？

棧區（stack）—   由編譯器自動分配釋放，存放函數的參數值，局部變量的值等。

堆區（heap）   —   通常由程序員分配釋放，若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

九、快速排序的思想並實現一個快排？

「快速排序」的思想很簡單，整個排序過程只須要三步：

　　（1）在數據集之中，找一個基準點

　　（2）創建兩個數組，分別存儲左邊和右邊的數組

　　（3）利用遞歸進行下次比較

<script type="text/javascript"> function quickSort(arr){ if(arr.length<=1){ return arr;//若是數組只有一個數，就直接返回； } var num = Math.floor(arr.length/2);//找到中間數的索引值，若是是浮點數，則向下取整 var numValue = arr.splice(num,1);//找到中間數的值 var left = []; var right = []; for(var i=0;i<arr.length;i++){ if(arr[i]<numValue){ left.push(arr[i]);//基準點的左邊的數傳到左邊數組 } else{ right.push(arr[i]);//基準點的右邊的數傳到右邊數組 } } return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重複比較 } alert(quickSort([32,45,37,16,2,87]));//彈出「2,16,32,37,45,87」 </script>

十、關於Http 2.0 你知道多少？

HTTP/2引入了「服務端推（server push）」的概念，它容許服務端在客戶端須要數據以前就主動地將數據發送到客戶端緩存中，從而提升性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技術，容許多個消息在一個鏈接上同時交差。

它增長了頭壓縮（header compression），所以即便很是小的請求，其請求和響應的header都只會佔用很小比例的帶寬。

十一、談談浮動和清除浮動

浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上

十二、說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

1.函數嵌套函數

2.函數內部能夠引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

1三、請你談談Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。

第一：每一個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和以後的版本最後能夠有50個cookie。

3.Firefox最多50個cookie

4.chrome和Safari沒有作硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。

IE 提供了一種存儲能夠持久化用戶數據，叫作userdata，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。

優勢：極高的擴展性和可用性

1.經過良好的編程，控制保存在cookie中的session對象的大小。

2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。

3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。

4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點：

1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉.


2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

1四、瀏覽器本地存儲

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是cookie也是不能夠或缺的：cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生

瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE七、IE6中的userData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。

localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

 二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙

    考慮到安全應當使用session。

 三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

     考慮到減輕服務器性能方面，應當使用COOKIE。

 四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

 五、因此我的建議：

    將登錄信息等重要信息存放爲SESSION

    其餘信息若是須要保留，能夠放在COOKIE中

1五、CSS中link 和@import的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;

(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4) link方式的樣式的權重 高於@import的權重.

1六、position:absolute和float屬性的異同

共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
不一樣點：float仍會佔據位置，absolute會覆蓋文檔流中的其餘元素。

1七、介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

1八、CSS3新增僞類舉例

p:first-of-type 選擇屬於其父元素的首個 元素的每一個 元素。

p:last-of-type 選擇屬於其父元素的最後 元素的每一個 元素。

p:only-of-type 選擇屬於其父元素惟一的 元素的每一個 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

1九、說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

20、浮動元素引發的問題和解決辦法？

浮動元素引發的問題：

（1）父元素的高度沒法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後

（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

清除浮動的幾種方法：

1，額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。） 2，使用after僞類 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 3,浮動外部元素 4,設置overflow爲hidden或者auto

2一、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

1）建立新節點

createDocumentFragment()    //建立一個DOM片斷

      createElement()   //建立一個具體的元素

      createTextNode()   //建立一個文本節點

2）添加、移除、替換、插入

appendChild()

      removeChild()

      replaceChild()

      insertBefore() //並無insertAfter()

3）查找

getElementsByTagName()    //經過標籤名稱

      getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，
      會獲得一個數組，其中包括id等於name值的)

      getElementById()    //經過元素Id，惟一性

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

  拖拽釋放(Drag and drop) API

  語義化更好的內容標籤（header,nav,footer,aside,article,section）

  音頻、視頻API(audio,video)

  畫布(Canvas) API

  地理(Geolocation) API

  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

  sessionStorage 的數據在瀏覽器關閉後自動刪除


  表單控件，calendar、date、time、email、url、search

  新的技術webworker, websocket, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

2二、null和undefined的區別？

null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。

當聲明的變量還未被初始化時，變量的默認值爲undefined。

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。


（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。


（3）對象沒有賦值的屬性，該屬性的值爲undefined。


（4）函數沒有返回值時，默認返回undefined。

null表示」沒有對象」，即該處不該該有值。典型用法是：

（1） 做爲函數的參數，表示該函數的參數不是對象。

（2） 做爲對象原型鏈的終點

2三、哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。



setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

2四、列舉IE 與其餘瀏覽器不同的特性？

IE支持currentStyle，FIrefox使用getComputStyle
IE 使用innerText，Firefox使用textContent
濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是addEventListener
鼠標位置：IE是event.clientX；火狐是event.pageX
IE使用event.srcElement；Firefox使用event.target
IE中消除list的原點僅需margin:0便可達到最終效果；FIrefox須要設置margin:0;padding:0以及list-style:none
CSS圓角：ie7如下不支持圓角

2五、對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

    一、實現界面交互

    二、提高用戶體驗

    三、有了Node.js，前端能夠實現服務端的一些事情


前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，



 參與項目，快速高質量完成實現效果圖，精確到1px；

 與團隊成員，UI設計，產品經理的溝通；

 作好的頁面結構，頁面重構和用戶體驗；

 處理hack，兼容、寫出優美的代碼格式；

 針對服務器的優化、擁抱最新前端技術

2六、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：

    （1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。

    （2）， 瀏覽器與遠程`Web`服務器經過`TCP`三次握手協商來創建一個`TCP/IP`鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

    （3），一旦`TCP/IP`鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送`HTTP`的`GET`請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。

    （4），此時，`Web`服務器提供資源服務，客戶端開始下載資源。



請求返回後，便進入了咱們關注的前端模塊

簡單來講，瀏覽器會解析`HTML`生成`DOM Tree`，其次會根據CSS生成CSS Rule Tree，而`javascript`又能夠根據`DOM API`操做`DOM`

詳情：[從輸入 URL 到瀏覽器接收的過程當中發生了什麼事情？][8]

2七、請解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲何要有同源限制？

咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

2八、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

    POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。


    GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，

    也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。



然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

2八、HTTP狀態碼

100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

    200  OK   正常返回信息

    201  Created  請求成功而且服務器建立了新的資源

    202  Accepted  服務器已接受請求，但還沒有處理

    301  Moved Permanently  請求的網頁已永久移動到新位置。

    302 Found  臨時性重定向。

    303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。

    304  Not Modified  自從上次請求後，請求的網頁未修改過。


    400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

    401 Unauthorized  請求未受權。

    403 Forbidden  禁止訪問。

    404 Not Found  找不到如何與 URI 相匹配的資源。

    500 Internal Server Error  最多見的服務器端錯誤。

    503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。