使用過(guò)的koa2中間件
koa-body原理
介紹自己寫(xiě)過(guò)的中間件
有沒(méi)有涉及到Cluster
介紹pm2
master掛了的話(huà)pm2怎么處理
如何和MySQL進(jìn)行通信
——- node的東西后面再解答 ————
React聲明周期及自己的理解?
react的生命周期有:
(getDefaultProps getInitialState)
componentWillMount render componentDidMount 完成初始化賦值, 渲染DOM, 初始數(shù)據(jù)請(qǐng)求并再次渲染 只執(zhí)行一次
componentWillReciveProps(nextProps) 提前根據(jù)傳入的數(shù)據(jù) 修改當(dāng)前組件的state 并不會(huì)重復(fù)出發(fā)render
shouldComponentUpdate(nextProps, nextState) componentWillUpdate render componentDidUpdate 決定是否更新 提升性能
componentWillUnmount 卸載 清空定時(shí)任務(wù) 網(wǎng)絡(luò)請(qǐng)求等
如何配置React-Router?
1.標(biāo)簽的方式: BrowserRouter/HashRouter Router Switch exact Route path component this.props.children redirect 通過(guò) path 跟 Component 對(duì)應(yīng)的方式
2.對(duì)象配置的方式: {path component indexRoute childRoutes onLeave onEnter }
3.按需加載的方式配置路由 提升性能 Route 可以定義 getIndexRoute getComponents getChildRoutes 幾個(gè)異步函數(shù) 只有需要的時(shí)候才調(diào)用
路由的動(dòng)態(tài)加載模塊?
根據(jù)路由組件打包成多個(gè) bundle，只有在點(diǎn)擊到對(duì)應(yīng)的 Route 時(shí)，這個(gè) bundle 才會(huì)被加載
webpack babel-plugin-systax-dynamic-import react-loadable
1 | <Route exact path="/settings" |
服務(wù)端渲染SSR ?
主要是利于SEO 減少首頁(yè)白屏
理解: 通過(guò)后臺(tái)(新的 renderToNodeStream 替代 原始的 renderToString)最后返回已經(jīng)把數(shù)據(jù)處理好的 html 頁(yè)面(link => css, div#root, script)
css-modules-require-hook/preset (csshook) 處理 css 引入
express body-parser cookie-parser 處理 js
react-router-dom 處理后端路由
react react-dom 解析jsx語(yǔ)法
redux react-redux react-thunk 處理 全局?jǐn)?shù)據(jù) (createStore applyMiddleware compose)
介紹路由的history?
它屬于 Bom 瀏覽器對(duì)象, 常用來(lái)原生實(shí)現(xiàn)路由跳轉(zhuǎn)但是不刷新頁(yè)面的功能 記錄瀏覽歷史記錄 用來(lái)實(shí)現(xiàn)前進(jìn)后退的功能,
中間可以做一些數(shù)據(jù)處理,與信息提示
H5新增了兩個(gè)API: history.pushState 和 history.replaceState
接收3個(gè)參數(shù) (狀態(tài)對(duì)象object, 標(biāo)題title, 地址url)
介紹Redux數(shù)據(jù)流的流程?
view => action/dispatch => store(reducer) => view
Redux如何實(shí)現(xiàn)多個(gè)組件之間的通信，多個(gè)組件使用相同狀態(tài)如何進(jìn)行管理 ?
react-redux(Provider 傳入到最外層組件store 在需要用到的地方 用 connect 獲取 (mapStateToProps, mapDispatchToProps) 在頁(yè)面中引用)
類(lèi)似發(fā)布訂閱模式, 一個(gè)地方修改了這個(gè)值, 其他所有使用了這個(gè)相同狀態(tài)的地方也會(huì)更改
多個(gè)組件之間如何拆分各自的state，每塊小的組件有自己的狀態(tài)，它們之間還有一些公共的狀態(tài)需要維護(hù)，如何思考這塊?
一個(gè)全局的 reducer , 頁(yè)面級(jí)別的 reducer , 然后redux 里有個(gè) combineReducers 把所有的 reducer 合在一起,小組件的使用與全局的使用是分開(kāi)的互不影響
使用過(guò)的Redux中間件?
redux react-redux redux-thunk(把a(bǔ)ction 返回的對(duì)象 換成一個(gè)異步函數(shù)) redux-saga
如何解決跨域的問(wèn)題?
iframe nginx node jsonp cors(在header中 設(shè)置 Access-Control-Allow-Origin)
H5的 window.postMessage
常見(jiàn)Http請(qǐng)求頭?
:authority: www.cnblogs.com
:method: GET
:path: /mvc/blog/ViewCountCommentCout.aspx?postId=6958181
:scheme: https
accept: application/json, text/javascript, /; q=0.01
accept-encoding: gzip, deflate, br
accept-language: zh-CN,zh;q=0.9,en;q=0.8
content-type: text
cookie: ‘’,
token: ‘’,
referer: https://www.cnblogs.com/,
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
x-requested-with: XMLHttpRequest
移動(dòng)端適配1px的問(wèn)題?
代碼生成 0.5px 像素邊框 頁(yè)面展示的時(shí)候就是 1px 大小了
縮放 transform: scaleY(0.5)
虛線(xiàn) background: linear-gradient(0 deg, #fff, #000)
邊框陰影 box-shadow: 0 0.5px 0 #000;
圖片 svg圖片 base64 的細(xì)線(xiàn)
介紹flex布局?
display: flex , direction row colum 設(shè)置主軸和垂直的軸
just-comtent aligin-items 來(lái)設(shè)置兩個(gè)軸的元素節(jié)點(diǎn)
其他css方式設(shè)置垂直居中?
父元素 line-height 與 height 同高
transform: translate(-50%, -50%)
just-comtent:center aligin-items:center
居中為什么要使用transform（為什么不使用marginLeft/Top?
相對(duì)于自生元素的大小 更加可控
使用過(guò)webpack里面哪些 plugin 和 loader?
plugin:
DllReferencePlugin => 生成 manifest.json 文件 利于緩存頁(yè)面數(shù)據(jù)
html-webpack-plugin => 把帶hash的dll js/css插入到html中
copy-webpack-plugin => 把 src 目錄外的文件(static) 引入到 dist 目錄里
happypack => 因?yàn)閖s是單線(xiàn)程的 多進(jìn)程來(lái)分別執(zhí)行這些線(xiàn)程 完成的時(shí)候在 event loop 中返回給 webpack 處理 提高打包效率
webpack-bundle-analyzer => 用來(lái)分析打包的大小 針對(duì)性的去處理文件
DefinePlugin => 注入一些全局的 config 區(qū)分開(kāi)發(fā)和生產(chǎn)
mini-css-extract-plugin => 壓縮 css 代碼
loader:
url-loader => 小圖片轉(zhuǎn)化成 base64 進(jìn)行加載
styly-loader css-loader postcss-loader less-loader => 處理 css
eslint-loader => 代碼檢查
vue-loader react-loader => 處理框架的語(yǔ)法
webpack里面的插件是怎么實(shí)現(xiàn)的?
插件開(kāi)發(fā)，最重要的兩個(gè)對(duì)象：compiler、compilation
compiler.plugin(‘***’)就相當(dāng)于給compiler設(shè)置了事件監(jiān)聽(tīng)
所以compiler.plugin(‘compile’)就代表：當(dāng)編譯器監(jiān)聽(tīng)到compile事件時(shí)，我們應(yīng)該做些什么
compilation（’編譯器’對(duì)’編譯ing’這個(gè)事件的監(jiān)聽(tīng)）相當(dāng)于對(duì)編譯過(guò)程的監(jiān)聽(tīng)
compiler.plugin(“emit”, function(compilation, callback) {} 最后執(zhí)行 emit 輸出的回調(diào)函數(shù) callback
dev-server是怎么跑起來(lái)?
這個(gè)用 node 搭建本地資源服務(wù)器類(lèi)似的
devServer: {
contentBase: ‘./‘, 服務(wù)器搭建在當(dāng)前目錄
historyApiFallback:true,
inline：true,
hot：true,
port: 8080
}
項(xiàng)目?jī)?yōu)化?
項(xiàng)目的優(yōu)化是一根線(xiàn)上的優(yōu)化, 即從一個(gè)網(wǎng)址請(qǐng)求到頁(yè)面渲染的各個(gè)相關(guān)的環(huán)節(jié)都有優(yōu)化, 這個(gè)還包括項(xiàng)目代碼的優(yōu)化
DNS 解析
TCP 連接
HTTP 請(qǐng)求拋出
服務(wù)端處理請(qǐng)求，HTTP 響應(yīng)返回
瀏覽器拿到響應(yīng)數(shù)據(jù)，解析響應(yīng)內(nèi)容，把解析的結(jié)果展示給用戶(hù)
(構(gòu)建功能及性能優(yōu)化, 圖片優(yōu)化, 瀏覽器緩存, 離線(xiàn)存儲(chǔ)技術(shù), 服務(wù)端渲染, css性能方案, js性能方案, 重繪回流, 事件循環(huán)異步更新,懶加載, 事件節(jié)流與防抖)
抽取公共文件是怎么配置的?
用 webpack 打包 處理 dll
1 | new webpack.DllReferencePlugin({ |
項(xiàng)目中如何處理安全問(wèn)題?
HTTPS請(qǐng)求
登陸的時(shí)候加圖片驗(yàn)證 ,一般的登陸密碼等 加 md5 加鹽處理
重要數(shù)據(jù)的防爬蟲(chóng)的頁(yè)面數(shù)據(jù)組合展示
所有的請(qǐng)求在 http header 里 帶上 token
怎么實(shí)現(xiàn)this對(duì)象的深拷貝?
var obj1 = { body: { a: 10 } }
var obj2 = JSON.parse(JSON.stringify(obj1))
lodash.cloneDeep()
Object.create()
1 | var obj = finalObj || {} |
vue 的雙向綁定的原理是什么 ?
vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。
具體步驟：
第一步：需要 observe 的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上 setter 和 getter
這樣的話(huà)，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化
第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己
2、自身必須有一個(gè)update()方法
3、待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的 update() 方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。
第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化，通過(guò)Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果
————————— 網(wǎng)易 —————————
介紹redux，主要解決什么問(wèn)題?
不好用 props 去傳遞使用的一些公共的數(shù)據(jù)的管理
文件上傳如何做斷點(diǎn)續(xù)傳?
用 H5 的 File api
先得獲得一個(gè)文件ID 文件HASH值的思路就是：MD5（文件名稱(chēng) 文件長(zhǎng)度 文件修改時(shí)間 自定義的瀏覽器ID）
在上傳文件之前，從服務(wù)端查詢(xún)文件的斷點(diǎn)續(xù)傳信息, 決定從什么位置上傳數(shù)據(jù)
關(guān)鍵技術(shù)點(diǎn)是：從上次上傳的長(zhǎng)度位置上傳
var blob = fileObj.slice(start_offset,filesize)
function upload_file(fileObj, start_offset, fileid){}
表單可以跨域嗎?
本身是不能跨域的, 提交 action 是一步性操作, 可以模擬 post 方法進(jìn)行跨域請(qǐng)求
promise、async有什么區(qū)別?
異步編程的最高境界，就是根本不用關(guān)心它是不是異步
async 能夠 使異步事件用同步的方法寫(xiě), 不用寫(xiě)太多嵌套代碼,代碼可讀性更高
錯(cuò)誤抓取 Promise.catch(){} try {} catch {}
promise的箭頭函數(shù)中不能打斷點(diǎn), async 只關(guān)心返回的結(jié)果
搜索請(qǐng)求如何處理（防抖）?
防抖 : 是限制下次函數(shù)調(diào)用之前必須等待的時(shí)間間隔(300ms)。將若干個(gè)函數(shù)調(diào)用合成 一次，并在給定時(shí)間過(guò)去之后僅被調(diào)用一次
節(jié)流: 節(jié)流函數(shù)允許一個(gè)函數(shù)在規(guī)定的時(shí)間內(nèi)只執(zhí)行一次
搜索請(qǐng)求中文如何請(qǐng)求?
把中文 替換成字符編碼 再發(fā)請(qǐng)求
介紹觀察者模式?
把自己注入到被觀察的對(duì)象里, 對(duì)象改變某個(gè)數(shù)據(jù)的時(shí)候, 調(diào)用自己的update函數(shù)更新相應(yīng)的狀態(tài), 強(qiáng)耦合的方式
觀察者和訂閱-發(fā)布的區(qū)別，各自用在哪里?
兩者的主要區(qū)別是調(diào)度的地方不同 訂閱發(fā)布模式比觀察者模式，中間多一個(gè)“調(diào)度中心”。因此更解耦，所以常見(jiàn)系統(tǒng)中，訂閱發(fā)布模式能讓業(yè)務(wù)更清晰
觀察者模式是由具體目標(biāo)調(diào)度的 而發(fā)布/訂閱模式是統(tǒng)一由調(diào)度中心調(diào)的，所以觀察者模式的訂閱者與發(fā)布者之間是存在依賴(lài)的，而發(fā)布/訂閱模式則不會(huì)
可以把restful請(qǐng)求的通信方式，看做觀察者模式的應(yīng)用；而服務(wù)總線(xiàn)（MQ）的方式，則是訂閱發(fā)布模式
介紹中介者模式?
中介對(duì)象主要是用來(lái)封裝行為的，行為的參與者就是那些對(duì)象，但是通過(guò)中介者，這些對(duì)象不用相互知道(機(jī)場(chǎng)交通控制系統(tǒng))
中介者模式與業(yè)務(wù)相關(guān)，訂閱/發(fā)布模式與業(yè)務(wù)無(wú)關(guān)
雖然實(shí)現(xiàn)結(jié)構(gòu)非常相像，但是很明顯的是，中介者模式參與業(yè)務(wù)相關(guān)東西，所以?xún)?nèi)容是大相徑庭的
介紹react優(yōu)化?
this的綁定方法 在constructor中綁定事件
在父組件因狀態(tài)的變化更改，而子組件并沒(méi)有狀態(tài)變化時(shí), 不讓子組件render shouldComponentUpdate(nextProps, nextState) React.PureComponent 替換 React.Component
加key
redux性能優(yōu)化 使用reselect庫(kù) 在調(diào)用到已經(jīng)執(zhí)行過(guò)的數(shù)據(jù)時(shí)，react不會(huì)再次對(duì)數(shù)據(jù)進(jìn)行渲染，而是從reselector中取出緩存數(shù)據(jù)加載，減少了重新渲染，達(dá)到性能優(yōu)化的效果
用函數(shù)子組件進(jìn)行UI和邏輯的分離, 拆分成更小組件, 數(shù)據(jù)的變更改變盡量少的組件
一些與狀態(tài)無(wú)關(guān)的屬性不要放在state里, 避免數(shù)據(jù)改變重新渲染dom
介紹http2.0?
HTTP2.0相比HTTP1.1可以給用戶(hù)帶來(lái)更佳的用戶(hù)體驗(yàn)
新增 二進(jìn)制分幀傳輸 改進(jìn)傳輸性能，實(shí)現(xiàn)低延遲和高吞吐量
壓縮頭部 用 首部表 來(lái)跟蹤和存儲(chǔ)之間發(fā)送的 鍵-值 對(duì)
多路復(fù)用 并行請(qǐng)求
服務(wù)端推送（Server Push）
通過(guò)什么做到并發(fā)請(qǐng)求?
改接口讓后臺(tái)一次請(qǐng)求查詢(xún)更多的數(shù)據(jù),減少請(qǐng)求
并行改為串行
jquery 的 var d2 = $.Deferred()
使用 promise.all 統(tǒng)一處理所有的請(qǐng)求數(shù)據(jù)
http1.1時(shí)如何復(fù)用tcp連接?
tcp 長(zhǎng)連接 本來(lái)就是復(fù)用的
介紹service worker
服務(wù)端推送消息 不用輪詢(xún)
redux請(qǐng)求中間件如何處理并發(fā)
還是那一套吧, 防抖 節(jié)流 合并請(qǐng)求 promise.all等
介紹Promise，異常捕獲
Promise.catch() promise.then().catch() try{}catch{}
介紹position屬性包括CSS3新增
static fixed absolute relative inherit
position:sticky
該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置
當(dāng)元素在容器中被滾動(dòng)超過(guò)指定的偏移值時(shí)，元素在容器內(nèi)就固定在指定位置
元素固定的相對(duì)偏移是相對(duì)于離它最近的具有滾動(dòng)框的祖先元素，如果祖先元素都不可以滾動(dòng)，那么是相對(duì)于viewport來(lái)計(jì)算元素的偏移量
瀏覽器事件流向?
事件捕獲 處于目標(biāo) 事件冒泡
介紹事件代理以及優(yōu)缺點(diǎn)?
事件代理發(fā)生在事件冒泡的處理上 , 可以不用每個(gè)子元素都綁定事件處理的方法, 動(dòng)態(tài)的子元素也可以觸發(fā)冒泡
如果把所有事件都用事件代理，可能會(huì)出現(xiàn)事件誤判,
React組件中怎么做事件代理,及其原理?
區(qū)別于瀏覽器事件處理方式，React并未將事件處理函數(shù)與對(duì)應(yīng)的DOM節(jié)點(diǎn)直接關(guān)聯(lián)，而是在頂層使用了一個(gè)全局事件監(jiān)聽(tīng)器監(jiān)聽(tīng)所有的事件
React會(huì)在內(nèi)部維護(hù)一個(gè)映射表記錄事件與組件事件處理函數(shù)的對(duì)應(yīng)關(guān)系
當(dāng)某個(gè)事件觸發(fā)時(shí)，React根據(jù)這個(gè)內(nèi)部映射表將事件分派給指定的事件處理函數(shù)
當(dāng)映射表中沒(méi)有事件處理函數(shù)時(shí)，React不做任何操作
當(dāng)一個(gè)組件安裝或者卸載時(shí)，相應(yīng)的事件處理函數(shù)會(huì)自動(dòng)被添加到事件監(jiān)聽(tīng)器的內(nèi)部映射表中或從表中刪除
介紹this各種情況?
指向當(dāng)前function object對(duì)象 react組件實(shí)例 window
前端怎么控制管理路由?
標(biāo)簽的方式 對(duì)象配置的方式 動(dòng)態(tài)路由
使用路由時(shí)出現(xiàn)問(wèn)題如何解決?
Switch匹配 最后一個(gè)路由放404的頁(yè)面
全局的路由攔截, 例如登陸token的校驗(yàn)
React怎么做數(shù)據(jù)的檢查和變化?
prop-types 第三方插件檢查數(shù)據(jù)的類(lèi)型 以及 isRequired 必須傳入
componentWillRecieveProps(nextProps) 對(duì)比傳入數(shù)據(jù)的變化
————————— 滴滴 —————————
react-router怎么實(shí)現(xiàn)路由切換?
定義路由的時(shí)候path 和 component 一一對(duì)應(yīng), 頁(yè)面的路由改變 就加載對(duì)應(yīng)的組件
a標(biāo)簽 this.props.history.push(‘path’) withRouter(Component) window.$history.push(‘path’)
react-router里的標(biāo)簽和
React層面的性能優(yōu)化?
整個(gè)前端性能提升大致分幾類(lèi)?
import { Button } from ‘a(chǎn)ntd’，打包的時(shí)候只打包button，分模塊加載，是怎么做到的?
webpack 打包前會(huì)把所有的組件 分成一個(gè)個(gè)的小 chunk
當(dāng)頁(yè)面加載的時(shí)候再用 getComponents方法 引入到項(xiàng)目里, 實(shí)現(xiàn)分模塊加載
使用import時(shí)，webpack對(duì)node_modules里的依賴(lài)會(huì)做什么?
一般直接引入組件 不做壓縮編譯等 設(shè)置loader 的時(shí)候 exclude: /node_modules/
JS異步解決方案的發(fā)展歷程以及優(yōu)缺點(diǎn)?
function(callback){} promise.then().catch() promise.all([]) generater/yield async/await
Http報(bào)文的請(qǐng)求會(huì)有幾個(gè)部分?
請(qǐng)求行 請(qǐng)求頭 數(shù)據(jù)體
狀態(tài)行 HTTP/1.1 200 ok，響應(yīng)頭，響應(yīng)正文
cookie放哪里，cookie能做的事情和存在的價(jià)值?
后端生成 放在 http的請(qǐng)求頭里 一般5k大小 用于身份認(rèn)證的功能 攜帶少量的信息 每次請(qǐng)求都會(huì)帶上
cookie和token都存放在header里面，為什么只劫持前者?
cookie 每次請(qǐng)求都會(huì)帶上 內(nèi)容主要包括：名字，值，過(guò)期時(shí)間，路徑和域,cookie是有狀態(tài)的 被劫持不安全, 可以設(shè)置httpOnly 防止 cors
token可以設(shè)置失效時(shí)間, 是無(wú)狀態(tài)的 被劫持后危險(xiǎn)性要低一些, 在跨端能力上更好
cookie和session有哪些方面的區(qū)別?
cookie 機(jī)制采用的是在客戶(hù)端保持狀態(tài)的方案 session 機(jī)制采用的是在服務(wù)器端保持狀態(tài)的方案
cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙 考慮到安全應(yīng)當(dāng)使用session
session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪(fǎng)問(wèn)增多，會(huì)比較占用你服務(wù)器的性能 考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE
單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie
將登陸信息等重要信息存放為SESSION 其他信息如果需要保留，可以放在COOKIE中
React中Dom結(jié)構(gòu)發(fā)生變化后內(nèi)部經(jīng)歷了哪些變化?
diff算法對(duì)比虛擬dom與現(xiàn)在視圖dom, 計(jì)算哪些節(jié)點(diǎn)需要重新渲染 算出最小操作集 然后到組件 render
React掛載的時(shí)候有3個(gè)組件，textComponent、composeComponent、domComponent，區(qū)別和關(guān)系，
Dom結(jié)構(gòu)發(fā)生變化時(shí)怎么區(qū)分data的變化，怎么更新，更新怎么調(diào)度，如果更新的時(shí)候還有其他任務(wù)存在怎么處理?
ReactClass
他們都接收node參數(shù)
如果node是null，則生成ReactDOMEmptyComponent
如果node是數(shù)字或字符串，則生成eactDOMTextComponent
如果傳入的node是一個(gè)對(duì)象，是ReactElement對(duì)象,分別生成ReactDOMComponent和ReactCompositeComponent
雖然是不同的對(duì)象，但是都實(shí)現(xiàn)了mountComponent,receiveComponent和unmountComponent三個(gè)關(guān)鍵的方法
mountComponent方法用于把ReactElement轉(zhuǎn)化為HTML標(biāo)記，最終掛載到DOM上，而經(jīng)瀏覽器解析后的DOM元素，就是用戶(hù)視角看到的React組件了
更新的時(shí)候,繼續(xù)diff 算法 同上
key主要是解決哪一類(lèi)的問(wèn)題，為什么不建議用索引index（重繪）?
循環(huán)渲染子元素 加個(gè)key值使diff算法更快, 使用index的話(huà), 當(dāng)數(shù)組增刪的時(shí)候, dom元素對(duì)應(yīng)index改變 會(huì)出現(xiàn)渲染的問(wèn)題
Redux中異步的請(qǐng)求怎么處理?
react-thunk react-saga 把返回action對(duì)象 改成異步函數(shù)處理并返回
Redux中間件是什么東西，接受幾個(gè)參數(shù)（兩端的柯里化函數(shù)）?
中間件是怎么拿到store和action，然后怎么處理?
處理異步函數(shù) 打印logger信息等
1 | const logger = store => next => action => { |
柯里化函數(shù)兩端的參數(shù)具體是什么東西?
middleware(store)(dispatch) 第二個(gè)括號(hào)內(nèi)的（dispatch），傳遞給了具體函數(shù)的next
state是怎么注入到組件的，從reducer到組件經(jīng)歷了什么樣的過(guò)程?
react-redux connect(state, dispatch)(component)
store => reducers => value => this.props
koa中response.send、response.rounded、response.json發(fā)生了什么事，瀏覽器為什么能識(shí)別到它是一個(gè)json結(jié)構(gòu)或是html?
koa-bodyparser怎么來(lái)解析request?
1 | var Koa = require('koa') |
webpack整個(gè)生命周期，loader和plugin有什么區(qū)別?
對(duì)于loader，它就是一個(gè)轉(zhuǎn)換器，將A文件進(jìn)行編譯形成B文件，這里操作的是文件，比如將A.scss或A.less轉(zhuǎn)變?yōu)锽.css，單純的文件轉(zhuǎn)換過(guò)程
對(duì)于plugin，它就是一個(gè)擴(kuò)展器，它豐富了wepack本身，針對(duì)是loader結(jié)束后，webpack打包的整個(gè)過(guò)程，它并不直接操作文件，而是基于事件機(jī)制工作，會(huì)監(jiān)聽(tīng)webpack打包過(guò)程中的某些節(jié)點(diǎn)
run：開(kāi)始編譯
make：從entry開(kāi)始遞歸分析依賴(lài)并對(duì)依賴(lài)進(jìn)行build
build-moodule：使用loader加載文件并build模塊
normal-module-loader：對(duì)loader加載的文件用acorn編譯，生成抽象語(yǔ)法樹(shù)AST
program：開(kāi)始對(duì)AST進(jìn)行遍歷，當(dāng)遇到require時(shí)觸發(fā)call require事件
seal：所有依賴(lài)build完成，開(kāi)始對(duì)chunk進(jìn)行優(yōu)化（抽取公共模塊、加hash等）
optimize-chunk-assets：壓縮代碼
emit：把各個(gè)chunk輸出到結(jié)果文件
通過(guò)對(duì)節(jié)點(diǎn)的監(jiān)聽(tīng)，從而找到合適的節(jié)點(diǎn)對(duì)文件做適當(dāng)?shù)奶幚?/p>
介紹AST（Abstract Syntax Tree）抽象語(yǔ)法樹(shù)?
虛擬dom 類(lèi)似 render(‘div’, ‘data-‘, text)
安卓Activity之間數(shù)據(jù)是怎么傳遞的?
Activity_1利用Intent的putExtra()方法來(lái)攜帶數(shù)據(jù)，然后Activity_2通過(guò)Intent的getExtra()方法來(lái)獲取Activity_1傳遞過(guò)來(lái)的數(shù)據(jù)
利用startActivityForResult()這個(gè)方法來(lái)啟動(dòng)Activity_2,然后Activity_2在利用Intent和setResult()方法來(lái)向Activity_1傳送數(shù)據(jù)，最后，Activity_1通過(guò)回調(diào)方法onActivityResult()來(lái)接收Activity_2數(shù)據(jù)
WebView和原生是如何通信?
1.JSbridge：:(webviewJavascriptBridge)一種js與原生native通信的機(jī)制，可以h5與native互調(diào)
2.Cordova
跨域怎么解決，有沒(méi)有使用過(guò)Apache等方案?
node代理 nginx cors
啟用Apache 的 proxy module反向代理解決js跨域問(wèn)題
配置完成之后，訪(fǎng)問(wèn) http://localhost/project 實(shí)際就是訪(fǎng)問(wèn) http://ip_address/project 上的資源 來(lái)實(shí)現(xiàn)跨域
vue 的雙向綁定的原理是什么 ?
vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。
具體步驟：
第一步：需要 observe 的數(shù)據(jù)對(duì)象進(jìn)行遞歸遍歷，包括子屬性對(duì)象的屬性，都加上 setter 和 getter
這樣的話(huà)，給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter，那么就能監(jiān)聽(tīng)到了數(shù)據(jù)變化
第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽(tīng)數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己
2、自身必須有一個(gè)update()方法
3、待屬性變動(dòng)dep.notice()通知時(shí)，能調(diào)用自身的 update() 方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。
第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model數(shù)據(jù)變化，通過(guò)Compile來(lái)解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果
—————- 今日頭條-有贊-挖財(cái) —————-
————————— 今日頭條 —————————
對(duì)async、await的理解，內(nèi)部原理?
async、await 是一種異步編程的解決方式
await/async和yield都被編譯器在編譯時(shí)轉(zhuǎn)化為了狀態(tài)機(jī)
因?yàn)?C# 和 .NET 都提供了這個(gè)功能)
介紹下Promise，內(nèi)部實(shí)現(xiàn)?
是一種異步解決方案,簡(jiǎn)單點(diǎn)就是一個(gè)容器,狀態(tài)機(jī)
內(nèi)部實(shí)現(xiàn) 就是 pending => fullield rejected 用 then(f1, f2)
清除浮動(dòng)?
1 | ::before, ::after { |
定位問(wèn)題（絕對(duì)定位、相對(duì)定位等）?
從輸入U(xiǎn)RL到頁(yè)面加載全過(guò)程?
tcp3次握手?
tcp屬于哪一層（1 物理層 -> 2 數(shù)據(jù)鏈路層 -> 3 網(wǎng)絡(luò)層(ip)-> 4 傳輸層(tcp) -> 5 應(yīng)用層(http)）?
redux的設(shè)計(jì)思想 ?
一個(gè)全局的狀態(tài)管理中心, 不用一步一步的 props 傳遞數(shù)據(jù), 使數(shù)據(jù)的使用更加方便
接入redux的過(guò)程? 綁定connect的過(guò)程? connect原理?
react-redux 提供的兩個(gè)api Provider標(biāo)簽中 傳入全局的store store里面有reducer 里面有對(duì)應(yīng)的 action的處理方法 用戶(hù)使用是,通過(guò)connect(mapStateToProps, mapDispatchToProps)(component) 傳入到組件中
每一個(gè)action-types 都有對(duì)應(yīng)的修改store 里的state的方法
webpack介紹?
Webpack 是一種 模塊化的 打包方案
把所有的代碼都模塊化, 通過(guò)統(tǒng)一的入口文件(一般是app.js), 打包出統(tǒng)一的出口
根據(jù) loader plugin 來(lái)個(gè)性化打包的 方法 插件 滿(mǎn)足不同的項(xiàng)目需求
== 和 ===的區(qū)別，什么情況下用相等==?
== 會(huì)進(jìn)行隱式轉(zhuǎn)換
=== 得判斷數(shù)據(jù)的類(lèi)型是否相同
現(xiàn)在 基本上不用 ==, 不曉得什么情況下能用吧
bind、call、apply的區(qū)別?
都是指定函數(shù)的this指向, 來(lái)讓函數(shù)實(shí)現(xiàn)自身沒(méi)有的方法
bind 底層還是 call apply 的封裝
call 參數(shù)是一個(gè)一個(gè)的, apply 參數(shù)是數(shù)組
動(dòng)畫(huà)的了解?
介紹下原型鏈（解決的是繼承問(wèn)題嗎）?
繼承: 原型鏈繼承、借用構(gòu)造函數(shù)繼承(call, apply)、組合繼承
原型鏈繼承 只是繼承的一種方式
對(duì)跨域的了解?
————————— 有贊 —————————
Linux 754 介紹?
最后一層目錄權(quán)限為754, 直接進(jìn)入到最后一層目錄 chmod 754 5/4/3/2/1
介紹冒泡排序，選擇排序，冒泡排序如何優(yōu)化?
冒泡排序:
1.依次兩兩比較相鄰的元素，如果第一個(gè)比第二個(gè)大，則進(jìn)行交換
2.經(jīng)過(guò)第一輪比較之后，最大的數(shù)已經(jīng)出現(xiàn)在數(shù)組最后一個(gè)位置了
3.然后再對(duì)除了最后一個(gè)元素外的所有數(shù)都重復(fù)一遍上述比較，結(jié)束后第二個(gè)的數(shù)會(huì)到達(dá)數(shù)組倒數(shù)第二個(gè)位置
4.再依次對(duì)剩下的數(shù)進(jìn)行重復(fù)，直到排序完畢
1 | for (let j = 0; j < arr.length - i; j ) {} |
優(yōu)化: 在第一層循環(huán)內(nèi)加個(gè) bool = true 在第二個(gè)循環(huán)的 if 里如果交換 就設(shè)置 bool = false
選擇排序:
1.從數(shù)組的開(kāi)頭起，將第一個(gè)元素和其他所有元素都進(jìn)行一次比較，選擇出最小的元素放在數(shù)組的第一個(gè)位置
2.然后再?gòu)牡诙€(gè)元素開(kāi)始，將第二個(gè)元素和除第一個(gè)之外的所有元素進(jìn)行一次比較，選擇出最小的元素放在數(shù)組的第二個(gè)位置
3.對(duì)后面的第三，第四……的元素分別重復(fù)上面的步驟，直到所有的數(shù)據(jù)完成排序
transform動(dòng)畫(huà)和直接使用left、top改變位置有什么優(yōu)缺點(diǎn)?
設(shè)置一次的初始末尾位置, 用瀏覽器的GPU去處理動(dòng)畫(huà), 頁(yè)面更加流暢, 減少頁(yè)面的重繪和回流 性能更高
如何判斷鏈表是否有環(huán)?
“快慢指針”: 用兩個(gè)指針 fast 每次走兩步 slow 每次走一步; 當(dāng) fast 再次與 slow 相遇的時(shí)候 就說(shuō)明鏈表有環(huán)
介紹二叉搜索樹(shù)的特點(diǎn)?
二叉樹(shù)就是樹(shù)的每個(gè)節(jié)點(diǎn)最多只能有兩個(gè)子節(jié)點(diǎn)
二叉搜索樹(shù)由于其獨(dú)特的數(shù)據(jù)結(jié)構(gòu)，使得其無(wú)論在增刪，還是查找，時(shí)間復(fù)雜度都是O(h)，h為二叉樹(shù)的高度。因此二叉樹(shù)應(yīng)該盡量的矮，即左右節(jié)點(diǎn)盡量平衡
介紹暫時(shí)性死區(qū) ?
let const 變量申明前引用報(bào)錯(cuò) 只能申明一次變量 不會(huì)變量提升 按申明的位置開(kāi)始起作用
ES6中的Map和原生的對(duì)象有什么區(qū)別?
Object的鍵只能是字符串，Map的鍵可以是任意類(lèi)型的值（包括對(duì)象），所以Map是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)
觀察者和發(fā)布-訂閱的區(qū)別?
觀察者: 多個(gè)對(duì)一個(gè)的觀察 并更新
發(fā)布-訂閱: 一個(gè)通過(guò)調(diào)度中心對(duì)多個(gè)的 通知
react異步渲染的概念,介紹Time Slicing 和 Suspense?
一個(gè)組件不會(huì)阻塞其他組件的渲染, 但是會(huì)異步的
如果設(shè)備網(wǎng)速夠快的話(huà), 感覺(jué)上是同步的
異步的渲染頁(yè)面,只展示最終的渲染狀態(tài), 就是等待頁(yè)面的數(shù)據(jù)獲取到了之后, 再一次性的把頁(yè)面渲染出來(lái), 如果是多個(gè)請(qǐng)求的數(shù)據(jù),可以先渲染出來(lái) (有點(diǎn)把后端服務(wù)端渲染的頁(yè)面 放到前端來(lái)渲染的感覺(jué), 中間請(qǐng)求數(shù)據(jù)的時(shí)候 給一個(gè)請(qǐng)求提示)
react生命周期的改變?
react中props改變后在哪個(gè)生命周期中處理?
componentWillReciveProps => shouldComponentUpdate
介紹純函數(shù)?
就是 return 一個(gè)jsx 語(yǔ)法的模塊 , 不 extends React.Component, 不用組件實(shí)例化, 也沒(méi)有生命周期, 無(wú)state，只有props 純渲染的, 效率更高
前端性能優(yōu)化?
pureComponent 和 FunctionComponent 區(qū)別?
一個(gè)是為了提高性能的淺比較組件, 一個(gè)是可以純函數(shù)組件或者高階組件
介紹JSX?
1 | // 利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM。 |
如何做RN在安卓和IOS端的適配?
RN為什么能在原生中繪制成原生組件（bundle.js）?
介紹虛擬DOM?
含有標(biāo)簽的屬性和方法的一個(gè)node節(jié)點(diǎn)對(duì)象
如何設(shè)計(jì)一個(gè)localStorage，保證數(shù)據(jù)的實(shí)效性?
是一種你不主動(dòng)清除它，它會(huì)一直將存儲(chǔ)數(shù)據(jù)存儲(chǔ)在客戶(hù)端的存儲(chǔ)方式, 為了數(shù)據(jù)的時(shí)效性, 可以和數(shù)據(jù)一起存一個(gè)data時(shí)間戳, 也可以是token等
localStorage.setItem(‘date’,Json.stringIfy(date))
如何設(shè)計(jì)Promise.all()
介紹高階組件?
把基礎(chǔ)組件當(dāng)做函數(shù)參數(shù),傳入到函數(shù)中, 并做相應(yīng)的操作, 再渲染組件
sum(2, 3)實(shí)現(xiàn)sum(2)(3)的效果?
函數(shù)柯里化, 保證一次傳入更少的參數(shù), 做更加明確的事情
react性能優(yōu)化?
兩個(gè)對(duì)象如何比較是否相等?
1 | function diff(obj1,obj2){ |
————————— 挖財(cái) —————————
JS的原型?
prototype
變量作用域鏈?
以前的 var 聲明變量, 存在變量提升, 分為全局作用域和函數(shù)作用域, 按照作用域鏈從內(nèi)到外,往上查找
call、apply、bind的區(qū)別?
防抖和節(jié)流的區(qū)別?
介紹各種異步方案?
react生命周期?
介紹Fiber?
React Fibre是React核心算法正在進(jìn)行的重新實(shí)現(xiàn) fiber代表一個(gè)工作單元
React Fiber的目標(biāo)是提高其對(duì)動(dòng)畫(huà)，布局和手勢(shì)等領(lǐng)域的適用性
它的主體特征是增量渲染：能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個(gè)幀中
前端性能優(yōu)化?
介紹DOM樹(shù)對(duì)比?
diff 算法 一層一層往下比較
react中的key的作用?
有循環(huán)的時(shí)候 確定某一個(gè)虛擬 DOM 節(jié)點(diǎn), 可以幫助 diff 算法 更快的更新 虛擬DOM
如何設(shè)計(jì)狀態(tài)樹(shù)?
一個(gè)公共的reducer 然后就是各個(gè)頁(yè)面級(jí)別的reducer
介紹css，csrf?
xss 跨站腳本攻擊 客戶(hù)端輸入的腳本
csrf 跨站請(qǐng)求偽造 后臺(tái)模仿的請(qǐng)求攻擊
http緩存控制?
1.0 max-age 1.1 E-tag Last-Modified(If-Modified-Since) 看http那篇
項(xiàng)目中如何應(yīng)用數(shù)據(jù)結(jié)構(gòu)?
不是復(fù)雜的項(xiàng)目, 數(shù)據(jù)結(jié)構(gòu)應(yīng)該盡量簡(jiǎn)單
靜態(tài)數(shù)組適合元素不超過(guò)100的場(chǎng)合
動(dòng)態(tài)數(shù)組適合元素不超過(guò)1000的場(chǎng)合
鏈表適合元素不超過(guò)3000的場(chǎng)合
native提供了什么能力給RN?
如何做工程上的優(yōu)化?
shouldComponentUpdate是為了解決什么問(wèn)題?
解決了組件是否需要再次 render 渲染, 如果并不需要渲染, 可以提升渲染效率
如何解決props層級(jí)過(guò)深的問(wèn)題?
用 redux 全局狀態(tài)管理
頂層組件的 context this.context.屬性 去引用
前端怎么做單元測(cè)試?
mocha chai should
webpack生命周期?
webpack打包的整個(gè)過(guò)程?
webpack將創(chuàng)建所有應(yīng)用程序的依賴(lài)關(guān)系圖表。圖表的起點(diǎn)被稱(chēng)之為入口起點(diǎn)(entry point)
loader可以使你在require()或”加載”模塊時(shí)預(yù)處理文件。因此，loader類(lèi)似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法
由于loader僅在每個(gè)文件的基礎(chǔ)上執(zhí)行轉(zhuǎn)換，而插件(plugins)最常用于（但不限于）在打包模塊的“compilation”和“chunk”生命周期執(zhí)行操作和自定義功能，包括打包優(yōu)化壓縮及配置編譯時(shí)的變量等功能
將所有的資源(assets)歸攏在一起后，還需要告訴webpack在哪里打包應(yīng)用程序。webpack的output屬性描述了如何處理歸攏在一起的代碼(bundled code)
1 | output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js'} |
常用的plugins?
pm2怎么做進(jìn)程管理，進(jìn)程掛掉怎么處理 ?
PM2是一個(gè)帶有負(fù)載均衡功能的Node.js應(yīng)用的進(jìn)程管理器。它允許你永遠(yuǎn)保持應(yīng)用的存活,重新加載無(wú)需停機(jī)
不用pm2怎么做進(jìn)程管理
—————- 滬江-餓了么-攜程-喜馬拉雅 —————-
————————— 滬江 —————————
介紹下瀏覽器跨域?
協(xié)議 域名 端口號(hào) 的 同源同域策略來(lái)確保請(qǐng)求的安全性
怎么去解決跨域問(wèn)題?
jsonp方案需要服務(wù)端怎么配合?
配置返回的數(shù)據(jù)類(lèi)型必須是jsonp 類(lèi)型的，而不是json 類(lèi)型的,解決跨域必須在ajax 方法中dataType 設(shè)置為jsonp
客戶(hù)端js 代碼中ajax 方法還要設(shè)置jsonpCallback 這個(gè)屬性
Ajax發(fā)生跨域要設(shè)置什么（前端）?
Origin: https://blog.csdn.net
加上CORS之后從發(fā)起到請(qǐng)求正式成功的過(guò)程?
Request Method: OPTIONS 請(qǐng)求是否能行
Request Method: POST 發(fā)起請(qǐng)求
xsrf跨域攻擊的安全性問(wèn)題怎么防范?
是攻擊者通過(guò)一些技術(shù)手段欺騙用戶(hù)的瀏覽器去訪(fǎng)問(wèn)一個(gè)自己曾經(jīng)認(rèn)證過(guò)的網(wǎng)站并執(zhí)行一些操作（如發(fā)郵件，發(fā)消息，甚至財(cái)產(chǎn)操作如轉(zhuǎn)賬和購(gòu)買(mǎi)商品）
提交驗(yàn)證碼: 在表單中增加一個(gè)隨機(jī)的數(shù)字或字母驗(yàn)證碼，通過(guò)強(qiáng)制用戶(hù)和應(yīng)用進(jìn)行交互，來(lái)有效地遏制CSRF攻擊
Referer Check : 檢查如果是非正常頁(yè)面過(guò)來(lái)的請(qǐng)求，則極有可能是CSRF攻擊
token驗(yàn)證: 在 HTTP 請(qǐng)求中以參數(shù)的形式加入一個(gè)隨機(jī)產(chǎn)生的 token，并在服務(wù)器端建立一個(gè)攔截器來(lái)驗(yàn)證這個(gè) token，如果請(qǐng)求中沒(méi)有 token 或者 token 內(nèi)容不正確，則認(rèn)為可能是 CSRF 攻擊而拒絕該請(qǐng)求
在 HTTP 頭中自定義屬性并驗(yàn)證: 類(lèi)似cookie的方法
使用Async會(huì)注意哪些東西?
await 接收返回來(lái)的 Promise , 用在 try{}catch{} 中抓取錯(cuò)誤信息
Async里面有多個(gè)await請(qǐng)求，可以怎么優(yōu)化（請(qǐng)求是否有依賴(lài)）?
await promise.all([p1, p2]) 同時(shí)發(fā)起異步請(qǐng)求
Promise和Async處理失敗的時(shí)候有什么區(qū)別?
Promise、generator錯(cuò)誤都可以在構(gòu)造體里面被捕獲，而async/await返回的是promise,可以通過(guò)catch直接捕獲錯(cuò)誤
generator 拋出的錯(cuò)誤，以及await 后接的Promise.reject都必須被捕獲，否則會(huì)中斷執(zhí)行
Redux在狀態(tài)管理方面解決了React本身不能解決的問(wèn)題?
props 層級(jí)太深的問(wèn)題
Redux有沒(méi)有做過(guò)封裝?
一份store樹(shù)，離開(kāi)頁(yè)面再次進(jìn)入，數(shù)據(jù)不會(huì)初始化: (@修飾器) connectstore對(duì)ReactDom繼承注入action和store，重寫(xiě)componentWillUnmount生命周期，離開(kāi)頁(yè)面自動(dòng)觸發(fā)store初始化
react生命周期，常用的生命周期?
對(duì)應(yīng)的生命周期做什么事?
遇到性能問(wèn)題一般在哪個(gè)生命周期里解決?
shouldUpdateComponent
怎么做性能優(yōu)化（異步加載組件…）?
Time slicing upscape
寫(xiě)react有哪些細(xì)節(jié)可以?xún)?yōu)化?
React的事件機(jī)制（ 綁定到 document ）?
React組件上聲明的事件沒(méi)有綁定在React組件對(duì)應(yīng)的原生DOM節(jié)點(diǎn)上，而是綁定在document節(jié)點(diǎn)上，觸發(fā)的事件是對(duì)原生事件的包裝
主要包含事件注冊(cè)、觸發(fā)以及回調(diào)函數(shù)的存儲(chǔ)
ReactEventListener：負(fù)責(zé)事件注冊(cè)和事件分發(fā), React將DOM事件全都注冊(cè)到document節(jié)點(diǎn)上，事件分發(fā)主要調(diào)用dispatchEvent進(jìn)行，從事件觸發(fā)組件開(kāi)始，向父元素遍歷
ReactEventEmitter：負(fù)責(zé)每個(gè)組件上事件的執(zhí)行
EventPluginHub：負(fù)責(zé)回調(diào)函數(shù)的存儲(chǔ)
介紹下事件代理，主要解決什么問(wèn)題?
前端開(kāi)發(fā)中用到哪些設(shè)計(jì)模式?
單例模式: 購(gòu)物車(chē), 全局緩存
觀察者模式: 登錄頁(yè)面登錄后，會(huì)需要刷新各個(gè)模塊的信息（頭像、nav）這類(lèi)
工廠模式: 學(xué)生 課程 分?jǐn)?shù)
命令模式: 刷新菜單界面
策略模式: 商品打折
React/Redux中哪些功能用到了哪些設(shè)計(jì)模式?
代理模式: 事件的注冊(cè), 觸發(fā)
@connect: 裝飾器模式
一個(gè) store: 單例模式
appmidlleware(thunk, logger): 中介者模式
state => view : 發(fā)布訂閱者模式
JS變量類(lèi)型分為幾種，區(qū)別是什么?
值類(lèi)型 引用類(lèi)型
JS里垃圾回收機(jī)制是什么，常用的是哪種，怎么處理的?
標(biāo)記清除法: 函數(shù)聲明一個(gè)變量的時(shí)候，就將這個(gè)變量標(biāo)記為“進(jìn)入環(huán)境” 當(dāng)變量離開(kāi)環(huán)境時(shí)，則將其標(biāo)記為“離開(kāi)環(huán)境” 然后回收
引用計(jì)數(shù)法: 跟蹤記錄每個(gè)值被引用的次數(shù) 引用次數(shù)為0的值所占用的內(nèi)存就會(huì)被回收
一般怎么組織CSS（Webpack）
miniExtraCss()
style-loader css-loader postCss-loader less-loader
————————— 餓了么 —————————
小程序里面開(kāi)頁(yè)面最多多少?
每個(gè)小程序賬號(hào)僅支持配置最多20個(gè)域名
每個(gè)域名最多可綁定20個(gè)小程序
在公眾平臺(tái)后臺(tái)域名配置成功后，才可以使用web-view組件
React子父組件之間如何傳值?
props func
Emit事件怎么發(fā)，需要引入什么?
介紹下React高階組件，和普通組件有什么區(qū)別?
把組件當(dāng)參數(shù)傳入函數(shù)組件中, 作相應(yīng)的邏輯處理 再返回
一個(gè)對(duì)象數(shù)組，每個(gè)子對(duì)象包含一個(gè)id和name，React如何渲染出全部的name? map()
在哪個(gè)生命周期里寫(xiě)? render()
其中有幾個(gè)name不存在，通過(guò)異步接口獲取，如何做? 把對(duì)象放在 state 里, 先提示 loading , 獲取到了后 再渲染
渲染的時(shí)候key給什么值，可以使用index嗎，用id好還是index好? id; 數(shù)組增刪的時(shí)候 index 對(duì)應(yīng)的數(shù)據(jù)存在變化
webpack如何配sass，需要配哪些loader?
sass-loader node-sass
配css需要哪些loader
style-loader css-loader postCss-loader
如何配置把js、css、html單獨(dú)打包成一個(gè)文件?
js => bundle.js
css => miniCss => cope.js
html => router.page
div垂直水平居中（flex、絕對(duì)定位）?
兩個(gè)元素塊，一左一右，中間相距10像素,上下固定，中間滾動(dòng)布局如何實(shí)現(xiàn)?
[1, 2, 3, 4, 5]變成[1, 2, 3, a, b, 5]?
1 | const index = array.findIndex(4) |
取數(shù)組的最大值（ES5、ES6）?
Math.max(…[1,2,3])
apply和call的區(qū)別?
ES5和ES6有什么區(qū)別?
some、every、find、filter、map、forEach有什么區(qū)別?
上述數(shù)組隨機(jī)取數(shù)，每次返回的值都不一樣?
Math.random()
如何找0-5的隨機(jī)數(shù)，95-99呢?
1 | array.filter(item => item > 0 && item < 5) |
頁(yè)面上有1萬(wàn)個(gè)button如何綁定事件?
事件委托, 冒泡觸發(fā)
如何判斷是button?
冒泡的時(shí)候帶上 index
頁(yè)面上生成一萬(wàn)個(gè)button，并且綁定事件，如何做（JS原生操作DOM）
循環(huán)綁定時(shí)的index是多少，為什么，怎么解決?
9999 0 開(kāi)始
頁(yè)面上有一個(gè)input，還有一個(gè)p標(biāo)簽，改變input后p標(biāo)簽就跟著變化，如何處理?
監(jiān)聽(tīng)input的哪個(gè)事件，在什么時(shí)候觸發(fā)
onKeyup
————————— 攜程 —————————
對(duì)React看法，有沒(méi)有遇到一些坑?
pureComponent 只是淺比較
以及一些多次渲染的 render
對(duì)閉包的看法，為什么要用閉包?
增加了內(nèi)存的消耗
某些瀏覽器上因?yàn)榛厥諜C(jī)制的問(wèn)題，有內(nèi)存溢出風(fēng)險(xiǎn)
增加了代碼的復(fù)雜度，維護(hù)和調(diào)試不便
延長(zhǎng)作用域鏈
生成預(yù)編譯函數(shù)
更好的組織代碼，比如模塊化，異步代碼轉(zhuǎn)同步
setTimeout()(i) 問(wèn)題
手寫(xiě)數(shù)組去重函數(shù)?
new Set(arr) (可能有兼容性問(wèn)題)
arr.sort() 不相等 就push到新的數(shù)組中
利用對(duì)象的屬性不能相同的特點(diǎn)進(jìn)行去重
利用includes
手寫(xiě)數(shù)組扁平化函數(shù)?
就是把多維數(shù)組變成一維數(shù)組
1 | function flatten(arr) { |
介紹下Promise的用途和性質(zhì)?
Promise和Callback有什么區(qū)別?
React生命周期?
————————— 喜馬拉雅 —————————
ES6新的特性?
介紹Promise?
Promise有幾個(gè)狀態(tài)?
說(shuō)一下閉包?
React的生命周期?
componentWillReceiveProps的觸發(fā)條件是什么?
React16.3對(duì)生命周期的改變?
UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate
介紹下React的Filber架構(gòu)?
改變了之前react的組件渲染機(jī)制，新的架構(gòu)使原來(lái)同步渲染的組件現(xiàn)在可以異步化，可中途中斷渲染，執(zhí)行更高優(yōu)先級(jí)的任務(wù)。釋放瀏覽器主線(xiàn)程
畫(huà)Filber渲染樹(shù)?
就是組件的生命周期樹(shù), componentWillMount 一層一層的往下渲染 componentWillUnmount再往上
介紹React高階組件?
父子組件之間如何通信?
Redux怎么實(shí)現(xiàn)屬性傳遞，介紹下原理?
React-Router版本號(hào)?
網(wǎng)站SEO怎么處理?
前端加 meta discription keyword
后端 ssr
介紹下HTTP狀態(tài)碼 403、301、302是什么?
403 服務(wù)器拒絕請(qǐng)求
301 永久重定向
302 臨時(shí)重定向
緩存相關(guān)的HTTP請(qǐng)求頭?
盡量降低http的請(qǐng)求次數(shù)
Expires
Cache-Contro: Public Private no-cache no-store max-age min-fresh
Last-Modified/If-Modified-Since
ETag
no-cache>Expires>Last-Modified 前面的生效后,后面的基本就失效了
介紹HTTPS ?
HTTPS怎么建立安全通道?
前端性能優(yōu)化（JS原生和React）?
用戶(hù)體驗(yàn)做過(guò)什么優(yōu)化?
對(duì)PWA有什么了解?
progressive web app: 漸進(jìn)式網(wǎng)頁(yè)應(yīng)用
客戶(hù)端要和推送服務(wù)進(jìn)行綁定，會(huì)生成一個(gè)綁定后的推送服務(wù)API接口，服務(wù)端調(diào)用此接口，發(fā)送消息。同時(shí)，瀏覽器也要支持推送功能，在注冊(cè) sw 時(shí), 加上推送功能的判斷
對(duì)安全有什么了解?
介紹下數(shù)字簽名的原理?
A：將明文進(jìn)行摘要運(yùn)算后得到摘要（消息完整性），再將摘要用A的私鑰加密（身份認(rèn)證），得到數(shù)字簽名，將密文和數(shù)字簽名一塊發(fā)給B。
B：收到A的消息后，先將密文用自己的私鑰解密，得到明文。將數(shù)字簽名用A的公鑰進(jìn)行解密后，得到正確的摘要（解密成功說(shuō)明A的身份被認(rèn)證了
前后端通信使用什么方案?
RESTful常用的Method?
介紹下跨域?
Access-Control-Allow-Origin在服務(wù)端哪里配置?
response的header
csrf跨站攻擊怎么解決?
token post方法 http header 中加驗(yàn)證
—————- 兌吧-微醫(yī)-寺庫(kù)-寶寶樹(shù) —————-
————————— 兌吧 —————————
localStorage和cookie有什么區(qū)別?
CSS選擇器有哪些?
盒子模型，以及標(biāo)準(zhǔn)情況和IE下的區(qū)別?
如何實(shí)現(xiàn)高度自適應(yīng)?
prototype和——proto——區(qū)別?
_construct是什么?
new是怎么實(shí)現(xiàn)的 ?
promise的精髓，以及優(yōu)缺點(diǎn)?
如何實(shí)現(xiàn)H5手機(jī)端的適配?
rem、flex的區(qū)別（root em）?
em和px的區(qū)別?
React聲明周期?
如何去除url中的#號(hào)?
Redux狀態(tài)管理器和變量掛載到window中有什么區(qū)別?
webpack和gulp的優(yōu)缺點(diǎn)?
如何實(shí)現(xiàn)異步加載?
如何實(shí)現(xiàn)分模塊打包（多入口）?
前端性能優(yōu)化（1js css；2 圖片；3 緩存預(yù)加載； 4 SSR； 5 多域名加載；6 負(fù)載均衡）?
并發(fā)請(qǐng)求資源數(shù)上限（6個(gè)）?
base64為什么能提升性能，缺點(diǎn)?
介紹webp這個(gè)圖片文件格式?
WebP是一種有損壓縮 這個(gè)格式的圖像的體積將比JPEG格式圖像減小40% 主要優(yōu)勢(shì)在于高效率
介紹koa2?
Promise如何實(shí)現(xiàn)的?
異步請(qǐng)求，低版本fetch如何低版本適配?
ajax如何處理跨域?
CORS如何設(shè)置?
jsonp為什么不支持post方法?
只支持get方法 獲取數(shù)據(jù)
介紹同源策略?
React使用過(guò)的一些組件?
介紹Immuable?
介紹下redux整個(gè)流程原理?
介紹原型鏈?
如何繼承?
————————— 微醫(yī) —————————
介紹JS數(shù)據(jù)類(lèi)型，基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別?
Array是Object類(lèi)型嗎?
數(shù)據(jù)類(lèi)型分別存在哪里?
var a = {name: “前端開(kāi)發(fā)”}; var b = a; a = null那么b輸出什么
var a = {b: 1}存放在哪里
var a = {b: {c: 1}}存放在哪里
棧和堆的區(qū)別?
垃圾回收時(shí)棧和堆的區(qū)別?
數(shù)組里面有10萬(wàn)個(gè)數(shù)據(jù)，取第一個(gè)元素和第10萬(wàn)個(gè)元素的時(shí)間相差多少?
沒(méi)有差別吧 通過(guò)索引index去拿
棧和堆具體怎么存儲(chǔ)?
介紹閉包以及閉包為什么沒(méi)清除?
閉包的使用場(chǎng)景?
JS怎么實(shí)現(xiàn)異步?
異步整個(gè)執(zhí)行周期?
Promise的三種狀態(tài)?
Async/Await怎么實(shí)現(xiàn)?
Promise和setTimeout執(zhí)行先后的區(qū)別?
JS為什么要區(qū)分微任務(wù)和宏任務(wù)?
Promise構(gòu)造函數(shù)是同步還是異步執(zhí)行，then呢?
發(fā)布-訂閱和觀察者模式的區(qū)別?
JS執(zhí)行過(guò)程中分為哪些階段?
詞法作用域和this的區(qū)別?
一個(gè)是定義時(shí)的作用域 一個(gè)是執(zhí)行時(shí)的作用域
平常是怎么做繼承?
深拷貝和淺拷貝?
loadsh深拷貝實(shí)現(xiàn)原理?
ES6中l(wèi)et塊作用域是怎么實(shí)現(xiàn)的?
React中setState后發(fā)生了什么?
setState為什么默認(rèn)是異步?
setState什么時(shí)候是同步的?
為什么3大框架出現(xiàn)以后就出現(xiàn)很多native（RN）框架（虛擬DOM）?
虛擬DOM主要做了什么?
虛擬DOM本身是什么（JS對(duì)象）
304是什么?
客戶(hù)端已經(jīng)執(zhí)行了GET，但文件未變化
打包時(shí)Hash碼是怎么生成的?
版本號(hào) 時(shí)間戳
隨機(jī)值存在一樣的情況，如何避免?
多維度產(chǎn)生隨機(jī)數(shù)
使用webpack構(gòu)建時(shí)有無(wú)做一些自定義操作?
webpack做了什么?
a，b兩個(gè)按鈕，點(diǎn)擊aba，返回順序可能是baa，如何保證是aba（Promise.all）?
node接口轉(zhuǎn)發(fā)有無(wú)做什么優(yōu)化?
node起服務(wù)如何保證穩(wěn)定性，平緩降級(jí)，重啟等?
RN有沒(méi)有做熱加載?
沒(méi)有
RN遇到的兼容性問(wèn)題?
RN如何實(shí)現(xiàn)一個(gè)原生的組件?
RN混原生和原生混RN有什么不同?
什么是單頁(yè)項(xiàng)目?
遇到的復(fù)雜業(yè)務(wù)場(chǎng)景?
Promise.all實(shí)現(xiàn)原理?
————————— 寺庫(kù) —————————
介紹Promise的特性，優(yōu)缺點(diǎn)?
介紹Redux?
RN的原理，為什么可以同時(shí)在安卓和IOS端運(yùn)行?
RN如何調(diào)用原生的一些功能?
介紹RN的缺點(diǎn)?
介紹排序算法和快排原理?
快排原理: 一個(gè)數(shù)為基準(zhǔn) 小的放前面 大的放后面 (再重復(fù))
堆和棧的區(qū)別?
介紹閉包?
閉包的核心是什么?
網(wǎng)絡(luò)的五層模型?
HTTP和HTTPS的區(qū)別?
HTTPS的加密過(guò)程?
介紹SSL和TLS?
SSL記錄協(xié)議和SSL握手協(xié)議
介紹DNS解析?
JS的繼承方法?
介紹垃圾回收?
cookie的引用為了解決什么問(wèn)題?
cookie和localStorage的區(qū)別?
如何解決跨域問(wèn)題?
前端性能優(yōu)化?
————————— 寶寶樹(shù) —————————
使用canvas繪圖時(shí)如何組織成通用組件?
formData和原生的ajax有什么區(qū)別?
設(shè)置header 里的 Content-Type 的類(lèi)型
Content-type：application/x-www-form-urlencoded
介紹下表單提交，和formData有什么關(guān)系?
介紹redux接入流程?
rudux和全局管理有什么區(qū)別（數(shù)據(jù)可控、數(shù)據(jù)響應(yīng)）?
RN和原生通信 ?
使用回調(diào)函數(shù)Callback，它提供了一個(gè)函數(shù)來(lái)把返回值傳回給JavaScript
使用Promise來(lái)實(shí)現(xiàn)
原生模塊向JavaScript發(fā)送事件
介紹MVP怎么組織?
介紹異步方案?
promise如何實(shí)現(xiàn)then處理?
koa2中間件原理?
koa2 的中間件是洋蔥模型。基于async/await 可以更好的處理異步操作
常用的中間件?
1.koa:面向node.js的表達(dá)式HTTP中間件框架，使Web應(yīng)用程序和API更加令人愉快地編寫(xiě)
2.koa-router:Router middleware for koa(koa的路由中間件)
3.koa-views:Template rendering middleware for koa.(koa的模板渲染中間件)
4.koa-bodyparser:用來(lái)解析body的中間件，比方說(shuō)你通過(guò)post來(lái)傳遞表單，json數(shù)據(jù)，或者上傳文件，在koa中是不容易獲取的，通過(guò)koa-bodyparser解析之后，在koa中this.body就能直接獲取到數(shù)據(jù)。ps：xml數(shù)據(jù)沒(méi)辦法通過(guò)koa-bodyparser解析，有另一個(gè)中間件koa-xml-body
5.promise-mysql:Promise-mysql是mysqljs / mysql的一個(gè)包裝函數(shù)，它包含Bluebird承諾的函數(shù)調(diào)用。通常這會(huì)用Bluebird的.promisifyAll()方法完成，但是mysqljs / mysql的腳本與Bluebird所期望的不同
服務(wù)端怎么做統(tǒng)一的狀態(tài)處理?
用promise攔截狀態(tài)碼
如何對(duì)相對(duì)路徑引用進(jìn)行優(yōu)化?
node文件查找優(yōu)先級(jí)?
npm2和npm3 有什么區(qū)別?
npm3 和 npm2 對(duì)于依賴(lài)的處理不一樣了
npm2所有項(xiàng)目依賴(lài)是嵌套關(guān)系，而npm3為了改進(jìn)嵌套過(guò)多、套路過(guò)深的情況，會(huì)將所有依賴(lài)放在第二層依賴(lài)中（所有依賴(lài)只嵌套一次，彼此平行，也就是平鋪的結(jié)構(gòu)
————————— 海康威視 —————————
knex連接數(shù)據(jù)庫(kù)響應(yīng)回調(diào)
介紹異步方案
如何處理異常捕獲
項(xiàng)目如何管理模塊
前端性能優(yōu)化
JS繼承方案
如何判斷一個(gè)變量是不是數(shù)組
變量a和b，如何交換
事件委托
多個(gè)標(biāo)簽生成的Dom結(jié)構(gòu)是一個(gè)類(lèi)數(shù)組
類(lèi)數(shù)組和數(shù)組的區(qū)別
dom的類(lèi)數(shù)組如何轉(zhuǎn)成數(shù)組
介紹單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用
redux狀態(tài)樹(shù)的管理
介紹localstorage的API
————————— 蘑菇街 —————————
html語(yǔ)義化的理解
和的區(qū)別
對(duì)閉包的理解
工程中閉包使用場(chǎng)景
介紹this和原型
使用原型最大的好處
react設(shè)計(jì)思路
為什么虛擬DOM比真實(shí)DOM性能好
react常見(jiàn)的通信方式
redux整體的工作流程
redux和全局對(duì)象之間的區(qū)別
Redux數(shù)據(jù)回溯設(shè)計(jì)思路
單例、工廠、觀察者項(xiàng)目中實(shí)際場(chǎng)景
項(xiàng)目中樹(shù)的使用場(chǎng)景以及了解
工作收獲
————————— 酷家樂(lè) —————————
react生命周期
react性能優(yōu)化
添加原生事件不移除為什么會(huì)內(nèi)存泄露
還有哪些地方會(huì)內(nèi)存泄露
setInterval需要注意的點(diǎn)
定時(shí)器為什么是不精確的
setTimeout(1)和setTimeout(2)之間的區(qū)別
介紹宏任務(wù)和微任務(wù)
promise里面和then里面執(zhí)行有什么區(qū)別
介紹pureComponet
介紹Function Component
React數(shù)據(jù)流
props和state的區(qū)別
介紹react context
介紹class和ES5的類(lèi)以及區(qū)別
介紹箭頭函數(shù)和普通函數(shù)的區(qū)別
介紹defineProperty方法，什么時(shí)候需要用到
for..in 和 object.keys的區(qū)別
介紹閉包，使用場(chǎng)景
使用閉包特權(quán)函數(shù)的使用場(chǎng)景
get和post有什么區(qū)別
————————— 百分點(diǎn) —————————
React15/16.x的區(qū)別
重新渲染render會(huì)做些什么
哪些方法會(huì)觸發(fā)react重新渲染
state和props觸發(fā)更新的生命周期分別有什么區(qū)別
setState是同步還是異步
對(duì)無(wú)狀態(tài)組件的理解
介紹Redux工作流程
介紹ES6的功能
let、const以及var的區(qū)別
淺拷貝和深拷貝的區(qū)別
介紹箭頭函數(shù)的this
介紹Promise和then
介紹快速排序
算法：前K個(gè)最大的元素
————————— 海風(fēng)教育 —————————
對(duì)react看法，它的優(yōu)缺點(diǎn)
使用過(guò)程中遇到的問(wèn)題，如何解決的
react的理念是什么（拿函數(shù)式編程來(lái)做頁(yè)面渲染）
JS是什么范式語(yǔ)言(面向?qū)ο筮€是函數(shù)式編程)
koa原理，為什么要用koa(express和koa對(duì)比)
使用的koa中間件
ES6使用的語(yǔ)法
Promise 和 async/await 和 callback的區(qū)別
Promise有沒(méi)有解決異步的問(wèn)題（promise鏈?zhǔn)钦嬲龔?qiáng)大的地方）
Promise和setTimeout的區(qū)別（Event Loop）
進(jìn)程和線(xiàn)程的區(qū)別（一個(gè)node實(shí)例就是一個(gè)進(jìn)程，node是單線(xiàn)程，通過(guò)事件循環(huán)來(lái)實(shí)現(xiàn)異步）
介紹下DFS深度優(yōu)先
介紹下觀察者模式
觀察者模式里面使用的數(shù)據(jù)結(jié)構(gòu)(不具備順序 ，是一個(gè)list)
meta標(biāo)簽
meta標(biāo)簽：提供給頁(yè)面的一些元信息（名稱(chēng)/值對(duì)）， 比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。
name：名稱(chēng)/值對(duì)中的名稱(chēng)。常用的有author、description、keywords、generator、revised、others。 把 content 屬性關(guān)聯(lián)到一個(gè)名稱(chēng)。
http-equiv：沒(méi)有name時(shí)，會(huì)采用這個(gè)屬性的值。常用的有content-type、expires、refresh、set-cookie。把content屬性關(guān)聯(lián)到http頭部。
content： 名稱(chēng)/值對(duì)中的值， 可以是任何有效的字符串。 始終要和 name 屬性或 http-equiv 屬性一起使用。
scheme： 用于指定要用來(lái)翻譯屬性值的方案。
css哪些屬性可以繼承
字體相關(guān)：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相關(guān)： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相關(guān)：list-style-image, list-style-position, list-style-type, list-style
顏色：color
css3有哪些新屬性
（1）邊框：
border-radius：圓角邊框，border-radius:25px;
box-shadow：邊框陰影，box-shadow: 10px 10px 5px #888888;
border-image：邊框圖片，border-image:url(border.png) 30 30 round;
（2）背景：
background-size：規(guī)定背景圖片的尺寸，background-size:63px 100px;
background-origin：規(guī)定背景圖片的定位區(qū)域，背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。background-origin:content-box;
CSS3 允許您為元素使用多個(gè)背景圖像。background-image:url(bg_flower.gif),url(bg_flower_2.gif);
（3）文本效果：
text-shadow：向文本應(yīng)用陰影，可以規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。text-shadow: 5px 5px 5px #FF0000;
word-wrap：允許文本進(jìn)行換行。word-wrap:break-word;
（4）字體：CSS3 @font-face 規(guī)則可以自定義字體。
（5）2D 轉(zhuǎn)換（ transform）
translate()：元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)。 transform: translate(50px,100px);
rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。transform: rotate(30deg);
scale()：元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)。transform: scale(2,4);
skew()：元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線(xiàn)（X 軸）和垂直線(xiàn)（Y 軸）參數(shù)。transform: skew(30deg,20deg);
matrix()： 把所有 2D 轉(zhuǎn)換方法組合在一起，需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
（6）3D 轉(zhuǎn)換
rotateX()：元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateX(120deg);
rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform: rotateY(130deg);
（7）transition：過(guò)渡效果，使頁(yè)面變化更平滑
transition-property ：執(zhí)行動(dòng)畫(huà)對(duì)應(yīng)的屬性，例如 color，background 等，可以使用 all 來(lái)指定所有的屬性。
transition-duration：過(guò)渡動(dòng)畫(huà)的一個(gè)持續(xù)時(shí)間。
transition-timing-function：在延續(xù)時(shí)間段，動(dòng)畫(huà)變化的速率，常見(jiàn)的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier 。
transition-delay：延遲多久后開(kāi)始動(dòng)畫(huà)。
簡(jiǎn)寫(xiě)為： transition: [ || || || ];
（8）animation：動(dòng)畫(huà)
使用CSS3 @keyframes 規(guī)則。
animation-name: 定義動(dòng)畫(huà)名稱(chēng)
animation-duration: 指定元素播放動(dòng)畫(huà)所持續(xù)的時(shí)間長(zhǎng)
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根據(jù)時(shí)間的推進(jìn)來(lái)改變屬性值的變換速率，說(shuō)得簡(jiǎn)單點(diǎn)就是動(dòng)畫(huà)的播放方式。
animation-delay: 指定元素動(dòng)畫(huà)開(kāi)始時(shí)間
animation-iteration-count:infinite | ：指定元素播放動(dòng)畫(huà)的循環(huán)次
animation-direction: normal | alternate： 指定元素動(dòng)畫(huà)播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
animation-play-state:running | paused ：控制元素動(dòng)畫(huà)的播放狀態(tài)。
簡(jiǎn)寫(xiě)為： animation:[ || || || || || ]
這里只列出了一部分，詳情可以去看w3school的CSS3 教程。
閉包是什么，什么時(shí)候閉包會(huì)消除?
因?yàn)樽饔糜蜴?，外部不能訪(fǎng)問(wèn)內(nèi)部的變量和方法，這時(shí)我們就需要通過(guò)閉包，返回內(nèi)部的方法和變量給外部，從而就形成了一個(gè)閉包。
JavaScript是一門(mén)具有自動(dòng)垃圾回收機(jī)制的編程語(yǔ)言，主要有兩種方式：
垃圾收集器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記（可以使用任何標(biāo)記方式）。然后，它會(huì)去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量，原因是環(huán)境中的變量已經(jīng)無(wú)法訪(fǎng)問(wèn)到這些變量了。最后，垃圾收集器完成內(nèi)存清除工作，銷(xiāo)毀那些帶標(biāo)記的值并回收它們所占用的內(nèi)存空間。
引用計(jì)數(shù)（reference counting）的含義是跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類(lèi)型值賦給該變量時(shí)，則這個(gè)值的引用次數(shù)就是1。如果同一個(gè)值又被賦給另一個(gè)變量，則該值的引用次數(shù)加1。相反，如果包含對(duì)這個(gè)值引用的變量又取得了另外一個(gè)值，則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)變成0 時(shí)，則說(shuō)明沒(méi)有辦法再訪(fǎng)問(wèn)這個(gè)值了，因而就可以將其占用的內(nèi)存空間回收回來(lái)。這樣，當(dāng)垃圾收集器下次再運(yùn)行時(shí)，它就會(huì)釋放那些引用次數(shù)為零的值所占用的內(nèi)存。
導(dǎo)致問(wèn)題：會(huì)導(dǎo)致循環(huán)引用的變量和函數(shù)無(wú)法回收。
解決：將用完的函數(shù)或者變量置為null。
怎么理解js是單線(xiàn)程的
主要說(shuō)一下異步以及事件循環(huán)機(jī)制，還有事件隊(duì)列中的宏任務(wù)、微任務(wù)。
macrotask：主代碼塊，setTimeout，setInterval、setImmediate等。
microtask：process.nextTick（相當(dāng)于node.js版的setTimeout），Promise 。process.nextTick的優(yōu)先級(jí)高于Promise。
更詳細(xì)可以看這篇博客：這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制，講的非常清晰。
有哪些排序算法，時(shí)間復(fù)雜度是多少？什么時(shí)候快排的效率最低？
排序算法 最壞事件復(fù)雜度 平均時(shí)間復(fù)雜度 穩(wěn)定度 空間復(fù)雜度
冒泡排序 O(n^2) O(n^2) 穩(wěn)定 O(1)
插入排序 O(n^2) O(n^2) 穩(wěn)定 O(1)
選擇排序 O(n^2) O(n^2) 穩(wěn)定 O(1)
快速排序 O(n^2) O(nlog2n) 不穩(wěn)定 O(log2n)~O(n)
二叉樹(shù)排序 O(n^2) O(nlog2n) 不一定 O(n)
堆排序 O(nlog2n) O(nlog2n) 不穩(wěn)定 O(1)
整個(gè)序列已經(jīng)有序或完全倒序時(shí)，快排的效率最低。
//發(fā)送請(qǐng)求
http狀態(tài)碼，cookie字段，cookie一般存的是什么，session怎么存在的？
這部分可以參考我的博客：HTTP協(xié)議知識(shí)點(diǎn)總結(jié)
http請(qǐng)求方式有哪些？
HTTP1.0定義了三種請(qǐng)求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五種請(qǐng)求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
更多請(qǐng)看：HTTP請(qǐng)求方法
怎么用原生js實(shí)現(xiàn)一個(gè)輪播圖，以及滾動(dòng)滑動(dòng)
之前我使用輪播圖都是用的antd的組件，所以我大致說(shuō)了一下思路，用定時(shí)器去實(shí)現(xiàn)，以及如何實(shí)現(xiàn)平滑的滾動(dòng)效果。詳情請(qǐng)看： 原生js實(shí)現(xiàn)輪播圖
用過(guò)哪些開(kāi)源的組件
說(shuō)了antd和element-ui。
怎么實(shí)現(xiàn)上傳下載的功能
主要說(shuō)了下form表單和input標(biāo)簽。
react生命周期，以及diff算法，diff算法是對(duì)樹(shù)的深度優(yōu)先遍歷還是廣度優(yōu)先遍歷？
強(qiáng)緩存和協(xié)商緩存
參考：HTTP協(xié)議知識(shí)點(diǎn)總結(jié)
react-router的原理
react-router就是控制不同的url渲染不同的組件。react-router在history庫(kù)的基礎(chǔ)上，實(shí)現(xiàn)了URL與UI的同步。
原理：DOM渲染完成之后，給window添加onhashchange事件監(jiān)聽(tīng)頁(yè)面hash的變化，并且在state屬性中添加了route屬性，代表當(dāng)前頁(yè)面的路由。
具體步驟：
當(dāng)點(diǎn)擊鏈接，頁(yè)面hash改變時(shí)，觸發(fā)綁定在 window 上的 onhashchange 事件；
在 onhashchange 事件中改變組件的 state中的 route 屬性，react組件的state屬性改變時(shí)，自動(dòng)重新渲染頁(yè)面；
頁(yè)面隨著 state 中的route屬性改變，自動(dòng)根據(jù)不同的hash給Child變量賦值不同的組件，進(jìn)行渲染。
參考：react-router的實(shí)現(xiàn)原理
怎么用無(wú)人機(jī)捕獲天空上的鳥(niǎo)
這個(gè)題目我也不造啊，畢竟我沒(méi)用過(guò)無(wú)人機(jī)，有知道的大神可以在評(píng)論中回答一下~
終面
終面是去的現(xiàn)場(chǎng)，在深圳總部那邊，基本就是閑聊了二十來(lái)分鐘吧，面完還有hr小姐姐給我們介紹和參觀了無(wú)人機(jī)，酷炫~
做的項(xiàng)目中，哪個(gè)做的最深入最久
為什么要做前端，喜歡做前端么
未來(lái)的職業(yè)規(guī)劃
了解大疆么，大疆的文化是什么
除了實(shí)習(xí)，還做過(guò)哪些項(xiàng)目
如果生活富足，衣食無(wú)憂(yōu)，你會(huì)選擇干什么
阿里巴巴
阿里是提前批，找人內(nèi)推了菜鳥(niǎo)網(wǎng)絡(luò)，面了六輪，面的我懷疑人生了，中途四面本來(lái)已經(jīng)掛了，后面三面面試官又撈起來(lái)給我加面了一輪，不過(guò)最后還是掛在了hr。
一面
css選擇器，怎么選擇相同的類(lèi)
id、class、標(biāo)簽、偽類(lèi)、通配符等?？梢杂胓etElementsByClassName（）選擇相同的類(lèi)。
css3有哪些偽類(lèi)，偽類(lèi)選擇器有哪些
這里要區(qū)分一下偽類(lèi)和偽元素的概念。根本區(qū)別在于它們是否創(chuàng)造了新的元素(抽象)。
偽類(lèi)：用于向某些選擇器添加特殊的效果。例如，a標(biāo)簽的 :link, :visited,:hover, :active; 以及 :first-child, :last-child。
偽元素：是html中不存在的元素，用于將特殊的效果添加到某些選擇器。例如:before, :after, :first-letter, :first-line。css3只新增了一個(gè)偽元素::selection（改變用戶(hù)所選取部分的樣式）。
參考： CSS3 選擇器——偽類(lèi)選擇器
OSI七層網(wǎng)絡(luò)模型
OSI七層模型 作用 對(duì)應(yīng)協(xié)議 對(duì)應(yīng)設(shè)備
應(yīng)用層 它是計(jì)算機(jī)用戶(hù)，以及各種應(yīng)用程序和網(wǎng)絡(luò)之間的接口 HTTP, FTP, SMTP, POP3 計(jì)算機(jī)設(shè)備
表示層 信息的語(yǔ)法語(yǔ)義以及它們的關(guān)系，如加密解密、轉(zhuǎn)換翻譯、壓縮解壓縮 IPX, LPP, XDP
會(huì)話(huà)層 建立、維護(hù)、管理應(yīng)用程序之間的會(huì)話(huà) SSL, TLS, DAP, LDAP
傳輸層 服務(wù)點(diǎn)編址，分段與重組、連接控制、流量控制、差錯(cuò)控制 TCP, UDP 防火墻
網(wǎng)絡(luò)層 為網(wǎng)絡(luò)設(shè)備提供邏輯地址，進(jìn)行路由選擇、分組轉(zhuǎn)發(fā) IP ARP RARP ICMP IGMP 路由器
數(shù)據(jù)鏈路層 物理尋址，同時(shí)將原始比特流轉(zhuǎn)變?yōu)檫壿媯鬏斅肪€(xiàn) PPTP, ARP, RARP 交換機(jī)
物理層 機(jī)械、電子、定時(shí)接口通道信道上的原始比特流傳輸 IEEE 802.2, Ethernet v.2, Internetwork 網(wǎng)卡
參考： 一張非常強(qiáng)大的OSI七層模型圖解
MVC和MVVM的區(qū)別
Model用于封裝和應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對(duì)數(shù)據(jù)的處理方法；
View作為視圖層，主要負(fù)責(zé)數(shù)據(jù)的展示；
Controller定義用戶(hù)界面對(duì)用戶(hù)輸入的響應(yīng)方式，它連接模型和視圖，用于控制應(yīng)用程序的流程，處理用戶(hù)的行為和數(shù)據(jù)上的改變。
MVC將響應(yīng)機(jī)制封裝在controller對(duì)象中，當(dāng)用戶(hù)和你的應(yīng)用產(chǎn)生交互時(shí)，控制器中的事件觸發(fā)器就開(kāi)始工作了。
MVVM把View和Model的同步邏輯自動(dòng)化了。以前Controller負(fù)責(zé)的View和Model同步不再手動(dòng)地進(jìn)行操作，而是交給框架所提供的數(shù)據(jù)綁定功能進(jìn)行負(fù)責(zé)，只需要告訴它View顯示的數(shù)據(jù)對(duì)應(yīng)的是Model哪一部分即可。也就是雙向數(shù)據(jù)綁定，就是View的變化能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新到View。
參考： 淺析前端開(kāi)發(fā)中的 MVC/MVP/MVVM 模式
用過(guò)哪些設(shè)計(jì)模式
（1）單例模式
定義：保證一個(gè)類(lèi)僅有一個(gè)實(shí)例，并提供一個(gè)訪(fǎng)問(wèn)它的全局訪(fǎng)問(wèn)點(diǎn)。
實(shí)現(xiàn)方法：先判斷實(shí)例存在與否，如果存在則直接返回，如果不存在就創(chuàng)建了再返回，這就確保了一個(gè)類(lèi)只有一個(gè)實(shí)例對(duì)象。
適用場(chǎng)景：一個(gè)單一對(duì)象。比如：彈窗，無(wú)論點(diǎn)擊多少次，彈窗只應(yīng)該被創(chuàng)建一次。
（2）發(fā)布/訂閱模式
定義：又叫觀察者模式,它定義對(duì)象間的一種一對(duì)多的依賴(lài)關(guān)系,當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí),所有依賴(lài)于它的對(duì)象都將得到通知。
場(chǎng)景：訂閱感興趣的專(zhuān)欄和公眾號(hào)。
（3）策略模式
定義：將一個(gè)個(gè)算法（解決方案）封裝在一個(gè)個(gè)策略類(lèi)中。
優(yōu)點(diǎn)：
策略模式可以避免代碼中的多重判斷條件。
策略模式很好的體現(xiàn)了開(kāi)放-封閉原則，將一個(gè)個(gè)算法（解決方案）封裝在一個(gè)個(gè)策略類(lèi)中。便于切換，理解，擴(kuò)展。
策略中的各種算法可以重復(fù)利用在系統(tǒng)的各個(gè)地方，避免復(fù)制粘貼。
策略模式在程序中或多或少的增加了策略類(lèi)。但比堆砌在業(yè)務(wù)邏輯中要清晰明了。
違反最少知識(shí)原則，必須要了解各種策略類(lèi)，才能更好的在業(yè)務(wù)中應(yīng)用。
應(yīng)用場(chǎng)景：根據(jù)不同的員工績(jī)效計(jì)算不同的獎(jiǎng)金；表單驗(yàn)證中的多種校驗(yàn)規(guī)則。
（4）代理模式
定義：為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪(fǎng)問(wèn)。
應(yīng)用場(chǎng)景：圖片懶加載（先通過(guò)一張loading圖占位，然后通過(guò)異步的方式加載圖片，等圖片加載好了再把完成的圖片加載到img標(biāo)簽里面。）
（5）中介者模式
定義：通過(guò)一個(gè)中介者對(duì)象，其他所有相關(guān)對(duì)象都通過(guò)該中介者對(duì)象來(lái)通信，而不是互相引用，當(dāng)其中的一個(gè)對(duì)象發(fā)生改變時(shí)，只要通知中介者對(duì)象就可以?？梢越獬龑?duì)象與對(duì)象之間的緊耦合關(guān)系。
應(yīng)用場(chǎng)景： 例如購(gòu)物車(chē)需求，存在商品選擇表單、顏色選擇表單、購(gòu)買(mǎi)數(shù)量表單等等，都會(huì)觸發(fā)change事件，那么可以通過(guò)中介者來(lái)轉(zhuǎn)發(fā)處理這些事件，實(shí)現(xiàn)各個(gè)事件間的解耦，僅僅維護(hù)中介者對(duì)象即可。
（6）裝飾者模式
定義：在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)象動(dòng)態(tài)的添加方法。
應(yīng)用場(chǎng)景： 有方法維持不變，在原有方法上再掛載其他方法來(lái)滿(mǎn)足現(xiàn)有需求；函數(shù)的解耦，將函數(shù)拆分成多個(gè)可復(fù)用的函數(shù)，再將拆分出來(lái)的函數(shù)掛載到某個(gè)函數(shù)上，實(shí)現(xiàn)相同的效果但增強(qiáng)了復(fù)用性。
參考： JavaScript設(shè)計(jì)模式
Http狀態(tài)碼
https怎么加密
參考： HTTP協(xié)議知識(shí)點(diǎn)總結(jié)
es6相比es5有哪些優(yōu)點(diǎn)
大概說(shuō)一下：let、const，模板字符串，箭頭函數(shù)，做異步處理的promise、generator、async await，es6模塊等。
參考： 阮一峰 —— ECMAScript 6 入門(mén)
ajax請(qǐng)求過(guò)程
不多說(shuō)，上面有。
有哪些性能優(yōu)化
參考：
懶加載怎么實(shí)現(xiàn)
場(chǎng)景：一個(gè)頁(yè)面中很多圖片，但是首屏只出現(xiàn)幾張，這時(shí)如果一次性把圖片都加載出來(lái)會(huì)影響性能。這時(shí)可以使用懶加載，頁(yè)面滾動(dòng)到可視區(qū)在加載。優(yōu)化首屏加載。
實(shí)現(xiàn)：img標(biāo)簽src屬性為空，給一個(gè)data-xx屬性，里面存放圖片真實(shí)地址，當(dāng)頁(yè)面滾動(dòng)直至此圖片出現(xiàn)在可視區(qū)域時(shí)，用js取到該圖片的data-xx的值賦給src。
優(yōu)點(diǎn)：頁(yè)面加載速度快，減輕服務(wù)器壓力、節(jié)約流量，用戶(hù)體驗(yàn)好。
項(xiàng)目中寫(xiě)過(guò)什么組件，組件有哪些功能
主要介紹了下實(shí)習(xí)項(xiàng)目寫(xiě)過(guò)的組件，說(shuō)了下如何實(shí)現(xiàn)的。
二面
react框架有哪些設(shè)計(jì)的好的地方
主要介紹了以下幾個(gè)部分：
JSX語(yǔ)法
組件化
react單項(xiàng)數(shù)據(jù)流
虛擬DOM
react生命周期
react是怎么工作的，怎么提高性能
主要還是說(shuō)了下react的生命周期，還有shouldComponentUpdate這個(gè)函數(shù)，以及diff算法。
redux有哪些需要改進(jìn)，你覺(jué)得你用的不怎么舒服的地方？
我當(dāng)時(shí)說(shuō)的是redux的subscribe方法有點(diǎn)麻煩，每次更新數(shù)據(jù)都要手動(dòng)的subscribe一下，所以覺(jué)得react-redux的api封裝的更好，用起來(lái)比較簡(jiǎn)單。
參考：
怎么設(shè)計(jì)一個(gè)類(lèi)似于antd 的 react 組件庫(kù)
這個(gè)問(wèn)題把我給問(wèn)懵了額，我是按照軟件工程的生命周期流程來(lái)答的。
你做的最自豪的一個(gè)項(xiàng)目
這個(gè)略過(guò)…言之有理即可
mysql 的左關(guān)聯(lián)和右關(guān)聯(lián)
左關(guān)聯(lián)：保留左表中所有的元組，右表中沒(méi)有的屬性填充N(xiāo)ULL。
右關(guān)聯(lián)：保留右表中所有的元組，左表中沒(méi)有的屬性填充N(xiāo)ULL。
有沒(méi)有折騰過(guò)后端
直接說(shuō)了沒(méi)有，之前學(xué)了點(diǎn)PHP，不過(guò)都快忘得差不多了額。
學(xué)習(xí)方法和未來(lái)的學(xué)習(xí)路線(xiàn)
言之有理即可。
瀏覽器頁(yè)面渲染機(jī)制
解析html建立dom樹(shù)
解析css構(gòu)建render樹(shù)（將CSS代碼解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合DOM合并成render樹(shù)）
布局render樹(shù)（Layout/reflow），負(fù)責(zé)各元素尺寸、位置的計(jì)算
繪制render樹(shù)（paint），繪制頁(yè)面像素信息
瀏覽器會(huì)將各層的信息發(fā)送給GPU，GPU會(huì)將各層合成（composite），顯示在屏幕上。
參考： 從瀏覽器多進(jìn)程到JS單線(xiàn)程，JS運(yùn)行機(jī)制最全面的一次梳理
XSS和CSRF防范措施
（1）XSS：跨站腳本攻擊
攻擊方式：在URL或者頁(yè)面輸入框中插入JavaScript代碼。
防范：
設(shè)置httpOnly，禁止用document.cookie操作；
輸入檢查：在用戶(hù)輸入的時(shí)候進(jìn)行格式檢查；
對(duì)輸出轉(zhuǎn)義。
（2）CSRF：跨站點(diǎn)偽造請(qǐng)求
攻擊方式：攻擊者通過(guò)一些技術(shù)手段欺騙用戶(hù)的瀏覽器去訪(fǎng)問(wèn)一個(gè)自己曾經(jīng)認(rèn)證過(guò)的網(wǎng)站并執(zhí)行一些操作（如發(fā)郵件，發(fā)消息，甚至財(cái)產(chǎn)操作如轉(zhuǎn)賬和購(gòu)買(mǎi)商品）。主要是拿到了用戶(hù)的登錄態(tài)。
防范：
檢查 Referer 字段：這個(gè)字段用以標(biāo)明請(qǐng)求來(lái)源于哪個(gè)地址。在處理敏感數(shù)據(jù)請(qǐng)求時(shí)，通常來(lái)說(shuō)，Referer 字段應(yīng)和請(qǐng)求的地址位于同一域名下
添加校驗(yàn) Token：這種數(shù)據(jù)通常是表單中的一個(gè)數(shù)據(jù)項(xiàng)。服務(wù)器生成token并附加在表單中，其內(nèi)容是一個(gè)偽亂數(shù)。當(dāng)客戶(hù)端通過(guò)表單提交請(qǐng)求時(shí)，這個(gè)偽亂數(shù)也一并提交上去以供校驗(yàn)。正常的訪(fǎng)問(wèn)時(shí)，客戶(hù)端瀏覽器能夠正確得到并傳回這個(gè)偽亂數(shù)，而通過(guò) CSRF 傳來(lái)的欺騙性攻擊中，攻擊者無(wú)從事先得知這個(gè)偽亂數(shù)的值，服務(wù)器端就會(huì)因?yàn)樾ｒ?yàn) Token 的值為空或者錯(cuò)誤，拒絕這個(gè)可疑請(qǐng)求
通過(guò)輸入驗(yàn)證碼來(lái)校驗(yàn)合法請(qǐng)求
三面
這一面基本問(wèn)的是個(gè)人知識(shí)沉淀了，如實(shí)回答就可以了。
在項(xiàng)目中的難點(diǎn)，怎么解決的
你的優(yōu)勢(shì)是什么
redux 源碼學(xué)到了什么，怎么看源碼的
了解哪些前端的前沿技術(shù)
平時(shí)看什么書(shū)，興趣愛(ài)好是什么
異步有哪些方法
博客寫(xiě)了什么
除了實(shí)習(xí)經(jīng)歷，還做過(guò)哪些項(xiàng)目
四面
這一面是在杭州菜鳥(niǎo)現(xiàn)場(chǎng)面的，尷尬的是通知我的小姐姐一直強(qiáng)調(diào)是hr面，我天真的以為是hr面了，然鵝問(wèn)了很多技術(shù)，當(dāng)時(shí)候想的是阿里的hr都這么厲害了，都能直接問(wèn)技術(shù)了。臨走之前，特意問(wèn)了面試官是hr面么，他說(shuō)是技術(shù)，然后我……大概就知道自己涼了。
mysql的索引用的什么，介紹一下b樹(shù)，b 樹(shù)，紅黑樹(shù)這些
mysql的索引用的是B 樹(shù)。
參考： 數(shù)據(jù)結(jié)構(gòu)中常見(jiàn)的樹(shù)（BST二叉搜索樹(shù)、AVL平衡二叉樹(shù)、RBT紅黑樹(shù)、B-樹(shù)、B 樹(shù)、B*樹(shù)）
Mysql的基本寫(xiě)法
參考： 一千行 MySQL 學(xué)習(xí)筆記
估算下杭州上空現(xiàn)在有多少架飛機(jī)
這個(gè)題目，也真的是為難我了額。在網(wǎng)上搜到了個(gè)答案，可以參考下：高盛的面試題
兩組數(shù)據(jù)，都存儲(chǔ)五億條url，內(nèi)存有4G，如何找出相同的兩條url
參考： 面試- 阿里-. 大數(shù)據(jù)題目- 給定a、b兩個(gè)文件，各存放50億個(gè)url，每個(gè)url各占64字節(jié)，內(nèi)存限制是4G，讓你找出a、b文件共同的url?
如何找到一個(gè)字符串中最長(zhǎng)的兩個(gè)字符串
解法：后綴數(shù)組。首先生成字符串的所有后綴數(shù)組，在進(jìn)行排序，找出相鄰兩個(gè)最長(zhǎng)的公共子串（從第一位開(kāi)始相同的）
例如：abcdeabc
生成后綴數(shù)組：【abcdeabc，bcdeabc，cdeabc，deabc，eabc，abc，bc，c】
再排序：【abcdeabc，abc，bcdeabc，bc，cdeabc，c，deabc，eabc】
找出相鄰的最長(zhǎng)公共子串：【abc，bc，c】
因此，最長(zhǎng)的串是abc。
在白板上畫(huà)出這個(gè)項(xiàng)目的整個(gè)架構(gòu)
畫(huà)了下項(xiàng)目的功能架構(gòu)什么的。
XSS, CSRF,token 怎么來(lái)的，sql 注入知道么
sql注入：
攻擊方式：服務(wù)器上的數(shù)據(jù)庫(kù)運(yùn)行非法的 SQL 語(yǔ)句，主要通過(guò)拼接字符串的形式來(lái)完成，改變sql語(yǔ)句本身的語(yǔ)義。通過(guò)sql語(yǔ)句實(shí)現(xiàn)無(wú)賬號(hào)登陸，甚至篡改數(shù)據(jù)庫(kù)。
防御：
使用參數(shù)化查詢(xún)：使用預(yù)編譯語(yǔ)句，預(yù)先編譯的 SQL 語(yǔ)句，并且傳入適當(dāng)參數(shù)多次執(zhí)行。由于沒(méi)有拼接的過(guò)程，因此可以防止 SQL 注入的發(fā)生。 使用preparedStatement的參數(shù)化sql，通過(guò)先確定語(yǔ)義，再傳入?yún)?shù)，就不會(huì)因?yàn)閭魅氲膮?shù)改變sql的語(yǔ)義。（通過(guò)setInt，setString，setBoolean傳入?yún)?shù)）
單引號(hào)轉(zhuǎn)換：將傳入的參數(shù)中的單引號(hào)轉(zhuǎn)換為連續(xù)兩個(gè)單引號(hào)，PHP 中的 Magic quote 可以完成這個(gè)功能。
檢查變量數(shù)據(jù)類(lèi)型和格式。
使用正則表達(dá)式過(guò)濾傳入的參數(shù)，對(duì)特殊符號(hào)過(guò)濾或者轉(zhuǎn)義處理。
怎么設(shè)計(jì)一個(gè)ant的組件
你覺(jué)得你實(shí)習(xí)做的項(xiàng)目有什么改進(jìn)的地方
你做過(guò)印象最深刻的項(xiàng)目
算法了解過(guò)嗎
就知道一些基本的排序額…
Setstate 會(huì)發(fā)生什么
setState會(huì)引發(fā)一次組件的更新過(guò)程，從而引發(fā)頁(yè)面的重新繪制。主要會(huì)涉及以下幾個(gè)生命周期函數(shù)：
shouldComponentUpdate（被調(diào)用時(shí)this.state沒(méi)有更新；如果返回了false，生命周期被中斷，雖然不調(diào)用之后的函數(shù)了，但是state仍然會(huì)被更新）
componentWillUpdate（被調(diào)用時(shí)this.state沒(méi)有更新）
render（被調(diào)用時(shí)this.state得到更新）
componentDidUpdate
平時(shí)處理過(guò)什么兼容性
參考： web前端兼容性問(wèn)題總結(jié)
了解分布式和負(fù)載均衡么
然鵝我并不了解呃。
參考： 服務(wù)器負(fù)載均衡的基本功能和實(shí)現(xiàn)原理
五面
第四面確實(shí)是掛了，沒(méi)面hr就讓我走了，后面過(guò)了兩天之后，三面面試官又把我撈起來(lái)了，說(shuō)我計(jì)算機(jī)基礎(chǔ)還有數(shù)據(jù)庫(kù)基礎(chǔ)不怎么好，然后說(shuō)問(wèn)我?guī)讉€(gè)簡(jiǎn)單的，之后給了我機(jī)會(huì)面了hr，感謝三面面試官讓我體驗(yàn)了阿里的整個(gè)面試流程，很滿(mǎn)足了。
進(jìn)程和線(xiàn)程的區(qū)別
根本區(qū)別：進(jìn)程是操作系統(tǒng)資源分配的基本單位，而線(xiàn)程是任務(wù)調(diào)度和執(zhí)行的基本單位。
在開(kāi)銷(xiāo)方面：每個(gè)進(jìn)程都有獨(dú)立的代碼和數(shù)據(jù)空間（程序上下文），程序之間的切換會(huì)有較大的開(kāi)銷(xiāo)；線(xiàn)程可以看做輕量級(jí)的進(jìn)程，同一類(lèi)線(xiàn)程共享代碼和數(shù)據(jù)空間，每個(gè)線(xiàn)程都有自己獨(dú)立的運(yùn)行棧和程序計(jì)數(shù)器（PC），線(xiàn)程之間切換的開(kāi)銷(xiāo)小。
所處環(huán)境：在操作系統(tǒng)中能同時(shí)運(yùn)行多個(gè)進(jìn)程（程序）；而在同一個(gè)進(jìn)程（程序）中有多個(gè)線(xiàn)程同時(shí)執(zhí)行（通過(guò)CPU調(diào)度，在每個(gè)時(shí)間片中只有一個(gè)線(xiàn)程執(zhí)行）。
內(nèi)存分配方面：系統(tǒng)在運(yùn)行的時(shí)候會(huì)為每個(gè)進(jìn)程分配不同的內(nèi)存空間；而對(duì)線(xiàn)程而言，除了CPU外，系統(tǒng)不會(huì)為線(xiàn)程分配內(nèi)存（線(xiàn)程所使用的資源來(lái)自其所屬進(jìn)程的資源），線(xiàn)程組之間只能共享資源。
包含關(guān)系：沒(méi)有線(xiàn)程的進(jìn)程可以看做是單線(xiàn)程的，如果一個(gè)進(jìn)程內(nèi)有多個(gè)線(xiàn)程，則執(zhí)行過(guò)程不是一條線(xiàn)的，而是多條線(xiàn)（線(xiàn)程）共同完成的；線(xiàn)程是進(jìn)程的一部分，所以線(xiàn)程也被稱(chēng)為輕權(quán)進(jìn)程或者輕量級(jí)進(jìn)程。
冒泡排序和快速排序的區(qū)別
簡(jiǎn)述了下冒泡和快排的思想，以及冒泡和快排的時(shí)間復(fù)雜度。
OSI七層模型以及作用
上面有寫(xiě)噢，不知道的往上翻。
你有哪些優(yōu)勢(shì)，或者打動(dòng)他的
呃，最怕這種自夸的問(wèn)題額，然后就是夸了一頓，手動(dòng)捂臉。
面向?qū)ο蠛头敲嫦驅(qū)ο笥惺裁磪^(qū)別
面向?qū)ο笕筇匦裕悍庋b,繼承,多態(tài)。
面向?qū)ο蟮暮锰帲?/p>
將對(duì)象進(jìn)行分類(lèi)，分別封裝它們的數(shù)據(jù)和可以調(diào)用的方法，方便了函數(shù)、變量、數(shù)據(jù)的管理，方便方法的調(diào)用（減少重復(fù)參數(shù)等），尤其是在編寫(xiě)大型程序時(shí)更有幫助。
用面向?qū)ο蟮木幊炭梢园炎兞慨?dāng)成對(duì)象進(jìn)行操作，讓編程思路更加清晰簡(jiǎn)潔，而且減少了很多冗余變量的出現(xiàn)
參考： 面向?qū)ο螅ㄒ唬﹟面向?qū)ο蟾拍罴皟?yōu)點(diǎn)
設(shè)計(jì)模式有哪些，說(shuō)下裝飾者模式和代理模式
前面有總結(jié)，往前翻。
重載和重寫(xiě)有什么區(qū)別
方法重寫(xiě)(overriding)：
也叫子類(lèi)的方法覆蓋父類(lèi)的方法，要求返回值、方法名和參數(shù)都相同。
子類(lèi)拋出的異常不能超過(guò)父類(lèi)相應(yīng)方法拋出的異常。(子類(lèi)異常不能超出父類(lèi)異常)
子類(lèi)方法的的訪(fǎng)問(wèn)級(jí)別不能低于父類(lèi)相應(yīng)方法的訪(fǎng)問(wèn)級(jí)別(子類(lèi)訪(fǎng)問(wèn)級(jí)別不能低于父類(lèi)訪(fǎng)問(wèn)級(jí)別)。
方法重載(overloading):
重載是在同一個(gè)類(lèi)中的兩個(gè)或兩個(gè)以上的方法，擁有相同的方法名，但是參數(shù)卻不相同，方法體也不相同，最常見(jiàn)的重載的例子就是類(lèi)的構(gòu)造函數(shù)。
參考： 方法重載和重寫(xiě)的區(qū)別
hr面
為什么選擇前端開(kāi)發(fā)
什么事情讓你最有成就感
什么讓你最有挫敗感
為什么選擇阿里
平時(shí)是怎么學(xué)習(xí)的
職業(yè)發(fā)展
百度
二面三面都有手寫(xiě)代碼的環(huán)節(jié)，對(duì)于我這種動(dòng)手能力弱的人來(lái)說(shuō)還是挺吃力。當(dāng)時(shí)提前批投遞的是深圳百度，總共只招五個(gè)前端，沒(méi)過(guò)也很正常。后面正式批筆試過(guò)了，但是要去北京面試，也就直接放棄了。
為什么要用flex布局，align-items和justify-content的區(qū)別
傳統(tǒng)布局基于盒模型，非常依賴(lài) display屬性 、position屬性 、float屬性。而flex布局更靈活，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局，比如水平垂直居中。
align-items：定義在垂直方向上的對(duì)齊方式；
justify-content：定義在水平方向上的對(duì)齊方式。
webpack是怎么打包的，babel又是什么？
把項(xiàng)目當(dāng)做一個(gè)整體，通過(guò)一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開(kāi)始找到項(xiàng)目的所有依賴(lài)文件，使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。
babel將es6、es7、es8等語(yǔ)法轉(zhuǎn)換成瀏覽器可識(shí)別的es5或es3語(yǔ)法。
saas和less不同于普通css的地方
定義變量，可以把反復(fù)使用的css屬性值定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書(shū)寫(xiě)這一屬性值；
嵌套寫(xiě)法，父子關(guān)系一目了然；
使用運(yùn)算符，可以進(jìn)行樣式的計(jì)算；
內(nèi)置一些顏色處理函數(shù)用來(lái)對(duì)顏色值進(jìn)行處理，例如加亮、變暗、顏色梯度等；
繼承：為多個(gè)元素定義相同樣式的時(shí)候，我們可以考慮使用繼承的做法；
Mixins （混入）：有點(diǎn)像是函數(shù)或者是宏，當(dāng)某段 CSS經(jīng)常需要在多個(gè)元素中使用時(shí)，可以為這些共用的 CSS 定義一個(gè)Mixin，然后只需要在需要引用這些 CSS 地方調(diào)用該 Mixin 即可。
es 6模塊和其他模塊不同的地方
對(duì)比了一下es6模塊和CommonJS模塊：
區(qū)別 CommonJS es6
加載原理 第一次加載模塊就會(huì)執(zhí)行整個(gè)模塊，再次用到時(shí)，不會(huì)執(zhí)行該模塊，而是到緩存中取值。 不會(huì)緩存運(yùn)行結(jié)果，動(dòng)態(tài)的去被加載的模塊中取值，并且變量總是綁定其所在模塊。
輸出 值的拷貝（模塊中值的改變不會(huì)影響已經(jīng)加載的值） 值的引用（靜態(tài)分析，動(dòng)態(tài)引用，原來(lái)模塊值改變會(huì)改變加載的值）
加載方式 運(yùn)行時(shí)加載（加載整個(gè)模塊，即模塊中的所有接口） 編譯時(shí)加載（只加載需要的接口）
this指向 指向當(dāng)前模塊 指向undefined
循環(huán)加載 只輸出已經(jīng)執(zhí)行的部分，還未執(zhí)行的部分不會(huì)輸出 遇到模塊加載命令import時(shí)不會(huì)去執(zhí)行模塊，而是生成一個(gè)動(dòng)態(tài)的只讀引用，等到真正用到時(shí)再去模塊中取值。只要引用存在，代碼就能執(zhí)行。
有沒(méi)有用過(guò)es6的一些異步處理函數(shù)
Promise，generator，async await
redux怎么處理異步操作
可以引入Redux-thunk或者redux-promise這種中間件，可以延遲事件的派發(fā)。
其中的原理：是因?yàn)樗麄冇昧薬pplymiddleware()包裝了store的dispatch方法，擁有可以處理異步的能力。
為什么reducer要是個(gè)純函數(shù)，純函數(shù)是什么？
純函數(shù)：對(duì)于相同的輸入，永遠(yuǎn)會(huì)得到相同的輸出，而且沒(méi)有任何可觀察的副作用，也不依賴(lài)外部環(huán)境的狀態(tài)。
原因：Redux只通過(guò)比較新舊兩個(gè)對(duì)象的存儲(chǔ)位置來(lái)比較新舊兩個(gè)對(duì)象是否相同（淺比較）。如果你在reducer內(nèi)部直接修改舊的state對(duì)象的屬性值，那么新的state和舊的state將都指向同一個(gè)對(duì)象。因此Redux認(rèn)為沒(méi)有任何改變，返回的state將為舊的state。兩個(gè)state相同的話(huà)，頁(yè)面就不會(huì)重新渲染了。
因?yàn)楸容^兩個(gè)Javascript對(duì)象所有的屬性是否相同的的唯一方法是對(duì)它們進(jìn)行深比較。但是深比較在真實(shí)的應(yīng)用當(dāng)中代價(jià)昂貴，因?yàn)橥ǔs的對(duì)象都很大，同時(shí)需要比較的次數(shù)很多。因此一個(gè)有效的解決方法是作出一個(gè)規(guī)定：無(wú)論何時(shí)發(fā)生變化時(shí)，開(kāi)發(fā)者都要?jiǎng)?chuàng)建一個(gè)新的對(duì)象，然后將新對(duì)象傳遞出去。同時(shí)，當(dāng)沒(méi)有任何變化發(fā)生時(shí)，開(kāi)發(fā)者發(fā)送回舊的對(duì)象。也就是說(shuō)，新的對(duì)象代表新的state。
高階函數(shù)是什么，怎么去寫(xiě)一個(gè)高階函數(shù)
高階函數(shù)：參數(shù)值為函數(shù)或者返回值為函數(shù)。例如map，reduce，filter，sort方法就是高階函數(shù)。
編寫(xiě)高階函數(shù)，就是讓函數(shù)的參數(shù)能夠接收別的函數(shù)。
vue跟react的區(qū)別是什么
沒(méi)有用過(guò)vue，所以就只說(shuō)了vue具有雙向綁定，react是單向數(shù)據(jù)流。
參考： Vue.js與React的全面對(duì)比
nodejs處理了什么問(wèn)題
可以處理高并發(fā)的I/O，也能與websocket配合，開(kāi)發(fā)長(zhǎng)連接的實(shí)時(shí)交互應(yīng)用程序。
響應(yīng)式布局，怎么做移動(dòng)端適配
使用媒體查詢(xún)可以實(shí)現(xiàn)響應(yīng)式布局。
移動(dòng)端適配方案：
（1）meta viewport：讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶(hù)手動(dòng)縮放。
<meta
name
=
“viewport”
content
=
“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”
width=device-width: 讓當(dāng)前viewport寬度等于設(shè)備的寬度
user-scalable=no: 禁止用戶(hù)縮放
initial-scale=1.0: 設(shè)置頁(yè)面的初始縮放值為不縮放
maximum-scale=1.0: 允許用戶(hù)的最大縮放值為1.0
minimum-scale=1.0: 允許用戶(hù)的最小縮放值為1.0
（2）媒體查詢(xún)（響應(yīng)式)
（3）動(dòng)態(tài) rem 方案
參考： 移動(dòng)端是怎么做適配的？
二面
怎么做一個(gè)實(shí)時(shí)的聊天系統(tǒng)
使用WebSocket和nodejs，《nodejs實(shí)戰(zhàn)》這本書(shū)詳細(xì)介紹了這個(gè)項(xiàng)目。
當(dāng)消息有延遲的時(shí)候，怎么保證消息的正確順序
每個(gè)消息在被創(chuàng)建時(shí)，都將被賦予一個(gè)全局唯一的、單調(diào)遞增的、連續(xù)的序列號(hào)（SerialNumber，SN）?？梢酝ㄟ^(guò)一個(gè)全局計(jì)數(shù)器來(lái)實(shí)現(xiàn)這一點(diǎn)。通過(guò)比較兩個(gè)消息的SN，確定其先后順序。
怎么做一個(gè)登陸窗口，input有哪些兼容性
使用form表單。
input按鈕如何校驗(yàn)
使用正則表達(dá)式。
webpack有配置過(guò)嗎？原理知道嗎
參考前面。
父子組件如何通信，子組件怎么跟父組件通信？
父組件把state作為props傳遞給子組件進(jìn)行通信。
父組件寫(xiě)好state和處理該state的函數(shù)，同時(shí)將函數(shù)名通過(guò)props屬性值的形式傳入子組件，子組件調(diào)用父組件的函數(shù)，同時(shí)引起state變化。
簡(jiǎn)單說(shuō)一下pwa
面試的這個(gè)部門(mén)就是做pwa的，所以說(shuō)了下自己對(duì)pwa的理解。
從url輸入到頁(yè)面顯示會(huì)有哪些步驟
（1）DNS服務(wù)器解析域名，找到對(duì)應(yīng)服務(wù)器的IP地址;
（2）和服務(wù)器建立TCP三次握手連接；
（3）發(fā)送HTTP請(qǐng)求，服務(wù)器會(huì)根據(jù)HTTP請(qǐng)求到數(shù)據(jù)服務(wù)器取出相應(yīng)的資源，并返回給瀏覽器；
（4）瀏覽器處理響應(yīng)
加載：瀏覽器對(duì)一個(gè)html頁(yè)面的加載順序是從上而下的。
當(dāng)加載到外部css文件、圖片等資源，瀏覽器會(huì)再發(fā)起一次http請(qǐng)求，來(lái)獲取外部資源。
當(dāng)加載到j(luò)s文件，html文檔會(huì)掛起渲染（加載解析渲染同步）的線(xiàn)程，等待js文件加載、解析完畢才可以恢復(fù)html文檔的渲染線(xiàn)程。
解析：解析DOM樹(shù)和CSSDOM樹(shù)。
渲染：構(gòu)建渲染樹(shù)，將DOM樹(shù)進(jìn)行可視化表示，將頁(yè)面呈現(xiàn)給用戶(hù)。
method有哪些方法，分別是什么意思？post和put的區(qū)別
post：上傳資源
put：修改資源
https有幾次握手
http2比http1好的地方
主要是考察http2的幾個(gè)特性。
參考：HTTP協(xié)議知識(shí)點(diǎn)總結(jié)
頁(yè)面刷新不出來(lái)，是有哪些問(wèn)題
可以從第三題的每個(gè)步驟進(jìn)行分析，大概是：
域名不存在，或者ip地址錯(cuò)誤
網(wǎng)絡(luò)問(wèn)題，不能建立正常的tcp連接
服務(wù)器找不到正確的資源
上一次系統(tǒng)性的學(xué)習(xí)是什么時(shí)候，怎么學(xué)習(xí)的
學(xué)習(xí)react的時(shí)候，看文檔、博客，照著網(wǎng)上寫(xiě)了點(diǎn)小項(xiàng)目。
你覺(jué)得項(xiàng)目中最自豪的是什么
上家公司有哪些不好的地方
網(wǎng)易
網(wǎng)易是在杭州網(wǎng)易大廈面的，一天面完三輪，然后錄用排序，擇優(yōu)錄取的吧。我投的是網(wǎng)易考拉，哭唧唧，后面被拒了之后還傷心的卸載了考拉。之后正式批投了杭研，過(guò)了筆試，要去武漢面，本來(lái)?？狄彩窃谖錆h面的，考慮到還要住一晚上，有點(diǎn)怕怕，就沒(méi)去了。
圖片懶加載src
Promise異步
水平垂直居中
數(shù)組有哪些方法，哪些會(huì)改變?cè)瓟?shù)組
改變?cè)瓟?shù)組的方法：pop、push、reverse、shift、sort、splice、unshift，以及兩個(gè)ES6新增的方法copyWithin 和 fill；
不改變?cè)瓟?shù)組（復(fù)制）：concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未標(biāo)準(zhǔn)的toSource以及ES7新增的方法includes；
循環(huán)遍歷：forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。
操作dom有哪些方法
創(chuàng)建：
createDocumentFragment
()
//創(chuàng)建一個(gè)DOM片段
createElement
()
//創(chuàng)建一個(gè)具體的元素
createTextNode
()
//創(chuàng)建一個(gè)文本節(jié)點(diǎn)
添加：appendChild()
移出：removeChild()
替換：replaceChild()
插入：insertBefore()
復(fù)制：cloneNode(true)
查找：
getElementsByTagName
()
//通過(guò)標(biāo)簽名稱(chēng)
getElementsByClassName
()
//通過(guò)標(biāo)簽名稱(chēng)
getElementsByName
()
//通過(guò)元素的Name屬性的值
getElementById
()
//通過(guò)元素Id，唯一性
左邊定寬右邊自適應(yīng)
（1）左盒子左浮動(dòng)，右盒子width=100%
（2）左盒子左浮動(dòng)，右盒子margin-left=左盒子寬度
（3）左盒子左浮動(dòng)，右盒子右浮動(dòng)，設(shè)置calc（100vw-盒子寬度）
（4）父容器設(shè)置display=flex，右盒子flex：1
事件代理
利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行。打個(gè)比方：一個(gè)button對(duì)象，本來(lái)自己需要監(jiān)控自身的點(diǎn)擊事件，但是自己不來(lái)監(jiān)控這個(gè)點(diǎn)擊事件，讓自己的父節(jié)點(diǎn)來(lái)監(jiān)控自己的點(diǎn)擊事件。
后端了解么
直接說(shuō)了不了解，笑哭。
二面
節(jié)流和防抖，手寫(xiě)一下代碼
（1）防抖：
定義： 合并事件且不會(huì)去觸發(fā)事件，當(dāng)一定時(shí)間內(nèi)沒(méi)有觸發(fā)這個(gè)事件時(shí)，才真正去觸發(fā)事件。
原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。
場(chǎng)景： keydown事件上驗(yàn)證用戶(hù)名，輸入法的聯(lián)想。
（2）節(jié)流：
定義： 持續(xù)觸發(fā)事件時(shí)，合并一定時(shí)間內(nèi)的事件，在間隔一定時(shí)間之后再真正觸發(fā)事件。每間隔一段時(shí)間觸發(fā)一次。
原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)。
場(chǎng)景： resize改變布局時(shí)，onscroll滾動(dòng)加載下面的圖片時(shí)。
實(shí)現(xiàn)：
當(dāng)觸發(fā)事件的時(shí)候，我們?nèi)〕霎?dāng)前的時(shí)間戳，然后減去之前的時(shí)間戳(最一開(kāi)始值設(shè)為0)，如果大于設(shè)置的時(shí)間周期，就執(zhí)行函數(shù)，然后更新時(shí)間戳為當(dāng)前的時(shí)間戳，如果小于，就不執(zhí)行。
缺陷：第一次事件會(huì)立即執(zhí)行，停止觸發(fā)后沒(méi)辦法再激活事件。
當(dāng)觸發(fā)事件的時(shí)候，我們?cè)O(shè)置一個(gè)定時(shí)器，再觸發(fā)事件的時(shí)候，如果定時(shí)器存在，就不執(zhí)行，直到定時(shí)器執(zhí)行，然后執(zhí)行函數(shù)，清空定時(shí)器，這樣就可以設(shè)置下個(gè)定時(shí)器。
缺陷：第一次事件會(huì)在n秒后執(zhí)行，停止觸發(fā)后依然會(huì)再執(zhí)行一次事件。
知道哪些性能優(yōu)化
react為什么比其他要快，虛擬dom知道嗎
寫(xiě)過(guò)什么組件
平時(shí)怎么學(xué)習(xí)的
node，webpack了解么
模塊化，commonjs,es6模塊
redux怎么實(shí)現(xiàn)的
hr面
項(xiàng)目上有哪些難點(diǎn)，項(xiàng)目中學(xué)到了什么
不喜歡跟什么樣的人共事
平時(shí)怎么學(xué)習(xí)
為什么來(lái)杭州
職業(yè)發(fā)展
搜狗
搜狗是內(nèi)推的，面試也很迷，第一面到第二面中間隔了二十幾天，然后二面完了也毫無(wú)反饋。
一面
說(shuō)一下項(xiàng)目，整個(gè)網(wǎng)絡(luò)過(guò)程，從前端到后臺(tái)
Ajax 底層實(shí)現(xiàn)，readystate 有哪些
0-（未初始化）還沒(méi)有調(diào)用send()方法
1-（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2-（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3-（交互）正在解析響應(yīng)內(nèi)容
4-（完成）響應(yīng)內(nèi)容解析完成，可以在客戶(hù)端調(diào)用了
狀態(tài)碼有哪些，100,307
OSI七層模型
TCP三次握手
SSL握手過(guò)程
jQuery 有哪些方法
display 有哪些屬性，說(shuō)一下flex的屬性
Es6的async awiat ，generator
Map有哪些方法
Map的方法：set, get, has, delete, clear
遍歷方法：
keys()：返回鍵名的遍歷器。
values()：返回鍵值的遍歷器。
entries()：返回所有成員的遍歷器。
forEach()：遍歷 Map 的所有成員。
參考： Set 和 Map 數(shù)據(jù)結(jié)構(gòu)
正則用過(guò)嗎？exec, 匹配一個(gè)手機(jī)號(hào)
css3動(dòng)畫(huà)了解嗎，怎么寫(xiě)一個(gè)loading動(dòng)畫(huà)
怎么實(shí)現(xiàn)跨域,cors涉及哪些請(qǐng)求字段
編程: 判斷兩個(gè)網(wǎng)絡(luò)地址是否屬于同一個(gè)子網(wǎng)掩碼
用與運(yùn)算符就可以了。當(dāng)時(shí)是在牛客網(wǎng)的面試系統(tǒng)上寫(xiě)的，一直AC不出，也是很迷了額。
怎么上傳文件
二面
怎么計(jì)算在一個(gè)頁(yè)面上的停留時(shí)間
方案1：websocket，前端開(kāi)個(gè)長(zhǎng)連接，后臺(tái)統(tǒng)計(jì)長(zhǎng)連接時(shí)間。
方案2：ajax輪詢(xún)，隔幾秒發(fā)一個(gè)查詢(xún)，后臺(tái)記錄第一與最后一個(gè)查詢(xún)間隔時(shí)間。
方案3： 關(guān)閉窗口或者跳轉(zhuǎn)的時(shí)候會(huì)觸發(fā)window.onbeforeunload函數(shù)，可以在該函數(shù)中做處理（有兼容性問(wèn)題）；統(tǒng)計(jì)完數(shù)據(jù)記錄到本地cookies中，一段時(shí)間后統(tǒng)一發(fā)送。
給你一億個(gè)數(shù)，是連續(xù)的，怎么找出兩個(gè)不存在的數(shù)
用bitmap就能搞定了，存在為1，不存在為0。
一個(gè)搜索框的輸入聯(lián)想，會(huì)遇到什么問(wèn)題？如果第一個(gè)請(qǐng)求延遲，第二個(gè)請(qǐng)求先到，請(qǐng)問(wèn)怎么處理？
鍵盤(pán)輸入太快，每次輸入都去聯(lián)想，需要多次發(fā)送請(qǐng)求，會(huì)導(dǎo)致用戶(hù)體驗(yàn)太差，可以使用防抖優(yōu)化。
在前端做判斷，判斷此時(shí)的值是否與返回的值相同，不同就丟棄，相同就顯示在頁(yè)面。
Http的緩存
二維碼怎么工作的，掃描pc端的二維碼，怎么讓pc端登錄？
pc端隨機(jī)生成一個(gè)含有唯一uid的二維碼，并與服務(wù)器建立一個(gè)長(zhǎng)連接；
手機(jī)掃描二維碼，解析出二維碼中的uid，并把這個(gè)uid和手機(jī)端的用戶(hù)密碼進(jìn)行綁定，上傳給服務(wù)器；
服務(wù)器獲得客戶(hù)端信息之后，pc端的長(zhǎng)連接輪詢(xún)操作會(huì)獲得該消息，顯示該賬號(hào)的信息；
pc端會(huì)再開(kāi)一個(gè)長(zhǎng)連接與手機(jī)端保持通信，等待手機(jī)端確認(rèn)登陸后，獲得服務(wù)器授權(quán)的token，就可以在pc端登陸進(jìn)行正常通信了。
Promise 做什么的，有哪幾種狀態(tài)
異步處理的，有三個(gè)狀態(tài)：resolve，pending，reject。
項(xiàng)目有哪些難點(diǎn)，怎么處理的
遇到過(guò)哪些性能優(yōu)化
電信IT研發(fā)中心
當(dāng)時(shí)聽(tīng)說(shuō)電信對(duì)學(xué)歷要求很高，本科基本都是211起的，想著自己本科太渣，就直接放棄了網(wǎng)上的筆試。之后電信來(lái)了學(xué)校宣講會(huì)，跟朋友吃完飯看到了，就去說(shuō)湊湊熱鬧，剛好有筆試也就做了。做完之后筆試居然考了最高分，比第二名高出二十分，手動(dòng)捂臉額。一面完分?jǐn)?shù)也挺高的，有95分，運(yùn)氣爆棚。重點(diǎn)是今年電信開(kāi)的薪資實(shí)在太高了，目前還在糾結(jié)選哪個(gè)。
Xhtml和html的區(qū)別
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫(xiě)字母。
XHTML 文檔必須擁有根元素。
遇到過(guò)哪些兼容性問(wèn)題
瀏覽器內(nèi)核有哪些，移動(dòng)端用的是哪個(gè)
Trident內(nèi)核：IE,MaxThon,TT,The Word,360,搜狗瀏覽器等。[又稱(chēng)為MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等；
Presto內(nèi)核：Opera7及以上。[Opera內(nèi)核原為：Presto，現(xiàn)為：Blink]
Webkit內(nèi)核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]
對(duì)于Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核。
怎么實(shí)現(xiàn)標(biāo)簽頁(yè)的通信
Cookie、session,localstorage，sessionstorage
React 和jquery 之間的區(qū)別，哪個(gè)好用
怎么實(shí)現(xiàn)繼承
Es6,es7有哪些特性
怎么跨域
Commonjs用的js哪個(gè)特性?
因?yàn)閖s之前只能在瀏覽器運(yùn)行，為了能讓js能在服務(wù)器上運(yùn)行，所以設(shè)計(jì)了commonjs規(guī)范，而且js之前沒(méi)有模塊化的概念。
選擇器優(yōu)先級(jí)
偽類(lèi)知道嗎，有哪些
塊級(jí)元素有哪些，怎么轉(zhuǎn)成行內(nèi)元素
一個(gè)完整的http請(qǐng)求，頁(yè)面渲染過(guò)程，js和css文件怎么渲染
二面
一面問(wèn)的都很常規(guī)的，不知道為啥給了這么高的分。二面的時(shí)候三個(gè)面試官，總共就問(wèn)了三個(gè)問(wèn)題，然后就說(shuō)面試結(jié)束了，不超過(guò)五分鐘。
TCP怎么工作的
三次握手
OSI七層模型，路由器工作在哪一層？
網(wǎng)絡(luò)層
平時(shí)用什么語(yǔ)言，用過(guò)哪些框架
深信服
深信服給的薪資居然比電信還低，而且加班還嚴(yán)重，就直接拒了。
一面
跨域，同源策略，webpack里面有個(gè)跨域的方式知道么
怎么把es6轉(zhuǎn)成es5，babel怎么工作的
解析：將代碼字符串解析成抽象語(yǔ)法樹(shù)
變換：對(duì)抽象語(yǔ)法樹(shù)進(jìn)行變換操作
再建：根據(jù)變換后的抽象語(yǔ)法樹(shù)再生成代碼字符串
反向代理知道么，Nginx
繼承有哪些方式
怎么實(shí)現(xiàn)一個(gè)sleep ，手寫(xiě)一個(gè)promise
能寫(xiě)一個(gè)二叉樹(shù)么，怎么去遍歷
深拷貝怎么寫(xiě)
在公司除了完成上級(jí)交待的任務(wù)，還做了什么
怎么實(shí)現(xiàn)垂直中間布局
Call和apply，哪個(gè)性能開(kāi)銷(xiāo)大
在思否上提問(wèn)了，已有大神回答。
參考： call和apply的哪個(gè)性能更好
正則寫(xiě)一個(gè)手機(jī)號(hào)，全局匹配是什么
刪除一個(gè)數(shù)組中的某個(gè)數(shù)
splice方法
模塊化介紹一下，什么是編譯時(shí)優(yōu)化
有哪些網(wǎng)絡(luò)安全名詞，怎么防范
平時(shí)怎么學(xué)習(xí)
二面
二面小哥哥問(wèn)了幾個(gè)問(wèn)題之后，就一直跟我介紹深信服內(nèi)部的一些管理、技術(shù)氛圍、晉升機(jī)制什么的，全程都是笑臉額。
git push -u 是什么意思
綁定默認(rèn)提交的遠(yuǎn)程版本庫(kù)，加了參數(shù)-u后，以后即可直接用git push 代替git push origin master
git rebase解釋下
有test和dev兩個(gè)分支，分別有兩個(gè)commit，此時(shí)執(zhí)行下列命令：
git checkout test
git rebase dev
以dev為基準(zhǔn)將test的提交進(jìn)行回放，挨個(gè)的應(yīng)用到dev上去，然后test的那些提交就會(huì)廢棄。 等價(jià)于git merge dev。
git merge 和git rebase區(qū)別：
merge不會(huì)修改提交歷史，rebase會(huì)修改提交歷史
。
rebase只應(yīng)用于本地沒(méi)有提交的代碼，如果應(yīng)用到已經(jīng)提交到遠(yuǎn)程的分支不要應(yīng)用，不然會(huì)非常的麻煩，git merge 可以應(yīng)用于遠(yuǎn)程分支。
linux命令，怎么打開(kāi)一個(gè)文件
cat abc.txt
你的上級(jí)給你review 代碼時(shí)會(huì)提什么建議
怎么看待加班和工作效率
get和post分別進(jìn)行幾次數(shù)據(jù)交互
get請(qǐng)求過(guò)程：（2次交互）
瀏覽器請(qǐng)求tcp連接（第一次握手）
服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）
瀏覽器確認(rèn)，并發(fā)送get請(qǐng)求頭和數(shù)據(jù)（第三次握手，這個(gè)報(bào)文比較小，所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送）
服務(wù)器返回200 ok響應(yīng)。
post請(qǐng)求過(guò)程：（3次交互）
瀏覽器請(qǐng)求tcp連接（第一次握手）
服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）
瀏覽器確認(rèn)，并發(fā)送post請(qǐng)求頭（第三次握手，這個(gè)報(bào)文比較小，所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送）
服務(wù)器返回100 continue響應(yīng)
瀏覽器開(kāi)始發(fā)送數(shù)據(jù)
服務(wù)器返回200 ok響應(yīng)
怎么打斷點(diǎn)，如何確定一個(gè)結(jié)果來(lái)自于哪個(gè)函數(shù)
ThoughtWorks
TW是內(nèi)推的，做了內(nèi)推作業(yè)后，就面了技術(shù)和文化面。技術(shù)面是在作業(yè)的基礎(chǔ)上加兩個(gè)功能，只寫(xiě)出來(lái)一個(gè)，后面一個(gè)沒(méi)時(shí)間寫(xiě)了，然后就只講了下思路。
文化面面了快一個(gè)小時(shí)，聽(tīng)說(shuō)TW不加班，對(duì)女程序員還很友好，挺中意的公司，不過(guò)最后還是掛了額。
華為
華為的面試就不多說(shuō)了，基本不問(wèn)前端的，進(jìn)去是隨機(jī)分崗的。華為的面試陣仗是我見(jiàn)過(guò)的最大的，聽(tīng)說(shuō)要招一萬(wàn)人，在萬(wàn)達(dá)那里面的，全是人啊，闊怕。現(xiàn)在正泡在offer池里，估計(jì)國(guó)慶后發(fā)正式offer吧。
二面碰到的是個(gè)女面試官，太恐怖了，一直在懟我，最怕碰到女面試官了，慘。
小米
小米是內(nèi)推的，電話(huà)面了一面，國(guó)慶后要我去武漢現(xiàn)場(chǎng)面，那會(huì)學(xué)校剛好有事應(yīng)該也不會(huì)去了。
redux主要做什么的，用過(guò)redux的一些中間件嗎，簡(jiǎn)單說(shuō)一下
react生命周期說(shuō)一下，diff算法說(shuō)一下
setstate時(shí)會(huì)合并修改，是在哪個(gè)函數(shù)里修改的？宏事件和微事件
setstate是異步更新的，通過(guò)一個(gè)隊(duì)列機(jī)制實(shí)現(xiàn)state的更新，當(dāng)執(zhí)行setState時(shí)，會(huì)將需要更新的state合并后放入狀態(tài)隊(duì)列，而不會(huì)立即更新，隊(duì)列可以高效的批量更新state。
let、const、var的區(qū)別；如果const定義的是個(gè)對(duì)象，能夠修改對(duì)象的屬性嗎？
const實(shí)際上保證的并不是變量的值不得改動(dòng)，而是變量指向的那個(gè)指針不得改動(dòng)，可以給對(duì)象添加屬性。如果真的想將對(duì)象凍結(jié)，應(yīng)該使用Object.freeze方法。
Object.freeze和Object.seal的區(qū)別
Object.preventExtension：禁止對(duì)象添加新屬性并保留已有屬性;
Object.seal：在一個(gè)現(xiàn)有對(duì)象上調(diào)用 Object.preventExtensions(..) 并把所有現(xiàn)有屬性標(biāo)記為 configurable:false;
Object.freeze：在一個(gè)現(xiàn)有對(duì)象上調(diào)用 Object.seal(..) 并把所有“數(shù)據(jù)訪(fǎng)問(wèn)”屬性標(biāo)記為 writable:false。
說(shuō)一下防抖，應(yīng)用場(chǎng)景是什么
快速排序算法說(shuō)下，基點(diǎn)怎么選？如果一個(gè)數(shù)組是已經(jīng)排序好的怎么選基點(diǎn)？
數(shù)組元素隨機(jī)，取固定基準(zhǔn)；
數(shù)組元素已排序或逆序，取隨機(jī)基準(zhǔn)；
更好的方法：三數(shù)取中，選取數(shù)組開(kāi)頭，中間和結(jié)尾的元素，通過(guò)比較，選擇中間的值作為快排的基準(zhǔn)。
算法的穩(wěn)定性，冒泡、快排
lodash，underscore的庫(kù)了解么？有哪些方法
整個(gè)項(xiàng)目的架構(gòu)，包括前端、后臺(tái)、運(yùn)營(yíng)
sort的底層實(shí)現(xiàn)機(jī)制，看過(guò)源碼么？
數(shù)組長(zhǎng)度<=22時(shí)采用插入排序，大于22用快排。
怎么調(diào)試bug？打過(guò)斷點(diǎn)么？如果前端代碼被壓縮，如何去找到相應(yīng)元素？
chromre控制臺(tái)下，在 Scripts 面板下面有個(gè) Pretty print 按鈕(這種符號(hào) {})，點(diǎn)擊會(huì)將壓縮 js 文件格式化縮進(jìn)規(guī)整的文件，這時(shí)候在設(shè)定斷點(diǎn)可讀性就大大提高了。
來(lái)源：https://www.icode9.com/content-4-649601.html聯(lián)系客服
