前言
css
1、盒模型
2、flex
3、css單位
4、css選擇器
5、bfc 清除浮動(dòng)
6、層疊上下文
7、常見(jiàn)頁(yè)面布局
8、響應(yīng)式布局
9、css預(yù)處理，后處理
10、css3新特性
animation和transiton的相關(guān)屬性
animate和translate
11、display哪些取值
12、相鄰的兩個(gè)inline-block節(jié)點(diǎn)為什么會(huì)出現(xiàn)間隔，該如何解決
13、meta viewport 移動(dòng)端適配
14、CSS實(shí)現(xiàn)寬度自適應(yīng)100%，寬高16:9的比例的矩形
15、rem布局的優(yōu)缺點(diǎn)
16、畫(huà)三角形
17、1像素邊框問(wèn)題
html
1、語(yǔ)義化
2、新標(biāo)簽新特性
3、input和textarea的區(qū)別
4、用一個(gè)div模擬textarea的實(shí)現(xiàn)
5、移動(dòng)設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼的方法
JS
1、原型/原型鏈/構(gòu)造函數(shù)/實(shí)例/繼承
2、有幾種方式可以實(shí)現(xiàn)繼承
3、用原型實(shí)現(xiàn)繼承有什么缺點(diǎn)，怎么解決
4、arguments
5、數(shù)據(jù)類型判斷
6、作用域鏈、閉包、作用域
7、Ajax的原生寫(xiě)法
8、對(duì)象深拷貝、淺拷貝
9、圖片懶加載、預(yù)加載
10、實(shí)現(xiàn)頁(yè)面加載進(jìn)度條
11、this關(guān)鍵字
12、函數(shù)式編程
13、手動(dòng)實(shí)現(xiàn)parseInt
14、為什么會(huì)有同源策略
15、怎么判斷兩個(gè)對(duì)象是否相等
16、事件模型
事件委托、代理
如何讓事件先冒泡后捕獲
17、window的onload事件和domcontentloaded
18、for...in迭代和for...of有什么區(qū)別
19、函數(shù)柯里化
20、call apply區(qū)別，原生實(shí)現(xiàn)bind
call，apply，bind 三者用法和區(qū)別：角度可為參數(shù)、綁定規(guī)則（顯示綁定和強(qiáng)綁定），運(yùn)行效率、運(yùn)行情況。
21、async/await
22、立即執(zhí)行函數(shù)和使用場(chǎng)景
23、設(shè)計(jì)模式(要求說(shuō)出如何實(shí)現(xiàn),應(yīng)用,優(yōu)缺點(diǎn))/單例模式實(shí)現(xiàn)
24、iframe的缺點(diǎn)有哪些
25、數(shù)組問(wèn)題
數(shù)組去重
數(shù)組常用方法
查找數(shù)組重復(fù)項(xiàng)
扁平化數(shù)組
按數(shù)組中各項(xiàng)和特定值差值排序
26、BOM屬性對(duì)象方法
27、服務(wù)端渲染
28、垃圾回收機(jī)制
29、eventloop
進(jìn)程和線程
任務(wù)隊(duì)列
30、如何快速讓字符串變成已千為精度的數(shù)字
ES6
1、聲明 let、const
2、解構(gòu)賦值
3、聲明類與繼承：class、extend
4、Promise的使用與實(shí)現(xiàn)
5、generator（異步編程、yield、next()、await 、async）
6、箭頭函數(shù)this指向問(wèn)題、拓展運(yùn)算符
7、map和set有沒(méi)有用過(guò)，如何實(shí)現(xiàn)一個(gè)數(shù)組去重，map數(shù)據(jù)結(jié)構(gòu)有什么優(yōu)點(diǎn)？
8、ES6怎么編譯成ES5,css-loader原理,過(guò)程
9、ES6轉(zhuǎn)成ES5的常見(jiàn)例子
使用es5實(shí)現(xiàn)es6的class
瀏覽器
1、輸入url到展示頁(yè)面過(guò)程發(fā)生了什么？
2、重繪與回流
重繪(repaint): 當(dāng)元素樣式的改變不影響布局時(shí)，瀏覽器將使用重繪對(duì)元素進(jìn)行更新，此時(shí)由于只需要UI層面的重新像素繪制，因此 損耗較少
回流(reflow): 當(dāng)元素的尺寸、結(jié)構(gòu)或觸發(fā)某些屬性時(shí)，瀏覽器會(huì)重新渲染頁(yè)面，稱為回流。此時(shí)，瀏覽器需要重新經(jīng)過(guò)計(jì)算，計(jì)算后還需要重新頁(yè)面布局，因此是較重的操作。會(huì)觸發(fā)回流的操作:
- 頁(yè)面初次渲染
- 瀏覽器窗口大小改變
- 元素尺寸、位置、內(nèi)容發(fā)生改變
- 元素字體大小變化
- 添加或者刪除可見(jiàn)的 dom 元素
- 激活 CSS 偽類（例如：:hover）
- 查詢某些屬性或調(diào)用某些方法
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
回流必定觸發(fā)重繪，重繪不一定觸發(fā)回流。重繪的開(kāi)銷較小，回流的代價(jià)較高。
3、防抖與節(jié)流
4、cookies、session、sessionStorage、localStorage
5、瀏覽器內(nèi)核
服務(wù)端與網(wǎng)絡(luò)
1、常見(jiàn)狀態(tài)碼
2、緩存
200 From cache和200 ok
400,401,403狀態(tài)碼分別代表什么
瀏覽器緩存
3、cookie, session, token
4、前端持久化的方式、區(qū)別
5、DNS是怎么解析的
6、cdn
7、計(jì)算機(jī)網(wǎng)絡(luò)的相關(guān)協(xié)議
8、http/https/http2.0
9、get post區(qū)別
10、ajax、 axios庫(kù)
11、tcp三次握手，四次揮手流程
12、跨域
13、前端安全XSS、CSRF
14、websocket
15、Http請(qǐng)求中的keep-alive有了解嗎
16、網(wǎng)絡(luò)分層
17、即時(shí)通信，除了Ajax和websocket
18、模塊化，commonJS，es6，cmd，amd
Vue
1、vue解決了什么問(wèn)題
2、MVVM的理解
3、如何實(shí)現(xiàn)一個(gè)自定義組件，不同組件之間如何通信的？
4、nextTick
5、生命周期
6、虛擬dom的原理
7、雙向綁定的原理？數(shù)據(jù)劫持？
8、組件通信
父->子
子->父
非父子組件
9、Proxy 相比于 defineProperty 的優(yōu)勢(shì)
10、watch computed區(qū)別
11、virtual dom 原理實(shí)現(xiàn)
12、vue-router(hash， HTML5 新增的 pushState
單頁(yè)應(yīng)用，如何實(shí)現(xiàn)其路由功能---路由原理
vue-router如何做用戶登錄權(quán)限等
你在項(xiàng)目中怎么實(shí)現(xiàn)路由的嵌套
13、vuex的理解
前端性能優(yōu)化
頁(yè)面DOM節(jié)點(diǎn)太多，會(huì)出現(xiàn)什么問(wèn)題？如何優(yōu)化？
如何做性能監(jiān)測(cè)
SEO和語(yǔ)義化
這個(gè)沒(méi)被問(wèn)過(guò)
微信小程序
微信小程序和h5差異，如果有開(kāi)發(fā)weex的經(jīng)驗(yàn)，可能會(huì)加上weex
git
一些基本命令
打包工具webpack
1、打包原理
2、打包插件
3、webpack熱更新原理
4、優(yōu)化構(gòu)建速度
算法
1、排序算法
2、動(dòng)態(tài)規(guī)劃，參見(jiàn)背包問(wèn)題
3、二叉樹(shù)
4、加油站問(wèn)題(貪心算法)
5、二分法
6、二叉樹(shù)遍歷
7、單鏈表反轉(zhuǎn)
8、取1000個(gè)數(shù)字里面的質(zhì)數(shù)
9、找出數(shù)組中和為給定值的兩個(gè)元素，如：[1, 2, 3, 4, 5]中找出和為6的兩個(gè)元素。
10、線性順序存儲(chǔ)結(jié)構(gòu)和鏈?zhǔn)酱鎯?chǔ)結(jié)構(gòu)有什么區(qū)別？以及優(yōu)缺點(diǎn)
移動(dòng)端
1、自適應(yīng)
2、pwa
3、移動(dòng)端手勢(shì)
附加題
1、無(wú)限滾動(dòng)方案
2、如何處理兼容性問(wèn)題
3、你遇到過(guò)最難的問(wèn)題是什么
4、ES6 class與ES5 function區(qū)別及聯(lián)系
5、vue怎么監(jiān)聽(tīng)數(shù)組
6、寫(xiě)過(guò)webpack loader嗎
7、微信網(wǎng)頁(yè)版登錄機(jī)制思考
后記
如果你刷到這里，你的內(nèi)心os是不是：前端知識(shí)點(diǎn)好多啊，我記不住??！大兄弟，我和你一樣，我也記不住，經(jīng)常學(xué)了就忘，沒(méi)事，繼續(xù)學(xué)就好了。。。
我也是一邊面試一邊增加的，所以可能有的知識(shí)點(diǎn)分類不合適，請(qǐng)包涵哈。
之前做這些知識(shí)點(diǎn)羅列的時(shí)候，也沒(méi)想發(fā)出來(lái)，只是單純的做點(diǎn)筆記。這些知識(shí)點(diǎn)有的來(lái)自于其他前端小伙伴寫(xiě)的面經(jīng)，有的是我自己去面試的時(shí)候被問(wèn)到的。剛準(zhǔn)備面試的時(shí)候，內(nèi)心慌的不行??！但是后來(lái)發(fā)現(xiàn)，"多面面就好了"這句話簡(jiǎn)直太正確了，越面越順，而且自己心情也會(huì)比較放松了。 為什么扯這么多呢，其實(shí)就想告訴正在找工作的同學(xué)們，堅(jiān)持?
