1.一些開放性題目

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開發中所用到的以及各種靜態檔案（圖片、字型等），讓開發過程更加高效。對於不同型別的資源，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？

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