一、基礎

#1.1 HTML

• html5新標簽有哪些
• canvas、svg、webGL
• 你是如何理解?HTML語義化的，有什么好處
• 前端需要注意哪些SEO?
• manifest、worker、socket
• input和textarea的區別
• 用一個div模擬textarea的實現

#1.2 CSS

• css3有什么新特性，瀏覽器支持怎么樣
• 偽類是什么？有哪些？會有哪些兼容性問題？如何處理？
• css預處理器知道嗎？用過哪些？有什么優劣？后處理器知道嗎？
• 盒模型有哪幾種？怪異模式和標準模式？
• less、sass、postcss、prefix
• 層疊優先級
• 圣杯、雙飛燕布局
• float清除浮動
• flex布局、?grid布局、table布局
• css以及中軸旋轉、動畫變換
• 繪制三角形、矩形、菱形、梯形（奇巧淫技，可以不問）
• sprite圖（雪碧圖）知道嗎？svg雪碧圖了解嗎？
• px、em、rem、vw、vh？rem的根節點樣式在什么時候設置？
• position有哪些？他們的定位原點是什么？
• 媒體查詢用css好還是用js好？
• link和@import的區別？
• 響應式布局的原理
• css低版本瀏覽器兼容問題，額外需要什么后綴來聲明瀏覽器兼容
• !important意義，是否應當規避使用？
• BFC塊級上下文、IFC，實現雙欄高度對齊
• BEM命名法，有什么優勢，有什么劣勢
• 1px邊框問題
• （水平）居中有哪些實現方式、（垂直）居中有哪些實現方式

#1.3 JavaScript

• typeof以及弱類型轉換規則？NaN、undefined、null
• dom的節點操作？能夠背api還是知道api？
• ajax是什么？知道底層實現原理嗎？知道fetch嗎？自己封裝過嗎？
• GET、POST意義？restful架構下還有別的什么請求？OPTION請求是什么？
• 事件冒泡和事件捕獲是怎樣的？對應的默認方法有什么？一般在什么情況使用？
• call、apply、bind
• 如何判斷數據類型？
• hoisting是什么？具體表現是怎樣的？
• 匿名函數是什么？函數表達式和函數聲明的區別？
• let、const暫時性鎖區知道嗎？表現是怎樣的？
• 嚴格模式是什么？有什么好處？use strict
• arguments是什么類型？callee和caller有什么區別？
• Date.format實現過嗎？思路是怎樣的？
• 動畫：setTimeout何時執行，requestAnimationFrame的優點
• 你知道new一個對象有幾步嗎？

#二、高級

#2.1 Browser

• 打開一個網頁經歷了那些過程？
• 瀏覽器加載白屏是什么原因？
• 千萬訪問量的項目，前端需要注意些什么？

#2.2 JavaScript

