本文旨在加深對前端知識點的理解，資料來源於網路。

一些開放性題目

1.自我介紹：除了基本個人資訊以外，面試官更想聽的是你與眾不同的地方和你的優勢。

2.專案介紹

3.如何看待前端開發？

4.平時是如何學習前端開發的？

5.未來三到五年的規劃是怎樣的？

position的值， relative和absolute分別是相對於誰進行定位的？

• absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

• fixed （老IE不支援）生成絕對定位的元素，通常相對於瀏覽器視窗或 frame 進行定位。

• relative

   生成相對定位的元素，相對於其在普通流中的位置進行定位。

• static 預設值。沒有定位，元素出現在正常的流中

• sticky 生成粘性定位的元素，容器的位置根據正常文件流計算得出

如何解決跨域問題

JSONP：

原理是：動態插入 script 標籤，通過 script 標籤引入一個 js 檔案，這個js檔案載入成功後會執行我們在url引數中指定的函式，並且會把我們需要的 json 資料作為引數傳入。

由於同源策略的限制， XmlHttpRequest 只允許請求當前源（域名、協議、埠）的資源，為了實現跨域請求，可以通過 script 標籤實現跨域請求，然後在服務端輸出JSON資料並執行回撥函式，從而解決了跨域的資料請求。

優點是相容性好，簡單易用，支援瀏覽器與伺服器雙向通訊。缺點是隻支援GET請求。

JSONP ： json+padding （內填充），顧名思義，就是把JSON填充到一個盒子裡

<script>
 function createJs(sUrl){

    var oScript = document.createElement('script');

    oScript.type = 'text/javascript'; oScript.src = sUrl;

   document.getElementsByTagName('head')[0].appendChild(oScript);

}
  createJs('jsonp.js');

 box({ 'name': 'test' });
 
  function box(json){

alert(json.name);

}

</script>
 

CORS:

     伺服器端對於 CORS 的支援，主要就是通過設定 Access-Control-Allow-Origin 來進行的。如果瀏覽器檢測到相應的設定，就可以允許 Ajax 進行跨域的訪問。

通過修改document.domain來跨子域:

     將子域和主域的 document.domain 設為同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用 document.domain 進行跨域

主域相同的使用 document.domain

使用window.name來進行跨域

   window 物件有個 name 屬性，該屬性有個特徵：即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個 window.name 的，每個頁面對 window.name 都有讀寫的許可權， window.name 是持久存在一個視窗載入過的所有頁面中的

使用HTML5中新引進的 window.postMessage 方法來跨域傳送資料

還有flash、在伺服器上設定代理頁面等跨域方式。個人認為 window.name 的方法既不復雜，也能相容到幾乎所有瀏覽器，這真是極好的一種跨域方法。

XML 和 JSON 的區別？

(1).資料體積方面。 JSON相對於XML來講，資料的體積小，傳遞的速度更快些。 (2).資料互動方面。 JSON與JavaScript的互動更加方便，更容易解析處理，更好的資料互動。 (3).資料描述方面。 JSON對資料的描述性比XML較差。 (4).傳輸速度方面。 JSON的速度要遠遠快於XML。

談談你對webpack的看法

