前言
為了吸引大家點(diǎn)進(jìn)來(lái)郭脂，起了一個(gè)剛（sao）氣的標(biāo)題。其實(shí)我覺(jué)得我這個(gè)文章挺值得看看的澈歉，看看又不長(zhǎng)肉呀?展鸡。
我是上周開(kāi)始投簡(jiǎn)歷，一周結(jié)束面試埃难，在家等offer啦莹弊。坐標(biāo)杭州，杭州的公司其實(shí)投來(lái)投去都是那幾家涡尘，小廠不想去忍弛，大廠進(jìn)不去[摳鼻ing]，加上互聯(lián)網(wǎng)寒冬考抄，其實(shí)找工作確實(shí)不好找啊细疚。
面試其實(shí)是實(shí)力和運(yùn)氣并存的事情，所以一方面我們要做好知識(shí)的準(zhǔn)備座泳，另一方面也要抓住時(shí)機(jī)惠昔，該出手就出手，畢竟現(xiàn)在好多公司hc都縮減挑势。
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ù)類(lèi)型判斷
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、聲明類(lèi)與繼承：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è)面，稱(chēng)為回流拌阴。此時(shí)绍绘，瀏覽器需要重新經(jīng)過(guò)計(jì)算，計(jì)算后還需要重新頁(yè)面布局，因此是較重的操作陪拘。會(huì)觸發(fā)回流的操作:
* 頁(yè)面初次渲染
* 瀏覽器窗口大小改變
* 元素尺寸厂镇、位置、內(nèi)容發(fā)生改變
* 元素字體大小變化
* 添加或者刪除可見(jiàn)的 dom 元素
* 激活 CSS 偽類(lèi)（例如：:hover）
* 查詢(xún)某些屬性或調(diào)用某些方法
* clientWidth左刽、clientHeight捺信、clientTop、clientLeft
* offsetWidth欠痴、offsetHeight迄靠、offsetTop、offsetLeft
* scrollWidth喇辽、scrollHeight梨水、scrollTop、scrollLeft
* getComputedStyle()
* getBoundingClientRect()
* scrollTo()
回流必定觸發(fā)重繪茵臭，重繪不一定觸發(fā)回流。重繪的開(kāi)銷(xiāo)較小舅世，回流的代價(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如何做用戶(hù)登錄權(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)分類(lèi)不合適混坞，請(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)持?
