前端面試大全（問題+答案）2

2017前端面試集合（面試題加答案）

41.什麼叫優雅降級和漸進加強？

1. 優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效。

2. 漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

42.對Node的優勢和缺點提出了本身的見解？

優勢：

1. 由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

2. 與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。 

缺點：

1. Node是一個相對新的開源項目，因此不太穩定，它老是一直在變。

2. 缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子（第三方庫如今已經很豐富了，因此這個缺點能夠說不存在了）。 

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

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

1. 實現界面交互

2. 提高用戶體驗

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

前景：

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

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

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

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

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

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

44.你有哪些性能優化的方法？

1. 減小http請求次數：CSS Sprites, JS、CSS 源碼壓縮、圖片大小控制合適；網頁 Gzip，CDN 託管，data 緩存 ，圖片服務器

2. 前端模板 JS + 數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存 AJAX 請求結果，每次操做本地變量，不用請求，減小請求次數

3. 用 innerHTML 代替 DOM 操做，減小 DOM 操做次數，優化 javascript 性能

4. 當須要設置的樣式不少時設置 className 而不是直接操做 style

5. 少用全局變量、緩存DOM節點查找的結果。減小 IO 讀取操做

6. 避免使用 CSS Expression（css表達式)又稱 Dynamic properties(動態屬性)

7. 圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳 

45.http狀態碼有那些？分別表明是什麼意思？

1. 100-199 用於指定客戶端應相應的某些動做

2. 200-299 用於表示請求成功

3. 300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息

4. 400-499 用於指出客戶端的錯誤

    400：語義有誤，當前請求沒法被服務器理解

    401：當前請求須要用戶驗證

    403：服務器已經理解請求，可是拒絕執行它

5. 500-599 用於支持服務器錯誤

    503：服務不可用 

46.一個頁面從輸入 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 

47.平時如何管理你的項目？

1. 先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等

2. 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）

3. 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）

4. 頁面進行標註（例如 頁面 模塊 開始和結束）

5. CSS 跟 HTML 分文件夾並行存放，命名都得統一（例如 style.css）

6. JS 分文件夾存放 命名以該 JS 功能爲準的英文翻譯

7. 圖片採用整合的 p_w_picpaths.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理  

48.說說最近最流行的一些東西吧？常去的哪些網站？

最流行的一些東西：

1. Node.js

2.React 

常去的網站：

1. W3c

2. 2. Github

3. CSDN 

49.javascript對象的幾種建立方式

1. 工廠模式

2. 構造函數模式

3. 原型模式

4. 混合構造函數和原型模式

5. 動態原型模式

6. 寄生構造函數模式

7. 穩妥構造函數模式

50.javascript繼承的 6 種方法

1. 原型鏈繼承

2. 借用構造函數繼承

3. 組合繼承(原型+借用構造)

4. 原型式繼承

5. 寄生式繼承

6. 寄生組合式繼承

51.ajax 的過程是怎樣的

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新 

52.javascript異步加載和延遲加載

1. 異步加載的方案： 動態插入 script 標籤

2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行

3. script 標籤上添加 defer 或者 async 屬性

4. 建立並插入 iframe，讓它異步執行 js

5. 延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的 

53.前端的安全問題？

1. XSS

2. sql注入

3. CSRF：是跨站請求僞造，很明顯根據剛剛的解釋，他的核心也就是請求僞造，經過僞造身份提交POST和GET請求來進行跨域的*** 

完成CSRF須要兩個步驟：

1. 登錄受信任的網站A，在本地生成 COOKIE

2. 在不登出A的狀況下，或者本地 COOKIE 沒有過時的狀況下，訪問危險網站B。 

54.ie 各版本和 chrome 能夠並行下載多少個資源

1. IE6 2 個併發

2. iE7 升級以後的 6 個併發，以後版本也是 6 個

3. Firefox，chrome 也是6個 

55.javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享

用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量。

56.grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。

grunt：

UglifyJS 是基於 NodeJS 的 Javascript 語法解析/壓縮/格式化工具

官網：http://lisperator.net/uglifyjs/ 或者 https://github.com/mishoo/UglifyJS2

安裝：

$ npm install uglify-js -g

使用方法見官網 demo 

YUI compressor：

YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，採用Java開發。

使用方法：

// 壓縮JS

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js

// 壓縮CSS

java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css 

Google Closure Compiler：

官網：https://developers.google.com/closure/compiler/

使用方法：

1. 在命令行下使用一個google編譯好的java程序

2. 使用google提供的在線服務

3. 使用google提供的RESTful API

