前端面試被問到項目中的難點有哪些？

前端面試中，一定都會被問過項目中的難點，但是很多人都答不出來。為了讓大家接下來的面試中有充足的準備，給大家整理了一些有難度又高頻的面試題，希望你們求職順利。

我們先來彙總JavaScript的筆試題：

（1）介紹一下JS的基本資料類型：

Undefined、Null、Boolean、Number、String

（2）介紹一下JS有哪些內建物件：

Object 是 JavaScript 中所有物件的父物件資料封裝類物件：Object、Array、Boolean、Number、String其他物件：Function、Argument、Math、Date、RegExp、Error

（3）列舉JS的基本程式碼規範：

（1）不要在同一行聲明多個變數（2）如果你不知道陣列的長度，使用 push（3）請使用 ===/!== 來比較 true/false 或者數值（4）對字元串使用單引號 ''(因為大多時候我們的字元串。特別html會出現")（5）使用物件字面量替代 new Array 這種形式（6）絕對不要在一個非函數塊裡聲明一個函數，把那個函數賦給一個變數。瀏覽器允許你這麼做，但是它們解析不同（7）不要使用全局函數（8）總是使用 var 來聲明變數，如果不這麼做將導致產生全局變數，我們要避免汙染全局名稱空間（9）Switch 語句必須帶有 default 分支（10）使用 /***/ 進行多行註釋，包括描述，指定類型以及參數值和返回值（11）函數不應該有時候有返回值，有時候沒有返回值（12）語句結束一定要加分號（13）for 迴圈必須使用大括號（14）if 語句必須使用大括號（15）for-in 迴圈中的變數應該使用 var 關鍵字明確限定作用域，從而避免作用域汙染（16）避免單個字元名，讓你的變數名有描述意義（17）當命名物件、函數和例項時使用駝峰命名規則（18）給物件原型分配方法，而不是用一個新的物件覆蓋原型，覆蓋原型會使繼承出現問題（19）當給事件附加資料時，傳入一個雜湊而不是原始值，這可以讓後面的貢獻者加入更多資料到事件資料裡，而不用找出並更新那個事件的事件處理器

（4）介紹一下JS原型，原型鏈，他們有何特點？

每個物件都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，那麼他就會去prototype裡找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。關係：instance.constructor.prototype = instance.__proto__特點：JavaScript物件是通過引用來傳遞的，我們創建的每個新物件實體中並沒有一份屬於自己的原型副本，當我們修改原型時，與之相關的物件也會繼承這一改變。當我們需要一個屬性時，JavaScript引擎會先看當前物件中是否有這個屬性，如果沒有的話，就會查詢它的prototype物件是否有這個屬性，如此遞推下去，一致檢索到Object內建物件。function Func(){}Func.prototype.name = "Xiaosong";Func.prototype.getInfo = function() {   return this.name;}var person = new Func();console.log(person.getInfo());//"Xiaosong"console.log(Func.prototype);//Func { name = "Xiaosong", getInfo = function() }

流式佈局如何實現，響應式佈局如何實現？

流式佈局：也叫fluid，

上面一行的空間不夠容納新的 TextView 時候才開闢下一行的空間。場景：主要用於關鍵詞搜尋或者熱門標籤等場景；他主要是按照頁面元素的寬度按照螢幕解析度進行適配調整，但整體佈局不變,使用%百分比定義寬度，高度大都是用 px 來固定，可以根據可視區域和父元素的實時尺寸來調整，儘可能適應各種解析度。

響應式佈局：主要是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式， 通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗；首先設定meta標籤，通過媒體查詢來設定樣式Media Queries,然後再設定多種檢視寬度。

什麼是 「use strict」,好處和壞處是什麼？

ECMAscript 5 添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得 Javascript 在更嚴格的條件下運行。

好處：消除 Javascript 語法的一些不合理、不嚴謹之處，減少一些怪異行為;消除程式碼運行的一些不安全之處，保證程式碼運行的安全；提高編譯器效率，增加運行速度；為未來新版本的 Javascript 做好鋪墊。 注：經過測試 IE6,7,8,9 均不支援嚴格模式。

缺點：現在網站的 JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的檔案，被 merge 後，這個串就到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。

介紹一下websocket

websocket 是一種網路通訊協議，是HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議，這個對比著 http 協議來說，http 協議是一種無狀態的、無連線的、單向的應用層協議，通訊請求只能由客戶端發起，服務端對請求做出應答處理。http 協議無法實現伺服器主動向客戶端發起訊息，Websocket 連線允許客戶端和伺服器之間進行全雙工通訊，以便任一方都可以通過建立的連線將資料推送到另一端。WebSocket 只需要建立一次連線，就可以一直保持連線狀態。

單頁面應用有什麼SEO方案？

原因：較之於傳統頁面，單頁應用需要先下載框架（資料 / 模板），然後才能開始載入資料、

方案：伺服器端渲染首屏（SSR 基於 vue 的服務端下載）；讓服務端把首屏的資料渲染在頁面上；進行基本的 css 模板 js 的編譯合併；減少請求次數，使用 gulp 工具，把 css 打包成一個檔案, js 打包成一個檔案, 模板打包成一個 js 檔案($templateCache) 可以和 js 檔案打包成一起（促使模板 JS 檔案和 JS 檔案一次性請求）；程式碼分塊，如果首屏不需要的塊，就不用載入了；路由元件懶載入。當打包構建應用時，Javascript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣更加高效；如果有大量圖片使用懶載入。

以上就是前端技術中高頻出現的難點問題，如果還有疑問的小夥伴，可以到黑馬程式設計師看就業相關內容。