前端面試題整理彙總（一）

優才網

關於前端面試題，優優之前推薦過，如下，點擊即可查看：

5個經典的前端面試問題

2016年十家知名公司前端面試經驗總結

前端面試會問哪些問題？

前端開發面試題彙總【HTML&CSS部分】

前端技術面試問題彙總（含答案）

前端技術面試題彙總-含答案（二）

今天推薦的這篇也比較全面，有助於大家加深對前端知識點的理解，希望能幫助到各位正在找前端工作的朋友。由於微信公衆號字數限制，今天先推薦第一部分，第二部分將在後面發佈，或者直接點擊閱讀原文前往收集者博客查看。

一些開放性題目

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、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實現局部刷新.

漸進增強和優雅降級

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

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

常見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的執行。

WebSocket是Web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。他是一個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

ETag應用:

Etag由服務器端生成，客戶端通過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改。常見的是使用If-None-Match。請求一個文件的流程可能如下：
====第一次請求===

客戶端發起 HTTP GET 請求一個文件；
服務器處理請求，返回文件內容和一堆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源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，然後通過傳入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 多出了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');//第二個實例

構造函數模式

使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不同之處在於：

構造函數方法沒有顯示的創建對象 (new Object());
直接將屬性和方法賦值給 this 對象;
沒有 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）

優先級爲:
!important > id > class > tag
important 比內聯優先級高,但內聯比 id 要高

CSS3新增僞類舉例：

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

元素的每個

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

元素的每個

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

元素的每個

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

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

元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。

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

佈局所佔高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

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 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。

作者：trigkit4