面試題小集錦

閉包的理解

使用閉包主要是爲了設計私有的方法和變量。 優勢是能夠避免全局變量的污染， 缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露

Cookie

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

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

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

3. Firefox最多50個cookie

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

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

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

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

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

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

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

缺點:

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

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

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

瀏覽器本地存儲

sessionStorage

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

localStorage

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

web storage和cookie的區別

Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用 cookie須要前端開發者本身封裝setCookie，getCookie

link 和@import 的區別是

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

2. 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

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

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

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

BFC規範的理解

級格式化上下文，是CSS中的一個渲染機制，BFC就至關於一個盒子，內部的元素與外界的元素互不干擾。它不會影響外部的佈局，外部的佈局也不會影響到它.

建立BFC

• float的值不是none

• position 的值不是static或者relative

• display的值是inline-block,table-cell,flex,table-caption或者inline-flex

• overflow的值不是visible

BFC的特性

• 內部的BOX會在垂直方向上一個接一個的放置

• 於同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。

• 每一個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即便浮動元素也是如此

• BFC的區域不會與float的元素區域重疊

• 計算BFC的高度時，浮動子元素也參與計算

• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然

BFC在佈局中的應用

要阻止margin重疊，只要將倆個元素別放在一個BFC中便可

使得父元素包含子元素，常見的方式是爲父元素設置overflow：hidden或者浮動父元素。根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題

與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性能夠做爲多欄佈局的一種實現方式. 特色在於左右倆欄的寬度固定，中間欄能夠根據瀏覽器寬度自適應

null和undefined的區別

undefined

undefined是一個表示"無"的原始值，轉爲數值時爲NaN

• 變量被聲明瞭，但沒有賦值時，就等於undefined

• 調用函數時，應該提供的參數沒有提供，該參數等於undefined

• 對象沒有賦值的屬性，該屬性的值爲undefined

• 函數沒有返回值時，默認返回undefined

null

null是一個表示"無"的對象，轉爲數值時爲0

• 做爲函數的參數，表示該函數的參數不是對象

• 做爲對象原型鏈的終點

documen.write和 innerHTML的區別

document.write只能重繪整個頁面 innerHTML能夠重繪頁面的一部分

HTML5的離線存儲

原理

HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現

使用

• 在文檔的 html 標籤設置 manifest 屬性，如 manifest="/offline.appcache"

• 在項目中新建 manifest 文件，manifest 文件的命名建議：xxx.appcache

• 在 web 服務器配置正確的 MIME-type，即 text/cache-manifest

css各類居中

水平居中

1. .parent{

2.    text-align: center;

3. }

4. .child{

5.    display: inline-block;

6. }

1. .child{

2.    display:table;

3.    margin: 0 auto;

4. }

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    left:50%;

7.    transform: translateX(-50%);

8. }

垂直居中

• table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4. }

absolute配合tranform

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    top: 50%;

7.    transform: translateY(-50%);

8. }

水平+垂直居中

• inline-block配合text-align加上table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4.    text-align:center;

5. }

6. .child{

7.    display: inline-block;

8. }

1. .parent{

2.    position: relative;

3. }

4. .child{

5.    position: absolute;

6.    left: 50%;

7.    top: 50%;

8.    transform: translate(-50%,-50%);

9. }

全能的flex

1. .parent{

2.    display: flex;

3.    justify-content: center;

4. }

1. .parent{

2.    display: flex;

3.    align-items: center;

4. }

1. .parent{

2.    display: flex;

3.    justify-content: center;

4.    align-items: center;

5. }

 

 

1、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直爲100px，右邊的div跟隨瀏覽器大小變化（好比瀏覽器爲500，右邊div爲400，瀏覽器爲900，右邊div爲800），請寫出大概的css代碼。

 

1.使用flex

 

//html

<div class='box'><div class='left'></div> <div class='right'></div></div>

 

 

//css

.box {

    width: 400px;

    height: 100px;

    display: flex;

    flex-direction: row;

    align-items: center;

    border: 1px solid #c3c3c3;

}

.left {

    flex-basis：100px;

    -webkit-flex-basis: 100px;

    /* Safari 6.1+ */

    background-color: red;

    height: 100%;

}

.right {

    background-color: blue;

    flex-grow: 1;

}

 

2.浮動佈局

 

<div id="left">Left sidebar</div>

<div id="content">Main Content</div>

 

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

#left {

    float: left;

    width: 220px;

    background-color: green;

}

#content {

    background-color: orange;

    margin-left: 220px;

    /*==等於左邊欄寬度==*/

}

</style>

 

2、請寫出一些前端性能優化的方式，越多越好

 

