一些開放性題目

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

2.項目介紹

3.如何看待前端開發？

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

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

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

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

• fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進行定位。

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

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

如何解決跨域問題

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是加強版的Browserify。

webpack的兩大特色：

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

2.loader 可以處理各種類型的靜態文件，并且支持串聯操作

webpack的優勢：

• require.js的所有功能它都有。

• 編繹過程更快，因為require.js會去處理不需要的文件

webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
布局所占高度Height

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對象即被終止，作用域鏈向下訪問變量是不被允許的。

onmousemove和onmouseover的區別：

時間上：onmousemove事件觸發后，再觸發onmouseover事件。

按鈕上：不區分鼠標按鈕。

動作上：onmouseover只在剛進入區域時觸發，onmousemove除了剛進入區域觸發外，在區域內移動鼠標，也會觸發

創建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 沒有實際價值，不可能拿來重放。

盡量采用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協議之上，有時也承載于TLS或SSL協議層之上，這個時候，就成了我們常說的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

• 避免全局查詢

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

• 多個變量聲明合并

移動端性能優化

1.盡量使用css3動畫，開啟硬件加速。適當使用touch事件代替click事件。避免使用css3漸變陰影效果。

什么是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。請求一個文件的流程可能如下：

====第一次請求===

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源碼封裝在一個匿名函數的自執行環境中，有助于防止變量的全局污染，然后通過傳入window對象參數，可以使window對象作為局部變量使用，好處是當jquery中訪問window對象的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對象。同樣，傳入undefined參數，可以縮短查找undefined時的作用域鏈。

    (function( window, undefined ) {

         //用一個函數域包起來，就是所謂的沙箱

         //在這里邊var定義的變量，屬于這個函數域內的局部變量，避免污染全局

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

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



        window.jQuery = window.$ = jQuery;

    })( window );

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

有一些數組或對象的方法經常能使用到，應將它們保存為局部變量以提高訪問速度。

將全局對象window作為參數傳入，則可以使之在匿名函數內部作為局部變量訪問，提供訪問速度。

jquery實現的鏈式調用可以節約代碼，所返回的都是同一個對象，可以提高代碼效率。

ES6的了解

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

js繼承方式及其優缺點

原型鏈繼承的缺點

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

借用構造函數（類式繼承）

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

組合式繼承

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

具體請看：JavaScript繼承方式詳解

關于Http 2.0 你知道多少？

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

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

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

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

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');//第二個實例

構造函數模式

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

1.構造函數方法沒有顯示的創建對象 (new Object());

2.直接將屬性和方法賦值給 this 對象;

3.沒有 renturn 語句。

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。

閉包有三個特性：

1.函數嵌套函數

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

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

具體請看：詳解js閉包

請你談談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中

CSS 相關問題

display:none和visibility:hidden的區別？

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

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

CSS中link 和@import的區別是？

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

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

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

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

position:absolute和float屬性的異同

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

• 不同點：float仍會占據位置，position會覆蓋文檔流中的其他元素。

介紹一下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> 元素的每個 <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        單選框或復選框被選中。

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

html部分

說說你對語義化的理解？

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.圖片必須有說明文字

常見兼容性問題？

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

瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

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

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

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

漸進識別的方式，從總體中逐漸排除局部。

  首先，巧妙的使用“\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](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<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 */

清除浮動的幾種方法：

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

![what-is-html5][16]

移除的元素

純表現的元素：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>元素就可以了。

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() 的區別和作用？

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

區別參見：[JavaScript學習總結（四）function函數部分][3]

哪些操作會造成內存泄漏？

內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

詳見：[詳解js變量、作用域及內存][4]

列舉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`

詳情：[從輸入 URL 到瀏覽器接收的過程中發生了什么事情？][8]

Web最新資訊，請關注我的微信公眾號“一起玩前端”或掃描二維碼關注.

qrcode_for_gh_7a765c30aeb7_344.jpg