需要289頁前端初中級前端面試題，請直接滑到文末獲取
1、ant-design的使用總結及常用組件和他們的基本用法?
ant-design爲React，Angular和Vue都提供了組件，同時爲PC和移動端提供了常用的基礎組件。ant-design提供的demo非常的豐富並且樣式能夠基本的覆蓋開發需求。antd的Demo因爲是多人編寫的，所以可以看到不同樣式的實現都有，可以很好的滿足不同開發的風格。
常用的組件有：Button，Form，Radio，Select，TimePicker，Upload，Table等。使用時需要可以參考Demo來編寫，並且在組件界面頁的最後面有屬性的介紹和注意點。能夠很方便的來實現效果。
2、前端常用的字符實體有哪些及怎麼書寫？
因爲存在預留字符，當需要顯示這些字符的時候，那麼可以使用字符實體。 常用的字符字體有:
（1）空格
（2）小於號<
（3）雙引號"
（4）單引號'
（5）&與符號&
（6）大於號>
3、react的生命週期及不同生命週期的含義？
1）constructor中進行state的初始化。
2）componentDidMount中進行異步加載數據，添加事件監聽。
3）getDerivedStateFromProps中將傳入的props更新到state上。
4）componentDidUpdate中處理因爲state變化觸發的請求。
4、常用的圖表繪製工具有哪些，可以實現哪些功能？
EChats提供不同平臺的多維度的數據展示，並支持多設備和多種可視化類型，
比如:
折線圖，
柱狀圖，
散點圖，
餅圖，
K線圖等。
5、阿里雲OSS文件上傳的流程是怎麼樣？
因爲涉及到OSS的key保存問題，所以最好將圖片發送給後臺，然後由後臺將圖片上傳OSS並返回OSS的url。
圖片選擇使用ant-design的upload組件。
6、redux的主要作用和使用方式?
主要作用是：吧所有的state集中到組件頂部，能夠靈活的將所有state各取所需的分發給所有的組件。
store: 保存數據的地方。整個應用智能有一個Store。
state： 包含所有數據，一個state對應一個view。只要state相同，view就相同。
action：View發出的通知action，改變state，從而改變view。修改state的唯一辦法是使用Action。
7、升級項目依賴的第三方庫要怎麼操作？
使用npm outdated 可以查看npm中有最新版本的包,然後使用ncu -u 進行依賴庫的升級，最後使用npm install進行新版本的安裝就可以了。
其中ncu是nom-check-updated的工具，通過npm install -g npm-check-updates來安裝。 升級完成後，需要查看依賴的第三方庫的版本是否有大版本的升級，比如從1.x升級到2.x或者3.x升級到4.x，涉及到跨版本升級的，那麼一定要小心，需要去對應的官方查看版本遷移記錄，進行代碼的升級。
所以一般是推薦定時進行第三方庫的版本升級，可以有效的修復第三方庫存在的bug和避免跨大版本導致的升級影響較大的問題。
8、react新版本中Hook的怎麼使用？
可以在不編寫class的情況下使用state以及其他的React特性。 使用useState聲明新變量
// 聲明一個新的叫做 “count” 的 state 變量
const [count, setCount] = useState(0);
useEffect給函數組件增加了操作副作用的能力，與componentDidMount，componentDidUpdate和componentWillUnmount具有相同的用途。React會在每次渲染後調用副作用函數（包括第一次渲染的時候）。
// 相當於 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用瀏覽器的 API 更新頁面標題
document.title = `You clicked ${count} times`;
});
在組件中可以多次使用useEffect。
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
副作用函數還可以通過返回一個函數來指定如何“清除”副作用。比如，在上面的組件中使用副作用函數來訂閱好友的在線狀態，並通過取消訂閱來進行清除操作。可以理解爲之前是在componentDidMount中添加ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);來訂閱好友的在線狀態，然後在componentWillUnmount中添加了ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);來取消訂閱。
useEffect第二個參數爲一個依賴的值數組，只有當數組的值發生改變的時候，才執行effect的渲染。如果傳入的是一個空數組，那麼僅僅在組件掛載和卸載時執行一次。
9、git的瞭解，rebase和快進是什麼含義？
git相對svn的最大的區別就是分佈式，也就是說check out項目後，可以在本地進行代碼的提交，查看歷史版本，創建項目新分支等。
git中使用rebase來管理分支，能夠避免同一分支線因爲多人的合併而導致分支線的不連貫。 merger中當要合入的分支線A和被合入的分支B，A的基點是B上並B沒有新提交，此時就會進行快進及不生成一個合併的提交。也可以關閉快進，從而可以增加一個合併提交，可以很方便的觀察到誰進行過一次合併。
10、CSS選擇器列表優先級及權重？
1.通用選擇器（*）
2.元素(類型)選擇器 權重1
3.類選擇器 權重10
4.屬性選擇器
5.僞類
6.ID 選擇器 權重100
7.內聯樣式 權重1000 !important規則會覆蓋任何其他的聲明，只在需要覆蓋全站或外部CSS的替丁頁面中使用。
11、CSS配置的常用屬性有哪些及作用？
| 分類 | 屬性 | 值 |
|---|---|---|
| 寬和高 | width 寬度；height 高；max-height 跟着父標籤 | |
| 字體屬性 | color 顏色；font-family 字體；font-size 文字大小；font-weight 文字粗細 | normal 默認值 bold 粗體 bolder 更粗 lighter 更細 100~900 具體粗細 inherit 繼承類元素字體的粗細值 |
| 顏色 | 十六進制值: #FF0000; 單詞表示: blue，red; RGB值: (255, 0, 0);rgba(200, 0, 0, 0.3) | |
| 文字屬性 | text-align，text-decoration, text-indent 段落縮進32像素 | left 左邊對齊 right 右對齊 center 居中對齊 justify 兩端對齊; none 默認 underline 文本下一條線 overline 文本上一條線 line-through 穿過文本一條線 inherit 繼承父類屬性 |
| 背景屬性 | 背景顏色background-color: red; 背景圖片background-image: url(‘1.jpg’);背景重複 background-repeat: repeat; 背景位置 background-position: right top | |
| CSS盒子 | margin 控制元素與元素之間的距離;padding 控制內容與邊框之間的距離; border 內邊距和內容外的邊框; content 內容,顯示文本和圖像; | 簡寫順序：上 右 下 左 |
| 邊框 | border-width, border-style, border-color;可以簡寫爲border:2px solid red; | border-radius 實現圓角邊框；border-style的值有none 無邊框 dotted 點狀虛線邊框 dashed 矩形虛線邊框 solid 實現邊 |
| 顯示 | display | none 不顯示；block 沾滿整個頁面寬度；inline 顯示爲內聯元素；inline-block 具有內元素和塊級元素 |
| 浮動 | float 任何元素都可以浮動；clear屬性指定側不允許其他浮動元素； | float的屬性：left 向左，right 向右，none 不浮動。clear屬性left在左側不允許浮動元素，right在右側不允許浮動元素，both左右兩側不允許，none 允許出現；inherit 繼承父元素； |
| 溢出 | overflow | visible 內容不會被修剪，hidden 內容被修剪並其餘內容不可見，scroll內容被修剪並顯示滾動條可查看其餘的內容，auto內容被修剪並顯示滾動條可查看其餘的內容，inherit從父元素繼承 |
| 定位 | position | static 無定位，relative 相對定位，absolute 絕對定位，fixed 固定 |
12、bwebpack的作用及怎麼使用？
模塊打包機，分析項目結構，找到JavaScript模塊以及一些瀏覽器不能直接運行的擴展語言(Scss, TypeScript等)，並將其打包爲合適的格式以瀏覽器使用。 通過css-loader和style-loader將樣式表表嵌入webpack打包後的JS文件中。
通過less-loader, sass-loader,stylus-loader進行CSS預處理器可以把特殊類型的語句轉化爲瀏覽器可識別的CSS語句。
webpack使用插件來擴展webpack功能並在整個構建過程中生效和執行相關任務。如HtmlWebpackPlugin插件，依據一個簡單的模板生成最終的Html5文件並在文件中自動引用了打包後的JS文件。
13、Promise實現及優缺點
Promise用於表示一個異步操作的最終完成（或失敗）及其結果值。
var myPromise = new Promise((resolve, reject) => {
// 需要執行的代碼
...
if (/* 異步執行成功 */) {
resolve(value)
} else if (/* 異步執行失敗 */) {
reject(error)
}
})
myPromise.then((value) => {
// 成功後調用, 使用value值
}, (error) => {
// 失敗後調用, 獲取錯誤信息error
})
優點：
解決回調地獄，對異步任務寫法更標準化與簡潔化。
缺點：首先無法取消Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise內部拋出錯誤，不會反應到外部。
第三，當處於pending狀態時，無法得知目前進展到哪一個階段。
14、Http狀態碼及含義
1xx: 服務器收到請求, 需請求者進一步操作
2xx: 請求成功
3xx: 重定向, 資源被轉移到其他URL了
4xx: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源
5xx: 服務端錯誤, server error
301: 資源(網頁等)被永久轉移到其他URL, 返回值中包含新的URL, 瀏覽器會自動定向到新URL
302: 臨時轉移. 客戶端應訪問原有URL
304: Not Modified. 指定日期後未修改, 不返回資源
403: 服務器拒絕執行請求
404: 請求的資源(網頁等)不存在
500: 內部服務器錯誤
15、async和await的使用
async/await是寫異步代碼的新方式，以前的方法有回調函數和Promise。
async/await是基於Promise實現的，它不能用於普通的回調函數。
async/await與Promise一樣，是非阻塞的。
async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。
16、setTimeout時間延遲爲何不準
單線程，先執行同步主線程，再執行異步任務隊列。
17、let const var作用域及區別
塊級作用域，暫時性死區。
var 定義的變量，可以跨塊作用域訪問，不能跨函數作用域訪問。
let 定義的變量，只能在塊作用域裏訪問，不能跨塊作用域訪問也不能跨函數作用域訪問。
const 定義常量，創建時必須賦值，只能在塊作用域裏訪問並且不能修改。
18、for in, forEach和for of的區別
for in遍歷數組會遍歷到數組原型上的屬性和方法，更適合遍歷對象。遍歷到myObject的原型方法method，如果不想遍歷原型方法和屬性的話，可以在循環內部判斷一下hasOwnProperty方法可以判斷某屬性是否是該對象的實例屬性。
forEach不支持break，continue，return等
for of可以成功遍歷數組的值，而不是索引，不會遍歷原型。
19、localStorage 與 sessionStorage 與cookie的區別總結
共同點： 都保存在瀏覽器端且同源。
localStorage，sessionStorage統稱爲webStorage，保存在瀏覽器，不參與服務器通信。大小爲5M。
生命週期不同：localStorage永久保存，sessionStorage當前會話。都可以手動刪除。
作用域不同： 不同瀏覽器不共享local和session，不同會話不共享session。
Cookie：設置的過期時間前一直有效，大小4K。有個數限制，各瀏覽器不同，一般爲20個。攜帶在http頭中，過多會有性能問題。可自己封裝，也可用原生。
20、微信小程序組件的生命週期？
onLoad頁面加載：一個頁面只會調用一次，可以在onLoad中獲取打開當前頁面所調用的query參數。
onShow 頁面顯示：每次打開頁面都會調用一次。
onReady 頁面初次渲染完成：一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
onHide 頁面隱藏：當navigateTo或底部tab切換時調用。
onUnload 頁面卸載： 當頁面摧毀時執行。
21、微信小程序原理？
微信小程序採用JavaScript，WXML，WXSS三種技術進行開發。
JavaScript：首先JavaScript的代碼是運行在微信App中的，並不是運行在瀏覽器中，因此一些H5技術的應用，需要微信App提供對應的API支持，而這限制住了H5技術的應用，切不能稱爲嚴格的H5.同理，微信提供的獨有的某些API，H5也不支持或支持的不是特別好。
WXML： WXML微信基於XML語法開發的，因此開發時，只能使用微信提供的現有標籤，HTML的標籤是無法使用的。
WXSS：具有CSS的大部分特性，但並不是所有的都支持，而且支持哪些，不支持哪些並沒有詳細的文檔。 微信的架構是數據驅動的架構模式，UI和數據是分離的，所有的頁面更新都需要通過對數據的更改來實現。 微信程序分爲兩個部分webview和appService。其中webview主要用來展現UI，appService有來處理業務邏輯、數據及接口調用。他們在兩個進程中運行，通過系統層JSBridge實現通信，實現UI的渲染、事件的處理。
22、HTTP狀態碼及其含義
| 狀態碼類型狀態碼 | 類別 | 原因短語 |
|---|---|---|
| 1XX | Information（信息性狀態碼） | 接收的請求正在處理 |
| 2XX | Success（成功狀態碼） | 請求正常處理完畢 |
| 3XX | Redirection（重定向狀態碼） | 需要進行附加的操作以完成請求 |
| 4XX | Client Error（客戶端錯誤狀態碼） | 服務器無法處理請求 |
| 5XX | Server Error（服務端錯誤狀態碼） | 服務器處理請求出錯 |
| 204 | 服務器成功處理，但未返回內容。 | |
| 304 | Not Modified 未修改。 | 所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端通常會緩存訪問過的資源，通過提供一個頭信息指出客戶端希望只返回在指定日期之後修改的資源 |
| 400 | Bad Request | 客戶端請求的語法錯誤，服務器無法理解 |
| 403 | Forbidden | 服務器理解請求客戶端的請求，但是拒絕執行此請求 |
| 404 | Not Found | 服務器無法根據客戶端的請求找到資源（網頁）。 |
通過此代碼，網站設計人員可設置"您所請求的資源無法找到"的個性頁面
1、ajax 實現原理及方法使用？
2、 說說 vue 中 key 的原理？
3、 vue 雙向綁定的原理是什麼？
4、vue 中$nextTick 有什麼作用？
5、 淺談前端工程化、模塊化、組件化？
6、vue 項目優化的手段有哪些
7、mvc，mvp，mvvm 是什麼
8、vue，jq，react，angular 區別，各自優勢
9、什麼是虛擬 dom，優勢是什麼，存儲在哪
10、談談 webpack 的理解
11、談談 event loop…35
12、介紹 HTTPS 握手過程
13、如何防範 CSRF 攻擊，XSS 攻擊
14、使用 sort() 對數組 [3, 15, 8, 29, 102, 22] 進行排序，輸出結果
15、箭頭函數與普通函數的區別
16、簡述 react 的生命週期，數據變化會觸發哪些生命週期
17、SQL 語句的分類
18.什麼是彈性佈局？
19.編寫響應式？
20.常見的瀏覽器兼容問題？
21.H5 新特性
22.C3 新特性：
23.什麼是 typescript
24.三大框架的區別：
25.spa 應用優點：
26.什麼是模塊化編程？
27.性能優化？
28.什麼是 HTTP 協議：
29、快速擾亂數組排序
30、JS 判斷設備來源
31、audio 元素和 video 元素在 ios 和 andriod 中實現自動播放
32、讓文本不可複製
33、水平垂直居中
34、改變 placeholder 的字體顏色
35、如何判斷一個 object 是數組類型
36、CORS http 請求和普通 http 請求的區別
37、行內元素，塊元素，空元素有哪些？
38、src 和 href 的區別？
39、什麼是 css HACK？
40、優雅降級和漸進增強？
41、new 操作符的實現
42、遞歸深拷貝
43、JS 常見的四種內存泄漏
我目前是在職前端開發，如果你現在也想學習前端開發技術，在入門學習前端的過程當中有遇見任何關於學習方法，學習路線，學習效率等方面的問題，你都可以申請加入我所在的前端學習交流裙：前面：42137 後面：4697。裏面聚集了一些正在自學前端的初學者,轉行者，初階者，這套面試題囊括了幾乎所有前端的知識點，感興趣的可以點此獲取~