1、什么是Etag？

當(dāng)發(fā)送一個(gè)服務(wù)器請(qǐng)求時(shí)，瀏覽器首先會(huì)進(jìn)行緩存過期判斷。瀏覽器根據(jù)緩存過期時(shí)間判斷緩存文件是否過期。

情景一：若沒有過期，則不向服務(wù)器發(fā)送請(qǐng)求，直接使用緩存中的結(jié)果，此時(shí)我們?cè)跒g覽器控制臺(tái)中可以看到 200 OK(from cache) ，此時(shí)的情況就是完全使用緩存，瀏覽器和服務(wù)器沒有任何交互的。

情景二：若已過期，則向服務(wù)器發(fā)送請(qǐng)求，此時(shí)請(qǐng)求中會(huì)帶上①中設(shè)置的文件修改時(shí)間，和Etag

然后，進(jìn)行資源更新判斷。服務(wù)器根據(jù)瀏覽器傳過來的文件修改時(shí)間，判斷自瀏覽器上一次請(qǐng)求之后，文件是不是沒有被修改過；根據(jù)Etag，判斷文件內(nèi)容自上一次請(qǐng)求之后，有沒有發(fā)生變化

情形一：若兩種判斷的結(jié)論都是文件沒有被修改過，則服務(wù)器就不給瀏覽器發(fā)index.html的內(nèi)容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時(shí)瀏覽器就會(huì)從本地緩存中獲取index.html的內(nèi)容。此時(shí)的情況叫協(xié)議緩存，瀏覽器和服務(wù)器之間有一次請(qǐng)求交互。

情形二：若修改時(shí)間和文件內(nèi)容判斷有任意一個(gè)沒有通過，則服務(wù)器會(huì)受理此次請(qǐng)求，之后的操作同①

① 只有g(shù)et請(qǐng)求會(huì)被緩存，post請(qǐng)求不會(huì)

2、Expires和Cache-Control

Expires要求客戶端和服務(wù)端的時(shí)鐘嚴(yán)格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。如果max-age和Expires同時(shí)出現(xiàn)，則max-age有更高的優(yōu)先級(jí)。

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

3、ETag應(yīng)用:

Etag由服務(wù)器端生成，客戶端通過If-Match或者說If-None-Match這個(gè)條件判斷請(qǐng)求來驗(yàn)證資源是否修改。常見的是使用If-None-Match。請(qǐng)求一個(gè)文件的流程可能如下：

====第一次請(qǐng)求===

1.客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件；

2.服務(wù)器處理請(qǐng)求，返回文件內(nèi)容和一堆Header，當(dāng)然包括Etag(例如"2e681a-6-5d044840")(假設(shè)服務(wù)器支持Etag生成和已經(jīng)開啟了Etag).狀態(tài)碼200
====第二次請(qǐng)求===

客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件，注意這個(gè)時(shí)候客戶端同時(shí)發(fā)送一個(gè)If-None-Match頭，這個(gè)頭的內(nèi)容就是第一次請(qǐng)求時(shí)服務(wù)器返回的Etag：2e681a-6-5d0448402.服務(wù)器判斷發(fā)送過來的Etag和計(jì)算出來的Etag匹配，因此If-None-Match為False，不返回200，返回304，客戶端繼續(xù)使用本地緩存；流程很簡單，問題是，如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢，怎么辦
答案是同時(shí)使用，也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時(shí)間和Etag之后，

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

為什么使用Etag請(qǐng)求頭?

Etag 主要為了解決 Last-Modified 無法解決的一些問題。

4、棧和隊(duì)列的區(qū)別?

（1）棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。
（2）隊(duì)列先進(jìn)先出，棧先進(jìn)后出。
（3）棧只允許在表尾一端進(jìn)行插入和刪除，而隊(duì)列只允許在表尾一端進(jìn)行插入，在表頭一端進(jìn)行刪除

5、棧和堆的區(qū)別？

（1）棧區(qū)（stack）— 由編譯器自動(dòng)分配釋放 ，存放函數(shù)的參數(shù)值，局部變量的值等。
（2）堆區(qū)（heap） — 一般由程序員分配釋放， 若程序員不釋放，程序結(jié)束時(shí)可能由OS回收。
（3）堆（數(shù)據(jù)結(jié)構(gòu)）：堆可以被看成是一棵樹，如：堆排序；
（4）棧（數(shù)據(jù)結(jié)構(gòu)）：一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)。

6、快速 排序的思想并實(shí)現(xiàn)一個(gè)快排？

"快速排序"的思想很簡單，整個(gè)排序過程只需要三步：

