前端面試題（二）

11：函數A和函數B，實現B繼承A，說明優缺點？

1. 
   // 方式1

function B(){}

function A(){}

B.prototype = new A();

 

// 方式2

function A(){}

function B(){

  A.call(this);

}

方式3

function B(){}

function A(){}

B.prototype = new A();

function B(){

  A.call(this)

}

方式1：簡單易懂，可是沒法實現多繼承，父類新增原型方法/原型屬性，子類都能訪問到

方式2：能夠實現多繼承，可是隻能繼承父類的實例屬性和方法，不能繼承原型屬性/方法

方式3：能夠繼承實例屬性/方法，也能夠繼承原型屬性/方法，可是示例了兩個A的構造函數

12：CSS和JS位置爲何會影響頁面效果？

css在加載過程當中不會影響到DOM樹的生成，可是會影響到Render樹的生成，進而影響到layout，因此通常來講，style的link標籤須要儘可能放在head裏面，由於在解析DOM樹的時候是自上而下的，而css樣式又是經過異步加載的，這樣的話，解析DOM樹下的body節點和加載css樣式能儘量的並行，加快Render樹的生成的速度。

 

js腳本應該放在底部，緣由在於js線程與GUI渲染線程是互斥的關係，若是js放在首部，當下載執行js的時候，會影響渲染行程繪製頁面，js的做用主要是處理交互，而交互必須得先讓頁面呈現才能進行，因此爲了保證用戶體驗，儘可能讓頁面先繪製出來

 

13：flex佈局

  //自行百度，主要幾個API 

14：描述一下this

    this，函數執行的上下文，能夠經過apply，call，bind改變this的指向。對於匿名函數或者直接調用的函數來講，this指向全局上下文（瀏覽器爲window，nodejs爲global），剩下的函數調用，那就是誰調用它，this就指向誰。固然還有es6的箭頭函數，箭頭函數的指向取決於該箭頭函數聲明的位置，在哪裏聲明，this就指向哪裏。

15:遊覽器的緩存機制

    瀏覽器緩存機制有兩種，一種爲強緩存，一種爲協商緩存。

對於強緩存，瀏覽器在第一次請求的時候，會直接下載資源，而後緩存在本地，第二次請求的時候，直接使用緩存。

對於協商緩存，第一次請求緩存且保存緩存標識與時間，重複請求向服務器發送緩存標識和最後緩存時間，服務端進行校驗，若是失效則使用緩存。

 

協商緩存方案：

Exprires：服務端的響應頭，第一次請求的時候，告訴客戶端，該資源何時會過時。Exprires的缺陷是必須保證服務端時間和客戶端時間嚴格同步。

Cache-control：max-age，表示該資源多少時間後過時，解決了客戶端和服務端時間必須同步的問題，

If-None-Match/ETag：緩存標識，對比緩存時使用它來標識一個緩存，第一次請求的時候，服務端會返回該標識給客戶端，客戶端在第二次請求的時候會帶上該標識與服務端進行對比並返回If-None-Match標識是否表示匹配。

Last-modified/If-Modified-Since：第一次請求的時候服務端返回Last-modified代表請求的資源上次的修改時間，第二次請求的時候客戶端帶上請求頭If-Modified-Since，表示資源上次的修改時間，服務端拿到這兩個字段進行對比。

16：ETag這個字符串是怎麼生成的？

Etag由服務器端生成，客戶端經過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改。常見的是使用If-None-Match。根據Etag，判斷文件內容自上一次請求以後，有沒有發生變化。情形一：若兩種判斷的結論都是文件沒有被修改過，則服務器就不給瀏覽器發index.html的內容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時瀏覽器就會從本地緩存中獲取index.html的內容。此時的狀況叫協議緩存，瀏覽器和服務器之間有一次請求交互。情形二：若修改時間和文件內容判斷有任意一個沒有經過，則服務器會受理這次請求，以後的操做同情景一。

17：二叉樹的幾種遍歷方式

    自行百度：前序遍歷，中序遍歷，後序遍歷

18：說明你所掌握的全部的排序？實現原理

    //選擇，冒泡，快速，插入排序，通常這四種

19：請手寫實現一個promise

  http://www.cnblogs.com/huansky/p/6064402.html

20：svg和canvas各自的優缺點？

svg優勢：矢量圖，不依賴於像素，無限放大後不會失真。

以dom的形式表示，事件綁定由瀏覽器直接分發到節點上。

svg缺點：dom形式，涉及到動畫時候須要更新dom，性能較低。

canvas優勢：定製型更強，能夠繪製繪製本身想要的東西。非dom結構形式，用JavaScript進行繪製，涉及到動畫性能較高。

canvas缺點：事件分發由canvas處理，繪製的內容的事件須要本身作處理。依賴於像素，沒法高效保真，畫布較大時候性能較低。