WebPack 是一個模組打包工具，你可以使用 WebPack 管理你的模組依賴，並編繹輸出模組們所需的靜態檔案。它能夠很好地管理、打包Web開發中所用到的 HTML、[JavaScript](http://lib.csdn.net/base/javascript "JavaScript知識庫")、CSS 以及各種靜態檔案（圖片、字型等），讓開發過程更加高效。對於不同型別的資源， webpack 有對應的模組載入器。 webpack 模組打包器會分析模組間的依賴關係，最後 生成了優化且合併後的靜態資源。

webpack 的兩大特色：

1.code splitting（可以自動完成）

2.loader 可以處理各種型別的靜態檔案，並且支援串聯操作

 webpack 是以 commonJS 的形式來書寫指令碼滴，但對 AMD/CMD 的支援也很全面，方便舊專案進行程式碼遷移。

 webpack 具有 requireJs 和 browserify 的功能，但仍有很多自己的新特性：

1\. 對 CommonJS 、 AMD 、ES6的語法做了相容

2\. 對js、css、圖片等資原始檔都支援打包

3\. 串聯式模組載入器以及外掛機制，讓其具有更好的靈活性和擴充套件性，例如提供對CoffeeScript、ES6的支援

4\. 有獨立的配置檔案webpack.config.js

5\. 可以將程式碼切割成不同的chunk，實現按需載入，降低了初始化時間

6\. 支援 SourceUrls 和 SourceMaps，易於除錯

7\. 具有強大的Plugin介面，大多是內部外掛，使用起來比較靈活

8.webpack 使用非同步 IO 並具有多級快取。這使得 webpack 很快且在增量編譯上更加快

說說TCP傳輸的三次握手四次揮手策略

     為了準確無誤地把資料送達目標處， TCP 協議採用了三次握手策略。用TCP協議把資料包送出去後， TCP 不會對傳送 後的情況置之不理，它一定會向對方確認是否成功送達。握手過程中使用了TCP的標誌： SYN 和 ACK 。

傳送端首先發送一個帶 SYN 標誌的資料包給對方。接收端收到後，回傳一個帶有 SYN/ACK 標誌的資料包以示傳達確認資訊。 最後，傳送端再回傳一個帶 ACK 標誌的資料包，代表“握手”結束。 若在握手過程中某個階段莫名中斷， TCP 協議會再次以相同的順序傳送相同的資料包。

斷開一個TCP連線則需要“四次握手”：

• 第一次揮手：主動關閉方傳送一個 FIN ，用來關閉主動方到被動關閉方的資料傳送，也就是主動關閉方告訴被動關閉方：我已經不 會再給你發資料了(當然，在fin包之前傳送出去的資料，如果沒有收到對應的ack確認報文，主動關閉方依然會重發這些資料)，但是，此時主動關閉方還可 以接受資料。

• 第二次揮手：被動關閉方收到 FIN 包後，傳送一個 ACK 給對方，確認序號為收到序號 +1 （與 SYN 相同，一個 FIN 佔用一個序號）。

• 第三次揮手：被動關閉方傳送一個 FIN ，用來關閉被動關閉方到主動關閉方的資料傳送，也就是告訴主動關閉方，我的資料也傳送完了，不會再給你發資料了。

• 第四次揮手：主動關閉方收到 FIN 後，傳送一個 ACK 給被動關閉方，確認序號為收到序號+1，至此，完成四次揮手。

TCP和UDP的區別

   TCP （Transmission Control Protocol，傳輸控制協議）是基於連線的協議，也就是說，在正式收發資料前，必須和對方建立可靠的連線。一個 TCP 連線必須要經過三次“對話”才能建立起來

   UDP （User Data Protocol，使用者資料報協議）是與TCP相對應的協議。它是面向非連線的協議，它不與對方建立連線，而是直接就把資料包傳送過去！ UDP適用於一次只傳送少量資料、對可靠性要求不高的應用環境。

說說你對作用域鏈的理解

    作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到 window 物件即被終止，作用域鏈向下訪問變數是不被允許的。

建立ajax過程

(1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊.

(3)設定響應HTTP請求狀態變化的函式.

(4)傳送HTTP請求.

(5)獲取非同步呼叫返回的資料.

(6)使用JavaScript和DOM實現區域性重新整理.</pre>

漸進增強和優雅降級

漸進增強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 ：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。

常見web安全及防護原理

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字串，最終達到欺騙伺服器執行惡意的SQL命令。

總的來說有以下幾點：

    1.永遠不要信任使用者的輸入，要對使用者的輸入進行校驗，可以通過正則表示式，或限制長度，對單引號和雙"-"進行轉換等。

    2.永遠不要使用動態拼裝SQL，可以使用引數化的SQL或者直接使用儲存過程進行資料查詢存取。

    3.永遠不要使用管理員許可權的資料庫連線，為每個應用使用單獨的許可權有限的資料庫連線。

    4.不要把機密資訊明文存放，請加密或者hash掉密碼和敏感的資訊。

XSS原理及防範

    Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裡插入惡意 html 標籤或者javascript 程式碼。比如：攻擊者在論壇中放一個

看似安全的連結，騙取使用者點選後，竊取 cookie 中的使用者私密資訊；或者攻擊者在論壇中加一個惡意表單，

當用戶提交表單的時候，卻把資訊傳送到攻擊者的伺服器中，而不是使用者原本以為的信任站點。

XSS防範方法

    首先程式碼裡對使用者輸入的地方和變數都需要仔細檢查長度和對 ”<”,”>”,”;”,”’”等字元做過濾；其次任何內容寫到頁面之前都必須加以 encode ，避免不小心把 html tag 弄出來。這一個層面做好，至少可以堵住超過一半的 XSS 攻擊。

首先，避免直接在 cookie 中洩露使用者隱私，例如email、密碼等等。

其次，通過使 cookie 和系統 ip 繫結來降低 cookie 洩露後的危險。這樣攻擊者得到的 cookie 沒有實際價值，不可能拿來重放。

如果網站不需要再瀏覽器端對 cookie 進行操作，可以在 Set-Cookie 末尾加上HttpOnly來防止 javascript 程式碼直接獲取 cookie 。

儘量採用 POST 而非 GET 提交表單

XSS與CSRF有什麼區別嗎？

   XSS 是獲取資訊，不需要提前知道其他使用者頁面的程式碼和資料包。 CSRF 是代替使用者完成指定的動作，需要知道其他使用者頁面的程式碼和資料包。

要完成一次 CSRF 攻擊，受害者必須依次完成兩個步驟：

登入受信任網站A，並在本地生成Cookie。

在不登出A的情況下，訪問危險網站B。

CSRF的防禦

• 服務端的 CSRF 方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機數。

• 通過驗證碼的方法

Web Worker 和webSocket

worker主執行緒:

1.通過 worker = new Worker( url ) 載入一個JS檔案來建立一個worker，同時返回一個worker例項。

2.通過worker.postMessage( data ) 方法來向worker傳送資料。

3.繫結worker.onmessage方法來接收worker傳送過來的資料。

4.可以使用 worker.terminate() 來終止一個worker的執行。</pre>

WebSocket 是 Web 應用程式的傳輸協議，它提供了雙向的，按序到達的資料流。他是一個 [Html5](http://lib.csdn.net/base/html5 "HTML5知識庫") 協議， WebSocket 的連線是持久的，他通過在客戶端和伺服器之間保持雙工連線，伺服器的更新可以被及時推送給客戶端，而不需要客戶端以一定時間間隔去輪詢。

HTTP和HTTPS

   HTTP 協議通常承載於TCP協議之上，在 HTTP 和 TCP 之間新增一個安全協議層（ SSL 或 TSL ），這個時候，就成了我們常說的HTTPS。

預設HTTP的埠號為80， HTTPS 的埠號為443。

為什麼 HTTPS 安全

    因為網路請求需要中間有很多的伺服器路由器的轉發。中間的節點都可能篡改資訊，而如果使用 HTTPS ，金鑰在你和終點站才有。 https 之所以比 http 安全，是因為他利用 ssl/tls 協議傳輸。它包含證書，解除安裝，流量轉發，負載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

對前端模組化的認識

AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出。

CMD 是 SeaJS 在推廣過程中對模組定義的規範化產出。

AMD 是提前執行， CMD 是延遲執行。

AMD 推薦的風格通過返回一個物件做為模組物件， CommonJS 的風格通過對 module.exports 或 exports 的屬性賦值來達到暴露模組物件的目的。

CMD模組方式

define(function(require, exports, module) {

      // 模組程式碼

    });

Javascript垃圾回收方法

標記清除（mark and sweep）

     這是JavaScript最常見的垃圾回收方式，當變數進入執行環境的時候，比如函式中宣告一個變數，垃圾回收器將其標記為“進入環境”，當變數離開環境的時候（函式執行結束）將其標記為“離開環境”。

垃圾回收器會在執行的時候給儲存在記憶體中的所有變數加上標記，然後去掉環境中的變數以及被環境中變數所引用的變數（閉包），在這些完成之後仍存在標記的就是要刪除的變量了

引用計數(reference counting)

      在低版本IE中經常會出現記憶體洩露，很多時候就是因為其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數，當聲明瞭一個 變數並將一個引用型別賦值給該變數的時候這個值的引用次數就加1，如果該變數的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變數在使用，這個值沒法被訪問了，因此可以將其佔用的空間回收，這樣垃圾回收器會在執行的時候清理掉引用次數為0的值佔用的空間。

在IE中雖然 JavaScript 物件通過標記清除的方式進行垃圾回收，但BOM與DOM物件卻是通過引用計數回收垃圾的， 也就是說只要涉及 BOM 及DOM就會出現迴圈引用問題。

你覺得前端工程的價值體現在哪

為簡化使用者使用提供技術支援（互動部分）

為多個瀏覽器相容性提供支援

為提高使用者瀏覽速度（瀏覽器效能）提供支援

為跨平臺或者其他基於webkit或其他渲染引擎的應用提供支援

為展示資料提供支援（資料介面）

談談效能優化問題

程式碼層面：避免使用css表示式，避免使用高階選擇器，通配選擇器。

快取利用：快取Ajax，使用CDN，使用外部js和css檔案以便快取，新增Expires頭，服務端配置Etag，減少DNS查詢等

請求數量：合併樣式和指令碼，使用css圖片精靈，初始首屏之外的圖片資源按需載入，靜態資源延遲載入。

請求頻寬：壓縮檔案，開啟GZIP，

程式碼層面的優化

• 用 hash-table 來優化查詢

• 少用全域性變數

• 用 innerHTML 代替 DOM 操作，減少 DOM 操作次數，優化 javascript 效能

• 用 setTimeout 來避免頁面失去響應

• 快取DOM節點查詢的結果

• 避免使用CSS Expression

• 避免全域性查詢

• 避免使用with(with會建立自己的作用域，會增加作用域鏈長度)

• 多個變數宣告合併

• 避免圖片和iFrame等的空Src。空Src會重新載入當前頁面，影響速度和效率

• 儘量避免寫在HTML標籤中寫Style屬性

移動端效能優化

• 儘量使用css3動畫，開啟硬體加速。
• 適當使用 touch 事件代替 click 事件。
• 避免使用 css3 漸變陰影效果。
• 可以用 transform: translateZ(0) 來開啟硬體加速。
• 不濫用Float。Float在渲染時計算量比較大，儘量減少使用
• 不濫用Web字型。Web字型需要下載，解析，重繪當前頁面，儘量減少使用。
• 合理使用requestAnimationFrame動畫代替setTimeout
• CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引發手機過耗電增加
• PC端的在移動端同樣適用

什麼是Etag？

當傳送一個伺服器請求時，瀏覽器首先會進行快取過期判斷。瀏覽器根據快取過期時間判斷快取檔案是否過期。

情景一：若沒有過期，則不向伺服器傳送請求，直接使用快取中的結果，此時我們在瀏覽器控制檯中可以看到 200 OK (from cache) ，此時的情況就是完全使用快取，瀏覽器和伺服器沒有任何互動的。

情景二：若已過期，則向伺服器傳送請求，此時請求中會帶上①中設定的檔案修改時間，和 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</pre>

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>

你覺得jQuery或zepto原始碼有哪些寫的好的地方

(答案僅供參考)

    [jQuery](http://lib.csdn.net/base/jquery "jQuery知識庫") 原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery 中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問 window 物件。同樣，傳入 undefined 引數，可以縮短查詢undefined時的作用域鏈。

(function( window, undefined ) {
         //用一個函式域包起來，就是所謂的沙箱

         //在這裡邊var定義的變數，屬於這個函式域內的區域性變數，避免汙染全域性

         //把當前沙箱需要的外部變數通過函式引數引入進來

         //只要保證引數對內提供的介面的一致性，你還可以隨意替換傳進來的這個引數

        window.jQuery = window.$ = jQuery;

    })( window );

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

有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度。

jquery 實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率。

ES6的瞭解

    新增模板字串（為JavaScript提供了簡單的字串插值功能）、箭頭函式（操作符左邊為輸入的引數，而右邊則是進行的操作以及返回的值 Inputs=>outputs 。）、for-of （用來遍歷資料—例如陣列中的值。） arguments 物件可被不定引數和預設引數完美代替。 ES6 將 promise 物件納入規範，提供了原生的 Promise 物件。增加了 let 和 const 命令，用來宣告變數。增加了塊級作用域。let命令實際上就增加了塊級作用域。ES6規定， var 命令和 function 命令宣告的全域性變數，屬於全域性物件的屬性； let 命令、 const 命令、 class 命令宣告的全域性變數，不屬於全域性物件的屬性。。還有就是引入 module 模組的概念

js繼承方式及其優缺點

原型鏈繼承的缺點

    一是字面量重寫原型會中斷關係，使用引用型別的原型，並且子型別還無法給超型別傳遞引數。

借用建構函式（類式繼承）

借用建構函式雖然解決了剛才兩種問題，但沒有原型，則複用無從談起。所以我們需要原型鏈+借用建構函式的模式，這種模式稱為組合繼承

組合式繼承是比較常用的一種繼承方法，其背後的思路是 使用原型鏈實現對原型屬性和方法的繼承，而通過借用建構函式來實現對例項屬性的繼承。這樣，既通過在原型上定義方法實現了函式複用，又保證每個例項都有它自己的屬性。

關於Http 2.0 你知道多少？

   HTTP/2 引入了“服務端推（server push）”的概念，它允許服務端在客戶端需要資料之前就主動地將資料傳送到客戶端快取中，從而提高效能。

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

  HTTP/2 使用多路技術，允許多個訊息在一個連線上同時交差。

它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應的 header 都只會佔用很小比例的頻寬。

defer和async

   defer並行載入js檔案，會按照頁面上script標籤的順序執行 async並行載入js檔案，下載完成立即執行，不會按照頁面上script標籤的順序執行

談談浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上。

如何評價AngularJS和BackboneJS

backbone 具有依賴性，依賴 underscore.js 。 Backbone + Underscore + jQuery(or Zepto) 就比一個 [AngularJS](http://lib.csdn.net/base/angularjs "AngularJS知識庫") 多出了2 次HTTP請求.

Backbone 的 Model 沒有與UI檢視資料繫結，而是需要在View中自行操作DOM來更新或讀取UI資料。 AngularJS 與此相反，Model直接與UI檢視繫結， Model 與UI檢視的關係，通過 directive 封裝， AngularJS 內建的通用 directive ，就能實現大部分操作了，也就是說，基本不必關心 Model 與UI檢視的關係，直接操作Model就行了，UI檢視自動更新。

AngularJS 的 directive ，你輸入特定資料，他就能輸出相應UI檢視。是一個比較完善的前端MVW框架，包含模板，資料雙向繫結，路由，模組化，服務，依賴注入等所有功能，模板功能強大豐富，並且是宣告式的，自帶了豐富的 Angular 指令。

用過哪些設計模式？

工廠模式：

主要好處就是可以消除物件間的耦合，通過使用工程方法而不是new關鍵字。將所有例項化的程式碼集中在一個位置防止程式碼重複。

    工廠模式解決了重複例項化的問題 ，但還有一個問題,那就是識別問題，因為根本無法 搞清楚他們到底是哪個物件的例項。

function createObject(name,age,profession){//集中例項化的函式var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個例項var test2 = createObject('mike',25,'engineer');//第二個例項

建構函式模式

使用建構函式的方法 ，即解決了重複例項化的問題 ，又解決了物件識別的問題，該模式與工廠模式的不同之處在於：

1.建構函式方法沒有顯示的建立物件 (new Object());

2.直接將屬性和方法賦值給 this 物件;

3.沒有 renturn 語句。

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。在js中，函式即閉包，只有函式才會產生作用域的概念

閉包有三個特性：

1.函式巢狀函式

2.函式內部可以引用外部的引數和變數

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

請你談談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.有些狀態不可能儲存在客戶端。例如，為了防止重複提交表單，我們需要在伺服器端儲存一個計數器。如果我們把這個計數器儲存在客戶端，那麼它起不到任何作用。

瀏覽器本地儲存

在較高版本的瀏覽器中， 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總是辦好事，例如IE7、IE6中的 userData 其實就是 javascript 本地儲存的解決方案。通過簡單的程式碼封裝可以統一到所有的瀏覽器都支援 web storage 。

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

cookie 和session 的區別：

 1、cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上。

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

    考慮到安全應當使用session。

 3、session會在一定時間內儲存在伺服器上。當訪問增多，會比較佔用你伺服器的效能

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

 4、單個cookie儲存的資料不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie。

 5、所以個人建議：

    將登陸資訊等重要資訊存放為SESSION

    其他資訊如果需要保留，可以放在COOKIE中

display:none 和 visibility:hidden 的區別？

display:none  隱藏對應的元素，在文件佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。

visibility:hidden  隱藏對應的元素，但是在文件佈局中仍保留原來的空間。

CSS中 link 和 @import 的區別是？

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

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

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

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

position:absolute 和 float 屬性的異同

• 共同點：對內聯元素設定 float 和 absolute 屬性，可以讓元素脫離文件流，並且可以設定其寬高。

• 不同點： float 仍會佔據位置， absolute 會覆蓋文件流中的其他元素。

介紹一下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規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的佈局。

CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.萬用字元選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.偽類選擇器（a: hover, li:nth-child）</pre>

優先順序為:

!important > id > class > tag

important 比 內聯優先順序高,但內聯比 id 要高

CSS3新增偽類舉例：

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

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

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

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

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

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

:checked        單選框或複選框被選中。</pre>

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器  多背景 rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢，多欄佈局

border-image

CSS3中新增了一種盒模型計算方式： box-sizing 。盒模型預設的值是 content-box , 新增的值是 padding-box 和 border-box ，幾種盒模型計算元素寬高的區別如下：

content-box（預設）

佈局所佔寬度Width：

Width = width + padding-left + padding-right + border-left + border-right</pre>

佈局所佔高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom</pre>

padding-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

對BFC規範的理解？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。

（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。

說說你對語義化的理解？

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

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

3，方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；

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

Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

1）、 <!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文件。

2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。

3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

4）、 DOCTYPE 不存在或格式不正確會導致文件以混雜模式呈現。

你知道多少種 Doctype 文件型別？

 該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。

 HTML 4.01 規定了三種文件型別：Strict、Transitional 以及 Frameset。

 XHTML 1.0 規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks

 （包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。

HTML與XHTML——二者有什麼區別

區別：

1.所有的標記都必須要有一個相應的結束標記

2.所有標籤的元素和屬性的名字都必須使用小寫

3.所有的XML標記都必須合理巢狀

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個值

7.不要在註釋內容中使“--”

8.圖片必須有說明文字

常見相容性問題？

1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段指令碼處理.

2、瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
3、IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。

4、浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。）

box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入
display:inline;將其轉化為行內屬性。(這個符號只有ie6會識別)

5、漸進識別的方式，從總體中逐漸排除區域性。

首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。

接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

  .bb{

   background-color:#f1ee18;/*所有識別*/

  .background-color:#00deff\9; /*IE6、7、8識別*/

  +background-color:#a200ff;/*IE6、7識別*/

  _background-color:#1e0bd1;/*IE6識別*/

  }

怪異模式問題：漏寫DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發
怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD宣告的好習慣。現在
可以使用html5推薦的寫法：<doctype html>

上下margin重合問題

ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。

解決方法，養成良好的程式碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。

這種方法是在所有浮動標籤後面新增一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。

2.使用overflow。

給包含浮動元素的父標籤新增css屬性 overflow:auto; zoom:1; zoom:1用於相容IE6。

3.使用after偽物件清除浮動。

該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干畫素；

#### 浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

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

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

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

解決方法：

使用 CSS 中的 clear:both ;屬性來清除元素的浮動可解決2、3問題，對於問題1，新增如下樣式，給父元素新增 clearfix 樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */</pre>

清除浮動的幾種方法：

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

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；

支援HTML5新標籤：

IE8/IE7/IE6支援通過document.createElement方法產生的標籤，

可以利用這一特性讓這些瀏覽器支援HTML5新標籤，

當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  <!--[if lt IE 9]>

 <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

 <![endif]-->

如何區分： DOCTYPE宣告\新增的結構元素\功能元素

如何實現瀏覽器內多個標籤頁之間的通訊?

呼叫localstorge、cookies等本地儲存方式

什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文件樣式閃爍

<style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS檔案的@import就是造成這個問題的罪魁禍首。IE會先載入整個HTML文件的DOM，然後再去匯入外部的CSS檔案，因此，在頁面DOM載入完成到CSS匯入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。

解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。</pre>

null和undefined的區別？

null 是一個表示"無"的物件，轉為數值時為0； undefined 是一個表示"無"的原始值，轉為數值時為 NaN 。

當宣告的變數還未被初始化時，變數的預設值為 undefined 。

null 用來表示尚未存在的物件，常用來表示函式企圖返回一個不存在的物件。

undefined 表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：

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

（2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。

（3）物件沒有賦值的屬性，該屬性的值為undefined。

（4）函式沒有返回值時，預設返回undefined。

null 表示"沒有物件"，即該處不應該有值。典型用法是：

（1） 作為函式的引數，表示該函式的引數不是物件。

（2） 作為物件原型鏈的終點。

new操作符具體幹了什麼呢?

   1、建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。

   2、屬性和方法被加入到 this 引用的物件中。

   3、新建立的物件由 this 所引用，並且最後隱式的返回 this 。

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

js延遲載入的方式有哪些？

defer和async、動態建立DOM方式（建立script，插入到DOM中，載入完畢後callBack）、按需非同步載入js

call() 和 apply() 的區別和作用？

作用：動態改變某個類的某個方法的執行環境（執行上下文）。

哪些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。

垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0（沒有其他物件引用過該物件），或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。

setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。

閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）

列舉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以下不支援圓角

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

Javascript資料推送

• Commet ：基於HTTP長連線的伺服器推送技術

• 基於 WebSocket 的推送方案

• SSE （Server-Send Event）：伺服器推送資料新方式

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

前端是最貼近使用者的程式設計師，比後端、資料庫、產品經理、運營、安全都近。

1、實現介面互動

2、提升使用者體驗

3、有了Node.js，前端可以實現服務端的一些事情

前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

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

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

做好的頁面結構，頁面重構和使用者體驗；

處理hack，相容、寫出優美的程式碼格式；

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

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

javascript物件的幾種建立方式

1，工廠模式

2，建構函式模式

3，原型模式

4，混合建構函式和原型模式

5，動態原型模式

6，寄生建構函式模式

7，穩妥建構函式模式

javascript繼承的6種方法

1，原型鏈繼承

2，借用建構函式繼承

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

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

建立ajax的過程

(1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.

(2)建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證資訊.

(3)設定響應`HTTP`請求狀態變化的函式.

(4)傳送`HTTP`請求.

(5)獲取非同步呼叫返回的資料.

(6)使用JavaScript和DOM實現區域性重新整理.

var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

    }

}</pre>

非同步載入和延遲載入

1.非同步載入的方案： 動態插入script標籤

2.通過ajax去獲取js程式碼，然後通過eval執行

3.script標籤上新增defer或者async屬性

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

5.延遲載入：有些 js 程式碼並不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。

ie各版本和chrome可以並行下載多少個資源

IE6 兩個併發，iE7升級之後的6個併發，之後版本也是6個
Firefox，chrome也是6個

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

• Flash 適合處理多媒體、向量圖形、訪問機器；對 CSS 、處理文字上不足，不容易被搜尋。

• Ajax 對 CSS 、文字支援很好，支援搜尋；多媒體、向量圖形、機器訪問不足。

• 共同點：與伺服器的無重新整理傳遞訊息、使用者離線和線上狀態、操作DOM

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

    概念:同源策略是客戶端指令碼（尤其是 Javascript ）的重要的安全度量標準。它最早出自 Netscape Navigator2.0 ，其目的是防止某個文件或指令碼從多個不同源裝載。

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

指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。

為什麼要有同源限制？

我們舉例說明：比如一個黑客程式，他利用 Iframe 把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過 Javascript讀取到你的表單中 input 中的內容，這樣使用者名稱，密碼就輕鬆到手了。

缺點：

現在網站的 JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被 merge 後，這個串就到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。

GET和POST的區別，何時使用POST？

    GET：一般用於資訊獲取，使用URL傳遞引數，對所傳送資訊的數量也有限制，一般在2000個字元

    POST：一般用於修改伺服器上的資源，對所傳送的資訊沒有限制。

    GET方式需要使用Request.QueryString來取得變數的值，而POST方式通過Request.Form來獲取變數的值，

    也就是說Get是通過位址列來傳值，而Post是通過提交表單來傳值。

然而，在以下情況中，請使用 POST 請求：

無法使用快取檔案（更新伺服器上的檔案或資料庫）

向伺服器傳送大量資料（POST