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

在每個前端求職者的面試過程中，一定都有過被面試官問到項目中的難點，而答不上來的情況。為了讓大家在前端面試前準備得更加充足，小編準備了一些易被忽視且難度較高的前端面試題，希望可以幫助大家更加順利完成求職，找到自己滿意的工作。

1.流式布局如何實現，響應式布局如何實現？

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

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

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

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

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

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

3.介紹一下websocket。

websocket 是一種網絡通信協議，是HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通信的協議，這個對比著 http 協議來說，http 協議是一種無狀態的、無連接的、單向的應用層協議，通信請求只能由客戶端發起，服務端對請求做出應答處理。

http 協議無法實現伺服器主動向客戶端發起消息，Websocket 連接允許客戶端和伺服器之間進行全雙工通信，以便任一方都可以通過建立的連接將數據推送到另一端。WebSocket 只需要建立一次連接，就可以一直保持連接狀態。

4.jquery如何綁定事件，有幾種類型和區別？

jquery 綁定事件的方法分別是：bind(),live(),delegate()和 on()，像bind(),live(),delegate(),隨著jquery 版本的更新，已經被移除，注意：bind()是在 3.0 版本之後被移除的，現在用的最多的是 on()，on()既可以綁定單事件，也可以綁定多事件，還可以進行事件委託。

區別：bind()的事件綁定是只對當前頁面選中的元素有效，對動態創建的元素 bind()事件，是沒有辦法達到效果的，而其餘三個可以。

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

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

方案：

伺服器端渲染首屏（SSR 基於 vue 的服務端下載）；讓服務端把首屏的數據渲染在頁面上；進行基本的 css 模板 js 的編譯合併；減少請求次數，使用 gulp 工具，把 css 打包成一個文件, js 打包成一個文件, 模板打包成一個 js 文件($templateCache) 可以和 js 文件打包成一起（促使模板 JS 文件和 JS 文件一次性請求）；代碼分塊，如果首屏不需要的塊，就不用加載了；路由組件懶加載。

當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣更加高效；如果有大量圖片使用懶加載。 以上就是前端面試被問到項目中的難點。

如果還有對前端面試抱有疑問的小夥伴，可以上傳智播客（黑馬程式設計師）官網，觀看前端就業指導課程，相信對大家的面試會有很大的幫助。