1.減小dom操做

2.部署前，圖片壓縮，代碼壓縮

3.優化js代碼結構，減小冗餘代碼

4.減小http請求，合理設置 HTTP緩存

5.使用內容分發cdn加速

6.靜態資源緩存

7.圖片延遲加載

 

3、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

 

輸入地址

1.瀏覽器查找域名的 IP 地址

2.這一步包括 DNS 具體的查找過程，包括：瀏覽器緩存->系統緩存->路由器緩存…

3.瀏覽器向 web 服務器發送一個 HTTP 請求

4.服務器的永久重定向響應（從 http://example.com 到 http://www.example.com）

5.瀏覽器跟蹤重定向地址

6.服務器處理請求

7.服務器返回一個 HTTP 響應

8.瀏覽器顯示 HTML

9.瀏覽器發送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）

10.瀏覽器發送異步請求

 

4、請大概描述下頁面訪問cookie的限制條件

 

1. 跨域問題

2. 設置了HttpOnly

 

5、描述瀏覽器重繪和迴流，哪些方法可以改善因爲dom操做產生的迴流

 

1.直接改變className，若是動態改變樣式，則使用cssText

 

// 很差的寫法

var left = 1;

var top = 1;

el.style.left = left + "px";

el.style.top = top + "px"; // 比較好的寫法

el.className += " className1";

 

// 比較好的寫法

el.style.cssText += ";

left: " + left + "px;

top: " + top + "px;";

 

2.讓要操做的元素進行」離線處理」，處理完後一塊兒更新

 

a) 使用DocumentFragment進行緩存操做,引起一次迴流和重繪；

b) 使用display:none技術，只引起兩次迴流和重繪；

c) 使用cloneNode(true or false) 和 replaceChild 技術，引起一次迴流和重繪

 

6、vue生命週期鉤子

 

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed

 

7、js跨域請求的方式，能寫幾種是幾種

 

一、經過jsonp跨域

二、經過修改document.domain來跨子域

三、使用window.name來進行跨域

四、使用HTML5中新引進的window.postMessage方法來跨域傳送數據（ie 67 不支持）

五、CORS 須要服務器設置header ：Access-Control-Allow-Origin。

六、nginx反向代理 這個方法通常不多有人說起，可是他能夠不用目標服務器配合，不過須要你搭建一箇中轉nginx服務器，用於轉發請求

 

8、對前端工程化的理解

 

• 開發規範

• 模塊化開發

• 組件化開發

• 組件倉庫

• 性能優化

• 項目部署

• 開發流程

• 開發工具

 

九, js深度複製的方式

 

1.使用jq的$.extend(true, target, obj)

2.newobj = Object.create(sourceObj)，// 可是這個是有個問題就是 newobj的更改不會影響到 sourceobj可是 sourceobj的更改會影響到newObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))

 

10、js設計模式

 

整體來講設計模式分爲三大類：

 

• 建立型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。

• 結構型模式，共七種：適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。

• 行爲型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模

 

11、圖片預覽

 

<input type="file" name="file" onchange="showPreview(this)" />

<img id="portrait" src="" width="70" height="75">

 

function showPreview(source) {

  var file = source.files[0];

  if(window.FileReader) {

      var fr = new FileReader();

      fr.onloadend = function(e) {

        document.getElementById("portrait").src = e.target.result;

      };

      fr.readAsDataURL(file);

  }

}

 

12、扁平化多維數組

 

一、老方法

 

var result = []

function unfold(arr){

     for(var i=0;i< arr.length;i++){

      if(typeof arr[i]=="object" && arr[i].length>1) {

       unfold(arr[i]);

     } else {        

       result.push(arr[i]);

     }

  }

}

 

var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

unfold(arr)

 

二、使用tostring

 

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

var b = c.toString().split(',')

 

三、使用es6的reduce函數

 

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

var result = flatten(arr)

 

十3、iframe有那些缺點？

 

• iframe會阻塞主頁面的Onload事件；

• 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;

• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

• 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

十四。事件委託

參考地址

 

15.require與import的區別

第1、二者的加載方式不一樣，require是在運行時加載，而import是在編譯時加載

第2、規範不一樣，require是CommonJS/AMD規範，import是ESMAScript6+規範

第3、require特色：社區方案，提供了服務器/瀏覽器的模塊加載方案。非語言層面的標準。只能在運行時肯定模塊的依賴關係及輸入/輸出的變量，沒法進行靜態優化。

import特色：語言規格層面支持模塊功能。支持編譯時靜態分析，便於JS引入宏和類型檢驗。動態綁定。