（1）在數(shù)據(jù)集之中，找一個(gè)基準(zhǔn)點(diǎn)
　?。?）建立兩個(gè)數(shù)組，分別存儲(chǔ)左邊和右邊的數(shù)組
　?。?）利用遞歸進(jìn)行下次比較

<script type="text/javascript">

    function quickSort(arr){
        if(arr.length<=1){
            return arr;//如果數(shù)組只有一個(gè)數(shù)，就直接返回；
        }

        var num = Math.floor(arr.length/2);//找到中間數(shù)的索引值，如果是浮點(diǎn)數(shù)，則向下取整

        var numValue = arr.splice(num,1);//找到中間數(shù)的值
        var left = [];
        var right = [];

        for(var i=0;i<arr.length;i++){
            if(arr[i]<numValue){
                left.push(arr[i]);//基準(zhǔn)點(diǎn)的左邊的數(shù)傳到左邊數(shù)組
            }
            else{
               right.push(arr[i]);//基準(zhǔn)點(diǎn)的右邊的數(shù)傳到右邊數(shù)組
            }
        }

        return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重復(fù)比較
    }

    alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”

</script>

7、你覺得jQuery或zepto源碼有哪些寫的好的地方

(答案僅供參考)

jquery源碼封裝在一個(gè)匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染，然后通過傳入window對(duì)象參數(shù)，可以使window對(duì)象作為局部變量使用，好處是當(dāng)jquery中訪問window對(duì)象的時(shí)候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對(duì)象。同樣，傳入undefined參數(shù)，可以縮短查找undefined時(shí)的作用域鏈。

(function( window, undefined ) {

     //用一個(gè)函數(shù)域包起來，就是所謂的沙箱

     //在這里邊var定義的變量，屬于這個(gè)函數(shù)域內(nèi)的局部變量，避免污染全局

     //把當(dāng)前沙箱需要的外部變量通過函數(shù)參數(shù)引入進(jìn)來

     //只要保證參數(shù)對(duì)內(nèi)提供的接口的一致性，你還可以隨意替換傳進(jìn)來的這個(gè)參數(shù)

    window.jQuery = window.$ = jQuery;

})( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。

有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到，jQuery將其保存為局部變量以提高訪問速度。

jquery實(shí)現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼，所返回的都是同一個(gè)對(duì)象，可以提高代碼效率。

8、ES6的了解

新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值。）arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替。ES6將promise對(duì)象納入規(guī)范，提供了原生的Promise對(duì)象。增加了let和const命令，用來聲明變量。增加了塊級(jí)作用域。let命令實(shí)際上就增加了塊級(jí)作用域。ES6規(guī)定，var命令和function命令聲明的全局變量，屬于全局對(duì)象的屬性；let命令、const命令、class命令聲明的全局變量，不屬于全局對(duì)象的屬性。。還有就是引入module模塊的概念

9、關(guān)于Http 2.0 你知道多少？

HTTP/2引入了“服務(wù)端推（server push）”的概念，它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶端緩存中，從而提高性能。

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

HTTP/2使用多路技術(shù)，允許多個(gè)消息在一個(gè)連接上同時(shí)交差。

它增加了頭壓縮（header compression），因此即使非常小的請(qǐng)求，其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬。

10、談?wù)劯?dòng)和清除浮動(dòng)

浮動(dòng)的框可以向左或向右移動(dòng)，直到他的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。由于浮?dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)的塊框會(huì)漂浮在文檔普通流的塊框上。

11、如何評(píng)價(jià)AngularJS和BackboneJS

backbone具有依賴性，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個(gè)AngularJS 多出了2 次HTTP請(qǐng)求.

Backbone的Model沒有與UI視圖數(shù)據(jù)綁定，而是需要在View中自行操作DOM來更新或讀取UI數(shù)據(jù)。AngularJS與此相反，Model直接與UI視圖綁定，Model與UI視圖的關(guān)系，通過directive封裝，AngularJS內(nèi)置的通用directive，就能實(shí)現(xiàn)大部分操作了，也就是說，基本不必關(guān)心Model與UI視圖的關(guān)系，直接操作Model就行了，UI視圖自動(dòng)更新。

AngularJS的directive，你輸入特定數(shù)據(jù)，他就能輸出相應(yīng)UI視圖。是一個(gè)比較完善的前端MVW框架，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，依賴注入等所有功能，模板功能強(qiáng)大豐富，并且是聲明式的，自帶了豐富的 Angular 指令。

12、說說你對(duì)閉包的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域的概念

閉包有三個(gè)特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

13、說說你對(duì)語義化的理解？

1，去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；
4，便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

14、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
4）、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

15、你知道多少種Doctype文檔類型？

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks

（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。