• 表達式和語句有什么區別？如何把語句轉換為表達式？
• 什么叫執行上下文棧(·Execution Context Stack)·? 一個函數調用會產生多少個上下文環境？如何激活一個上下文，什么叫caller(調用者)，什么叫callee(被調用者)？給你一段代碼能否畫出執行過程中的上下文堆棧變化？
• 執行上下文包括哪些結構(狀態/屬性)，如何追蹤關聯代碼的執行進度？
• eval在調用的時候有哪些特別的地方？eval函數自身會產生上下文嗎？會影響當前的調用上下文嗎？
• 什么叫變量對象？什么叫活動對象？
• 詞法作用域是什么？閉包是如何形成的？
• var foo = function bar () {}命名函數表達式中(上述的foo函數)bar變量是定義在哪一層作用域的？
• (0, 1, 2)?的結果是什么？
• var foo = { value: 2, bar: function () { return this.value; } 中(foo.bar, foo.bar)()的this值是什么？(foo.bar = foo.bar)()、(false || foo.bar)()呢?

#2.3 HTTP

• http1.0和http1.1的區別
• http請求碼有哪些？206、302、303、304、307
• 能說下304具體怎樣實現嗎？
• http緩存邏輯是怎樣的？協商緩存與強緩存？Last-Modified?/?Etag?/?Expires?/?Cache-Control？
• osi七層協議和tcp/ip四層協議
• 三次握手和四次握手
• 跨域是什么？http協議中如何判斷跨域？如何解決跨域問題？
• http2具體內容？SDPY了解么？
• HTTPS如何實現？tsl/ssl是什么？對稱加密、非對稱加密在什么時候、對什么數據加密？
• DNS劫持是什么？
• 瀏覽器在一次?HTTP?請求中，需要傳輸一個?4097?字節的文本數據給服務端，可以采用那些方式?

#2.4 優化

• 首屏優化
• 預加載資源、預解析DNS
• 懶加載圖片怎么做
• iframe一般怎么使用？
• window.onload、document.ready順序？iframe會阻塞嗎？
• cdn是什么？如何查找最近的cdn？
• gzip、chucked
• 前端安全：xss攻擊和防范、CSRF、CORS
• 硬件加速怎樣開啟
• 優化中會提到緩存的問題，問：靜態資源或者接口等如何做緩存優化
• 頁面DOM節點太多，會出現什么問題？如何優化？

#2.5 Products

這里主要是一些生產中真實存在的問題

• 一個feed流，有哪些展現方式？如果當前頁面可視區有5個格子，而你有20條信息需要展示，請問有哪些自動展示的算法？
• 移動端的緩存機制有哪幾種？
• 小程序如何與native通信？react-native實現原理？jsbridge如何實現？
• 過萬條數據如何加載和渲染？
• 如何在前端解析二進制，流媒體、圖片二進制數據怎樣渲染到頁面上？
• 如何解析二進制音頻、視頻？
• 文件如何顯示上傳百分比？
• 如何制作一個富文本，需要考慮哪些結構？
• html5的播放器怎么做？視頻直播如何在瀏覽器里面實現？HLS、RTMP
• 如何在瀏覽器里面裁剪圖片？如何裁剪視頻，對視頻做逐幀分析？
• 如何實現一個具有引導功能的組件庫？
• 如何封裝一個Form和FormItem，使其能夠跟input、select、checkbox、radio等組件進行 數據存儲、數據校驗（自定義邏輯）、校驗反饋？
• echart這類圖像庫的實現原理？
• i18n的國際化方案應該是怎樣的？
• 數據埋點的意義是什么？應當針對哪些數據進行埋點？如何構建一個埋點系統？
• 小程序的實現原理是什么？這【五篇】文章將帶你深入了解「微信小程序」

#三、 Framework

#3.1 React

• React的生命周期mount和update描述下
• React的生命周期中的isBatchingUpdates了解嗎？Transaction知道嗎
• React的vdom如何實現？jsx是怎樣解析的？
• React的Fiber`是什么？具有什么樣的特性？
• React的diff/patch算法原理
• React的組件邏輯（受控、非受控）？如何設計一個組件庫
• React的數據流，Redux、Mobx、Rxjs，發布訂閱模式、觀察者模式，flux和no-flux
• React的事件注冊和事件分發知道嗎？
• Redux解決了什么痛點（有什么優點），又有什么缺點
• Redux的中間件有哪些？redux-actions、redux-promise、redux-thunk、redux-saga、redux-immutable了解過哪些？說說中間件的意義
• Redux有什么優化方案？
• SSR了解過嗎？怎樣做？了解Koa么？
• React-Native了解過嗎？JavascriptCore是什么？

#3.2 Vue

• Vue是如何設計響應式系統的？（依賴收集）
• 什么時候使用computed,?methods,watch？之間有什么樣區別？
• template?和?render(jsx)?有什么的聯系？
• this.$nextTick是如何設計的？
• Vue?組件?data?為什么必須是函數？

#3.3 AngularJS

盡管angularJS已經基本退出了歷史舞臺，但是相信有的同學還是做過相關的項目，并很有可能被面試官問起

• angularJS的數據綁定采用什么機制？詳述原理
• 如果通過angularJS的?directive/component?規劃一套全組件化體系，可能遇到哪些挑戰？
• 一個angularJS應用應當如何良好地分層？
• ng-click中寫的表達式，能使用JS原生對象上的方法，比如Math.max之類的嗎？為什么

#四、文章

• 總結了17年初到18年初百場前端面試的面試經驗(含答案)
• 前端基礎面試整理(一)

總結

以上是生活随笔為你收集整理的前端面试-综合问题版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。