常見前端面試題

一、跨域解決window.name+iframe跨域獲取數據詳解

     https://www.cnblogs.com/zichi/p/4620656.html

    總結 ：

    能使用這種方式跨域，有幾個條件必不可少。

     iframe標籤的跨域能力

     window.name屬性值在文檔刷新後依舊存在的能力

　  再簡單瞭解下window和contentWindow的一些知識。瀏覽器就會爲原始文檔建立一個 window 對象，再爲每一個框架（iframe）建立額外的 window 對象。這些額外的對象是原始窗口的子窗口，可能被原始窗口中發生的事件所影響。例如，關閉原始窗口將致使關閉所有子窗口。contentWindow屬性是指指定的frame或者iframe所在的window對象。

二、談談你對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 很快且在增量編譯上更加快

三、說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

四、建立ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

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

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

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

五、對前端模塊化的認識

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

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

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

AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

CMD模塊方式

  define(function(require, exports, module) {

  // 模塊代碼

  });

六、你以爲前端工程的價值體如今哪

爲簡化用戶使用提供技術支持（交互部分）

爲多個瀏覽器兼容性提供支持

爲提升用戶瀏覽速度（瀏覽器性能）提供支持

爲跨平臺或者其餘基於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動畫代替setTimeoutCSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長PC端的在移動端一樣適用

八、ES6的瞭解

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

九、js繼承方式及其優缺點

原型鏈繼承的缺點

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

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

    借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。因此咱們須要原型鏈+借用構造函數的模式，這種模式稱爲組合繼承

組合式繼承

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

十、說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

    1.函數嵌套函數

    2.函數內部能夠引用外部的參數和變量

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

十一、常見兼容性問題？

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

    （2）上下margin重合問題

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

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

（3）浮動元素引發的問題：

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

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

    3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

十二、DOM操做

添加、移除、替換、插入

      appendChild()
      removeChild()
      replaceChild()

      insertBefore() //並無insertAfter()

1三、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

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

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
    一、實現界面交互
    二、提高用戶體驗
    三、有了Node.js，前端能夠實現服務端的一些事情

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

 參與項目，快速高質量完成實現效果圖，精確到1px；
 與團隊成員，UI設計，產品經理的溝通；
 作好的頁面結構，頁面重構和用戶體驗；
 處理hack，兼容、寫出優美的代碼格式；

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

1五、一個頁面從輸入 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`服務器提供資源服務，客戶端開始下載資源。

1六、建立ajax的過程

  (1)建立`XMLHttpRequest`對象,也就是建立一個異步調用對象.

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

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

  (4)發送`HTTP`請求.

  (5)獲取異步調用返回的數據.

  (6)使用JavaScript和DOM實現局部刷新.

1七、GET和POST的區別，什麼時候使用POST？

 GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符

 POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

 GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，

  也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：
沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

1八、什麼樣的前端代碼是好的

高複用低耦合，這樣文件小，好維護，並且好擴展

1九、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

20、請描述下cookies，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僅僅是爲了在本地「存儲」數據而生。

2一、介紹JavaScript的基本數據類型

Undefined、Null、Boolean、Number、String

2二、談談This對象的理解。

this的指向

this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，指向window對象時能夠省略不寫.

用於區分全局變量和局部變量，須要使用this

eval是作什麼的？

eval()的做用把字符串參數解析成JS代碼並運行，並返回執行的結果；

應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）

由JSON字符串轉換爲JSON對象的時候能夠用eval

2三、你知道jquery中的選擇器嗎，請講一下有哪些選擇器？

答 ：選擇器大體分爲:基本選擇器，層次選擇器，過濾選擇器，表單選擇器

2四、常見的狀態碼

    100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
    200 OK 正常返回信息
    201 Created 請求成功而且服務器建立了新的資源
    202 Accepted 服務器已接受請求，但還沒有處理
   301 Moved Permanently 請求的網頁已永久移動到新位置。
   302 Found 臨時性重定向。
   303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
   304 Not Modified 自從上次請求後，請求的網頁未修改過。
   400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
   401 Unauthorized 請求未受權。
   403 Forbidden 禁止訪問。
   404 Not Found 找不到如何與 URI 相匹配的資源。
   500 Internal Server Error 最多見的服務器端錯誤。
   503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

2五、瀏覽器的內核分別是什麼?

IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

2六、如何消除一個數組裏面重復的元素？

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6