57.Flash、Ajax各自的優缺點，在使用中如何取捨？

Flash：

1. Flash適合處理多媒體、矢量圖形、訪問機器

2. 對CSS、處理文本上不足，不容易被搜索

Ajax：

1. Ajax對CSS、文本支持很好，支持搜索

2. 多媒體、矢量圖形、機器訪問不足 

共同點：

1. 與服務器的無刷新傳遞消息

2. 能夠檢測用戶離線和在線狀態

2. 操做DOM 

58.請解釋一下 javascript 的同源策略。

概念：

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

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲何要有同源限制：

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

59.爲何要有同源限制？

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

60.什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。 

設立"嚴格模式"的目的，主要有如下幾個：

1. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；

3. 提升編譯器效率，增長運行速度；

4. 爲將來新版本的Javascript作好鋪墊。

注：通過測試 IE6,7,8,9 均不支持嚴格模式。

缺點：

如今網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。 

61.GET和POST的區別，什麼時候使用POST？

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

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

GET方式須要使用 Request.QueryString 來取得變量的值

POST方式經過 Request.Form 來獲取變量的值

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

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

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

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

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

62.哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js 的阻塞特性：全部瀏覽器在下載 JS 的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到 JS 下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載 JS，可是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

因爲瀏覽器爲了防止出現 JS 修改 DOM 樹，須要從新構建 DOM 樹的狀況，因此就會阻塞其餘的下載和呈現。

嵌入 JS 會阻塞全部內容的呈現，而外部 JS 只會阻塞其後內容的顯示，2 種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。 

CSS 怎麼會阻塞加載了？CSS 原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，IE6 下 CSS 都是阻塞加載）

當 CSS 後面跟着嵌入的 JS 的時候，該 CSS 就會出現阻塞後面資源下載的狀況。而當把嵌入 JS 放到 CSS 前面，就不會出現阻塞的狀況了。

根本緣由：由於瀏覽器會維持 html 中 css 和 js 的順序，樣式表必須在嵌入的 JS 執行前先加載、解析完。而嵌入的 JS 會阻塞後面的資源加載，因此就會出現上面 CSS 阻塞下載的狀況。 

嵌入JS應該放在什麼位置？

1. 放在底部，雖然放在底部照樣會阻塞全部呈現，但不會阻塞資源下載。

2. 若是嵌入JS放在head中，請把嵌入JS放在CSS頭部。

3. 使用 defer（只支持IE）

4. 不要在嵌入的JS中調用運行時間較長的函數，若是必定要用，能夠用 setTimeout 來調用 

Javascript無阻塞加載具體方式：

1. 將腳本放在底部。<link>仍是放在head中，用以保證在js加載前，能加載出正常顯示的頁面。<script>標籤放在</body>前。

2. 阻塞腳本：因爲每一個<script>標籤下載時阻塞頁面解析過程，因此限制頁面的<script>總數也能夠改善性能。適用於內聯腳本和外部腳本。

3. 非阻塞腳本：等頁面完成加載後，再加載js代碼。也就是，在 window.onload 事件發出後開始下載代碼。

4. defer屬性：支持IE4和fierfox3.5更高版本瀏覽器

5. 動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立HTML的幾乎所有文檔內容。代碼以下：

<script>

    var script=document.createElement("script");

    script.type="text/javascript";

    script.src="file.js";

    document.getElementsByTagName("head")[0].appendChild(script);

</script>

此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程，即便在head裏（除了用於下載文件的 http 連接）。

63.eval是作什麼的？

1. 它的功能是把對應的字符串解析成JS代碼並運行

2. 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行） 

64.寫一個通用的事件偵聽器函數

// event(事件)工具集，來源：github.com/markyun

