一些開放性題目

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屬性

相關推薦