markyun.Event = {

    // 頁面加載完成後

    readyEvent : function(fn) {

        if (fn==null) {

            fn=document;

        }

        var oldonload = window.onload;

        if (typeof window.onload != 'function') {

            window.onload = fn;

        } else {

            window.onload = function() {

                oldonload();

                fn();

            };

        }

    },

    // 視能力分別使用dom0||dom2||IE方式 來綁定事件

    // 參數： 操做的元素,事件名稱 ,事件處理程序

    addEvent : function(element, type, handler) {

        if (element.addEventListener) {

            //事件類型、須要執行的函數、是否捕捉

            element.addEventListener(type, handler, false);

        } else if (element.attachEvent) {

            element.attachEvent('on' + type, function() {

                handler.call(element);

            });

        } else {

            element['on' + type] = handler;

        }

    },

    // 移除事件

    removeEvent : function(element, type, handler) {

        if (element.removeEnentListener) {

            element.removeEnentListener(type, handler, false);

        } else if (element.detachEvent) {

            element.detachEvent('on' + type, handler);

        } else {

            element['on' + type] = null;

        }

    },

    // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)

    stopPropagation : function(ev) {

        if (ev.stopPropagation) {

            ev.stopPropagation();

        } else {

            ev.cancelBubble = true;

        }

    },

    // 取消事件的默認行爲

    preventDefault : function(event) {

        if (event.preventDefault) {

            event.preventDefault();

        } else {

            event.returnValue = false;

        }

    },

    // 獲取事件目標

    getTarget : function(event) {

        return event.target || event.srcElement;

    },

    // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；

    getEvent : function(e) {

        var ev = e || window.event;

        if (!ev) {

            var c = this.getEvent.caller;

            while (c) {

                ev = c.arguments[0];

                if (ev && Event == ev.constructor) {

                    break;

                }

                c = c.caller;

            }

        }

        return ev;

    }

};  

65.Node.js 的適用場景

1. 高併發

2. 聊天

3. 實時消息推送    

66.javascript原型，原型鏈 ? 有什麼特色？

1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲 null 的話，咱們就稱之爲原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈

67.怎麼重構頁面？

1. 編寫 CSS

2. 讓頁面結構更合理化，提高用戶體驗

3. 實現良好的頁面效果和提高性能 

68.WEB應用從服務器主動推送Data到客戶端有那些方式？

1. html5 websocket

2. WebSocket 經過 Flash

3. XHR長時間鏈接

4. XHR Multipart Streaming

5. 不可見的Iframe

6. <script>標籤的長時間鏈接(可跨域) 

69.事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲

2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件

3. ev.stopPropagation();

注意舊ie的方法：ev.cancelBubble = true; 

70.Ajax 是什麼？Ajax 的交互模型？同步和異步的區別？如何解決跨域問題？

Ajax 是什麼：

1. 經過異步模式，提高了用戶體驗

2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3. Ajax 在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。 

Ajax 的最大的特色：

1. Ajax能夠實現動態不刷新（局部刷新）

2. readyState 屬性 狀態 有5個可取值： 0 = 未初始化，1 = 啓動， 2 = 發送，3 = 接收，4 = 完成 

Ajax 同步和異步的區別:

1. 同步：提交請求 -> 等待服務器處理 -> 處理完畢返回，這個期間客戶端瀏覽器不能幹任何事

2. 異步：請求經過事件觸發 -> 服務器處理（這是瀏覽器仍然能夠做其餘事情）-> 處理完畢

ajax.open方法中，第3個參數是設同步或者異步。

Ajax 的缺點：

1. Ajax 不支持瀏覽器 back 按鈕

2. 安全問題 Ajax 暴露了與服務器交互的細節

3. 對搜索引擎的支持比較弱

4. 破壞了程序的異常機制

5. 不容易調試 

解決跨域問題：

1. jsonp

2. iframe

3. window.name、window.postMessage

4. 服務器上設置代理頁面 

71.js對象的深度克隆代碼實現

function clone(Obj) {

    var buf;   

    if (Obj instanceof Array) {

        buf = [];  // 建立一個空的數組

        var i = Obj.length;

        while (i--) {

            buf[i] = clone(Obj[i]);

        }

        return buf;

    } else if (Obj instanceof Object){

        buf = {};  // 建立一個空對象

        for (var k in Obj) {  // 爲這個對象添加新的屬性

            buf[k] = clone(Obj[k]);

        }

        return buf;

    }else{

        return Obj;

    }

} 

72.對網站重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變 UI 的狀況下，對網站進行優化，在擴展的同時保持一致的 UI。 

對於傳統的網站來講重構一般是：

1. 表格(table)佈局改成 DIV + CSS

2. 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對 IE6 有效的)

3. 對於移動平臺的優化

4. 針對於 SEO 進行優化

5. 深層次的網站重構應該考慮的方面

6. 減小代碼間的耦合

7. 讓代碼保持彈性

8. 嚴格按規範編寫代碼

9. 設計可擴展的API

10. 代替舊有的框架、語言(如VB)

11. 加強用戶體驗

12. 一般來講對於速度的優化也包含在重構中

13. 壓縮JS、CSS、p_w_picpath等前端資源(一般是由服務器來解決)

14. 程序的性能優化(如數據讀寫)

15. 採用CDN來加速資源加載

16. 對於JS DOM的優化

17. HTTP服務器的文件緩存

73.如何獲取UA

<script>

function whatBrowser() {  

    document.Browser.Name.value=navigator.appName;  

    document.Browser.Version.value=navigator.appVersion;  

    document.Browser.Code.value=navigator.appCodeName;  

    document.Browser.Agent.value=navigator.userAgent;  

}

</script>

74.javascript數組去重

方法一：遍歷數組，創建新數組，利用indexOf判斷是否存在於新數組中，不存在則push到新數組，最後返回新數組

 1 function removeDuplicatedItem(ar) {

 2     var ret = [];

 4     for (var i = 0, j = ar.length; i < j; i++) {

 5         if (ret.indexOf(ar[i]) === -1) {

 6             ret.push(ar[i]);

 7         }

 8     }

10     return ret;

11 }

方法二：遍歷數組，利用object對象保存數組值，判斷數組值是否已經保存在object中，未保存則push到新數組並用object[arrayItem]=1的方式記錄保存

function removeDuplicatedItem2(ar) {

    var tmp = {},

        ret = [];

    for (var i = 0, j = ar.length; i < j; i++) {

        if (!tmp[ar[i]]) {

            tmp[ar[i]] = 1;

            ret.push(ar[i]);

        }

    }

    return ret;

}

方法三：數組下標判斷法, 遍歷數組，利用indexOf判斷元素的值是否與當前索引相等，如相等則加入

function removeDuplicatedItem3(ar) {

    var ret = [];

    ar.forEach(function(e, i, ar) {

        if (ar.indexOf(e) === i) {

            ret.push(e);

        }

    });

    return ret;

}

方法四：數組先排序， 而後比較倆數組一頭一尾進行去重

function removeDuplicatedItem4(ar) {

    var ret = [],

        end;

    ar.sort();

    end = ar[0];

    ret.push(ar[0]);

    for (var i = 1; i < ar.length; i++) {

        if (ar[i] != end) {

            ret.push(ar[i]);

            end = ar[i];

        }

    }

    return ret;

} 

75.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 服務器端暫時沒法處理請求（多是過載或維護） 

76.cache-control

網頁的緩存是由HTTP消息頭中的「Cache-control」來控制的，常見的取值有private、no-cache、max-age、must-revalidate等，默認爲private。 

Expires 頭部字段提供一個日期和時間，響應在該日期和時間後被認爲失效。容許客戶端在這個時間以前不去檢查（發請求），等同max-age的效果。可是若是同時存在，則被Cache-Control的max-age覆蓋。

Expires = "Expires" ":" HTTP-date

例如：

Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）

若是把它設置爲-1，則表示當即過時

Expires 和 max-age 均可以用來指定文檔的過時時間，可是兩者有一些細微差異

1. Expires在HTTP/1.0中已經定義，Cache-Control:max-age在HTTP/1.1中才有定義，爲了向下兼容，僅使用max-age不夠

2. Expires指定一個絕對的過時時間(GMT格式),這麼作會致使至少2個問題：

    2.1客戶端和服務器時間不一樣步致使Expires的配置出現問題。 

    2.2很容易在配置後忘記具體的過時時間，致使過時來臨出現浪涌現象

3. max-age 指定的是從文檔被訪問後的存活時間，這個時間是個相對值(好比:3600s)，相對的是文檔第一次被請求時服務器記錄的Request_time(請求時間)

4. Expires 指定的時間能夠是相對文件的最後訪問時間(Atime)或者修改時間(MTime)，而max-age相對對的是文檔的請求時間(Atime)

5. 若是值爲 no-cache,那麼每次都會訪問服務器。若是值爲max-age，則在過時以前不會重複訪問服務器。 

77.javascript 操做獲取和設置 cookie

// 建立cookie

function setCookie(name, value, expires, path, domain, secure) {

    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

    if (expires instanceof Date) {

        cookieText += '; expires=' + expires;

    }

    if (path) {

        cookieText += '; expires=' + expires;

    }

    if (domain) {

        cookieText += '; domain=' + domain;

    }

    if (secure) {

        cookieText += '; secure';

    }

    document.cookie = cookieText;

}

// 獲取cookie

function getCookie(name) {

    var cookieName = encodeURIComponent(name) + '=';

    var cookieStart = document.cookie.indexOf(cookieName);

    var cookieValue = null;

    if (cookieStart > -1) {

        var cookieEnd = document.cookie.indexOf(';', cookieStart);

        if (cookieEnd == -1) {

            cookieEnd = document.cookie.length;

        }

        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

    }

    return cookieValue;

}

// 刪除cookie

function unsetCookie(name) {

    document.cookie = name + "= ; expires=" + new Date(0);

}

  

Ps：整理三天 但願能夠對本身年後面試有所幫助